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:

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

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!

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.

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)
});