Why create a mock API?

Before I show you how to mock your API, I want to share with you the benefits of creating a mock:

1. The frontend team doesn’t get blocked if/when the server goes down;
2. The frontend team can start to develop together with the backend team instead of waiting for an API to be finished;
3. It’s easier to test UI;
4. Easier and faster to do integrated tests;
5. You won’t be wasting resources hitting the real API.

That’s just some of the benefits of mocking your API instead of using just the real API.

How do we create a mock API?

We will use two main tools to do the mock.

The first one is GraphQL Codegen. This allows you to introspect and give you the schema of the real API.

The second one is the GraphQL Faker. This is responsible for creating a fake server to simulate the real API.

Let’s start.

First, we need to create a new project and start a Node.js project:

mkdir mock-api && cd mock-api && yarn start -y

After that, we need to install all the dependencies:

@graphql-codegen/cli @graphql-codegen/introspection @graphql-codegen/schema-ast @graphql-codegen/urql-introspection graphql graphql-codegen graphql-faker

Now we can start to code. First, we need to generate a schema from your real API. To do that, you need to run the introspection query using GraphQL Codegen:

After executing the generateSchema function, it will create a file called schema.graphql at the root of your project. This will be used to create a server simulating the real API.

Now, we just need to run the server using the schema.graphql file:

Now the mocked server is available at http://localhost:9002. This is where the magic happens.

Accessing https://localhost:9002/editor, you can edit all the schema that was generated through introspection.

There are three main GraphQL directives that you can use:

1. @fake: Allow you to specify the type of value you want, eg.: companyName, fullName, firstName, lastName, etc.
2. @examples: When you need a specific value, eg.: Male or Female, you can use this directive and pass an array as an argument of allowed values.
3. @listLength: Allow you to specify the size of an array with min and max values.

If we run the query with the above schema, we will receive the following data:

Now, we can change the schema to generate on the editor.

I’ve changed Company.name from companyName to lorem words, limited the size of the employees array, and limited the examples of Company.industry:

And now, running the query again, we will receive the following result:

And that’s it! That’s everything you need to mock your GraphQL API. I hope you have found this short guide useful. If so, be sure to let me know in the comments.