GraphQL Editor

Creating fake backend with GraphQL

tomekponiat profile image Tomek Poniatowicz Originally published at blog.graphqleditor.com Updated on ・2 min read

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:


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 -


Editor guide
danroc profile image
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?

tomekponiat profile image
Tomek Poniatowicz Author

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.

danroc profile image
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.

thegamefreak720 profile image
Ori Alvarez

This is so useful. Thanks :D

andreslopezrm profile image

Excellent contribution, thanks is very useful 😄