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:
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.
{ "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: '', 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..