# Client Side Setup

## Client Side Setup

Now let's do the frontend part! Actually the frontend part is up to you. Microgen backend is a plain GraphQL and REST API, so you can use any tech stack to consume it on your client side (frontend). But if you insist us to let you know, here are some of our recommendation:

### Apollo GraphQL

Install apollo client side from <https://www.apollographql.com/client>. Choose the frontend framework that you wish to use such as React, Vue, or Angular. In React for example, you can simply call the GraphQL like this from client side:

```jsx
export default graphql(gql`{
  feed(type: TOP, limit: 10) {
    repository {
      name
      owner { login }
    }
    postedBy { login }
  }
}`)(props => (
  <List>
    {props.data.feed.map(item => (
      <ListItem
        title={
          item.repository.owner.login +
            item.repository.name }
        subtitle={`Posted by ${item.postedBy.login}`}
      />
    ))}
  </List>
));
```

### REST API&#x20;

Using REST API as client side is pretty straightforward. For example you have table named Post on your schema. Then you can execute some crud commands such as:

\[GET] <https://mcgn/678234scx/api/posts>

\[POST] <https://mcgn/678234scx/api/post>

\[PATCH]  <https://mcgn/678234scx/api/post/:id>

\[DELETE] <https://mcgn/678234scx/api/post/:id>

for more information about how to use Microgen REST API, you can check in REST API section!&#x20;

In Javascript world such as React, Vue, etc you can simply use Axios to consume the above REST API.

### GraphQL using Plain REST API

Just in case if you are not familiar with apollo but still want to use the power of GraphQL, you can also call GraphQL simply using REST API. For example if you are using NodeJS, you can use Axios for your client side API call.

```javascript
import axios from axios;

axios({
  url: 'https://1jzxrj179.lp.gql.zone/graphql',
  method: 'post',
  data: {
    query: `
      query PostsForAuthor {
        author(id: 1) {
          firstName
            posts {
              title
              votes
            }
          }
        }
      `
  }
}).then((result) => {
  console.log(result.data)
});
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.microgen.id/mejik-microgen/client-side-setup.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.