GraphQL Sample Using json-server as data store

Project Overview

We have two objects, User and Company, we show the relationship between the two. We also show how to use relay connections to page through the results of the queries

The json-server is running also on a seperate instance of glitch since you cannot utilize multiple ports on one instance in glitch. See information here lets-react-starter-json-server1 readme

Sample Queries

  allUsers {
    id
    first_name
    last_name
    company {
      name
    }
  }
  allCompanies {
    id
    name
    users {
      edges {
        node {
          id
          first_name
          last_name
        }
      }
    }
  }
  user(id:3) {
    id
    email
    company {
      id
      name
    }
  }

A view of the GraphQL UI

Click Show in the header to see your app live. Updates to your code will instantly deploy and update live.

Find out more about Glitch.