This content originally appeared on Bits and Pieces - Medium and was authored by César Felipe
At this point, you’ve likely worked with a GraphQL API. But did you that know that, during the development phase, it’s a lot easier to just mock an entire API?
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:
- The frontend team doesn’t get blocked if/when the server goes down;
- The frontend team can start to develop together with the backend team, instead of waiting for an API to be finished;
- It’s easier to test UI;
- Easier and faster to do integrated tests;
- You won’t be wasting resources hitting the real API.
That’s just some of the benefits of mocking your API instead of use 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 do introspection and give to 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 some 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:
- @fake: Allow you to specify the type of value you want, eg.: companyName, fullName, firstName, lastName, etc.
- @examples: When you need a specific value, eg.: Male or Female, you can use this directive and pass an array as argument of allowed values.
- @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 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.
Build component-driven. It’s better, faster, and more scalable.
Forget about monolithic apps, start building component-driven software. Build better software from independent components and compose them into infinite features and apps.
OSS Tools like Bit offer a great developer experience for building component-driven. Start small and scale with many apps, design systems or even Micro Frontends. Give it a try →
How to Mock a GraphQL API was originally published in Bits and Pieces on Medium, where people are continuing the conversation by highlighting and responding to this story.
This content originally appeared on Bits and Pieces - Medium and was authored by César Felipe
César Felipe | Sciencx (2022-02-04T14:48:25+00:00) How to Mock a GraphQL API. Retrieved from https://www.scien.cx/2022/02/04/how-to-mock-a-graphql-api/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.