GraphQL API mocking with json-graphql-server

API mocking is the practice of creating an imitation of a real API server so that you can provide realistic responses to requests. Mocks simulate the behavior of a real API but in a more a controlled manner, matching the schema with data types, objects, and arrays.

Why mock?

API mocking is a great way to quickly prototype and test your frontend application when live data is either unavailable or unreliable. If backend and frontend development are happening in parallel, you can use mock APIs to work on them concurrently such that the absence of a real API does not stop the development of the frontend.

API mocks enable frontend engineers to consume APIs with the same data as the eventual production API stated in API contracts. By using a mock API before developing the real API, backend engineers can identify shortfalls without spending engineering time working on features that may or may not be shipped to production. This fast feedback loop helps make engineering teams more efficient.

You can use API mocking to run tests locally without connecting to a real backend, which is much faster and safer. If you have a continuous integration/continuous deployment (CI/CD) pipeline that runs tests for every new deployment, you may not want to wait for several live calls to an external API. A mock API server can return required results so you can unit test your code.

You can also use mock APIs to emulate the behaviors of external APIs that you don’t control. For instance, an API server can be used to serve fake results of a public API when you are not connected to the internet or even provide mock data response for services their providers require you to purchase.

GraphQL API mocking tools

For writing GraphQL API mocks, there are many open-source tools available. Some of the popular solutions include:

• apollo-server
• GraphQL Editor
• json2graphql
• Blowson
• json-graphql-server

Let’s zoom in on one of the most popular and useful tools available for GraphQL API mocking: json-graphql-server.

json-graphql-server

json-graphql-server is a testing and mocking tool for GraphQL that takes a JSON of your data. It generates a full fake GraphQL API with zero coding in under 30 seconds.

To install json-graphql-server, run the following.

npm install -g json-graphql-server

Create a graphql-server.json file in the root folder of your project and add a JSON object into it. The values should be lists of entities — i.e., arrays of value objects with at least an id key.

{
  "todo": [
    {
      "id": 1,
      "title": "Lorem Ipsum",
      "status":"open"
    },
    {
      "id": 2,
      "title": "Sic Dolor amet",
      "status":"open"
    }
  ],
  "users": [
    {
      "id": 123,
      "name": "John Doe"
    },
    {
      "id": 456,
      "name": "Jane Doe"
    }
  ],
  "done": [
    {
      "id": "foo",
      "name": "Foo",
      "status":"completed"
    },
    {
      "id": "bar",
      "name": "Bar",
      "status":"completed"
    }
  ]
}

Start the GraphQL server on localhost, port 5000.

json-graphql-server graphql-server.json --p 5000

If you don’t add the flag --p <port number>, the server will be started using the default port 3000.

You can now access the GraphQL API via http:localhost:5000/graphql and perform GraphQL queries.

{
  Todo(id: 1){
    id
    title
    status
  }
}

The query above would produce the following response.

---

Over 200k developers use LogRocket to create better digital experiences

Learn more →

---

{
  "data": {
    "Todo": {
      "id": "1",
      "title": "Lorem Ipsum",
      "status": "open"
    }
  }
}

JSON GraphQL Server is GraphiQL-enabled, meaning it includes a playground where you can make GraphQL queries and mutations.

Using json-graphql-server with Apollo Client

import { ApolloClient, InMemoryCache } from '@apollo/client';
import { gql } from '@apollo/client'

// setup Apollo Client
const client = new ApolloClient({
  uri: 'http://localhost:5000/graphql',
  cache: new InMemoryCache()
});

//  make a query
client
  .query({
    query: gql`
      query Todo($id: ID!) {
        Todo(id: $id) {
          id
          title
          status
        }
      }
    `,
  variables: {id: 1}
  })
  .then(result => console.log(result));

Conclusion

In this guide, we outline how to use JSON GraphQL Server with Apollo Client. Check out the docs to learn how to use it with Node, browser fetch, XMLHttpRequest, and webpack. The graphql-server.json can also be populated using fake data generators such as faker and Chance.

Monitor failed and slow GraphQL requests in production

While GraphQL has some features for debugging requests and responses, making sure GraphQL reliably serves resources to your production app is where things get tougher. If you’re interested in ensuring network requests to the backend or third party services are successful, try LogRocket.https://logrocket.com/signup/

LogRocket is like a DVR for web and mobile apps, recording literally everything that happens on your site. Instead of guessing why problems happen, you can aggregate and report on problematic GraphQL requests to quickly understand the root cause. In addition, you can track Apollo client state and inspect GraphQL queries' key-value pairs.

LogRocket instruments your app to record baseline performance timings such as page load time, time to first byte, slow network requests, and also logs Redux, NgRx, and Vuex actions/state. Start monitoring for free.