Creating fake backend with GraphQL

What is mocking?

Mocking is primarily used in unit testing and it’s a practice of creating a fake version of an object or a component, so you can isolate its behavior to develop other parts of your software independently.

Importance of mocking data in modern projects

Creating a mock backend is considered a good practice for a couple of reasons:

1. Speed up development

It’s very popular to start a frontend and a backend development at the same time. Having a mock backend let you work on frontend server-depended tasks even if you don’t have a working backend yet.

2. It’s a safe way

Fake backend lets you run local tests. When you don’t need to connect to a real backend it's much safer (and faster). As the project becoming more and more complex, preparing a server infrastructure just to run some tests can be a very unpleasant task and might cause you a lot of trouble.

Is it hard to create a mock backend?

As you see having a mock backend is definitely a huge benefit, then you must be asking yourself why this solution still isn’t that popular? I bet that the first reason that would appear in your mind is that it’s probably too difficult or time-consuming. If that came to your mind you are partially right - creating a mock backend used to be difficult, but it’s not anymore!

GraphQL made mocking data super easy! GraphQL is a strongly typed language. Type System defines various data types that can be used in a GraphQL application and these types can be easily shared between frontend and backend as they have all the information required to mock data.

We went a step further, our GraphQL Editor allows you to the created mock backend with a single click! Don’t believe? Test it yourself. First, go to https://app.graphqleditor.com/ :

All you need to have is a valid GraphQL schema. You can upload an existing schema from a link or use one of our sample schemas. Once you have it loaded just save it and click “Mock Backend” button:

And that’s it! You have a ready to use fake backend endpoint ready for some tests. Use the GraphiQL window and play around with your mock backend:

PS:

The original article was posted on GraphQL Editor Blog - https://blog.graphqleditor.com/visualize-your-schema/

Here is the link to GraphQL Editor app in case you want to try it out -
https://app.graphqleditor.com/showcase/fake-twitter/

Comments

[Daniel da Rocha]

Hey Tomek, thanks for the tip!
But one thing I do not understand: shouldn't the mock backend preferably be local? How is your solution different than connecting to a real backend for tests (assuming there is one), in terms of speed?

[Tomek Poniatowicz]

Hey Daniel!
Well, I think that question answers itself, there must be a real backend ready.
In many projects (this is very unfortunate but still happens quite often) backend and frontend teams work simultaneously and from my experience in a majority of cases, projects come to a point where backend is lacking some implementation and that causes delays on the frontend.

[Daniel da Rocha]

oh, I think I misunderstood. I was assuming this was a mock backend for testing purposes, as in using a mock api endpoint for testing components and functions with Jest, for example.

[Andres Lopez]

Excellent contribution, thanks is very useful 😄