How to mock fields using Apollo client ⚡️

Mocking Apollo is such a useful feature that it’s misused. I suggest you to start using it as soon as possible since it has too many benefits that you will notice when using them.

I think this tweet that was the reason for this post summarizes it very nicely:

So, let’s go ahead with a working application showing how mocks works!

A working application can be found here if you want to skip the steps and see the final code: https://github.com/giovannibenussi/apollo-mocks-example

Setting up our application 🚀

npx create-react-app apollo-mocks-example
cd apollo-mocks-example

As the Apollo’s Get started page suggest, you need to add the following dependencies to start using Apollo with React:

yarn add apollo-boost @apollo/react-hooks graphql

We will replace all the code inside src/App.js for the following one:

And start the app with yarn start. Now visit http://localhost:3000/ and you should see the following in the browser:

Image for post
Image for post
Our new application. Apollo is not configured yet.

Now we’ll set up Apollo on `src/App.js`. In the code below, we set up a `client` variable that contains the configuration that Apollo will use to connect to our GraphQL endpoint (in this case, it is located in the URL https://48p1r2roz4.sse.codesandbox.io).

Having now a client, we will provide it to every child component by adding an ApolloProvider component:

Save and you should see this now:

Image for post
Image for post
Our application with Apollo set up successfully!

Making Queries

ExchangeRates component.

And then add it to src/App.js:

Our application now looks like this:

Image for post
Image for post

Mocking a new field ✨

First, we’ll extend our GraphQL API specifying that our ExchangeRate GraphQL type has a field called name:

Next, we defined a resolver for our new field. This is the value that our query will return:

In the code above we specify that the name field will return always ‘This is a custom name!’.

Finally, we’ll pass both the typeDefs and resolvers to our Apollo client:

Our src/App.js file now should look like this:

Now we just need to query our new field in our ExchangeRates component.

We need to start by adding the name field to our query and specify that it’s going to be resolved client-side:

And we will show this new name field instead of currency:

Finally, we will remove the currency field from the query since it’s not being used anymore:

Our app now looks like this:

Image for post
Image for post

Adding dynamic data to our mocks 🎨

yarn add -D faker 

Now we will just use a convenient currencyName provided by faker:

Now our app looks like this:

Image for post
Image for post

Now we have our mock fully configured! 🎉 At this point, you should be able to style your app, show it to someone else, or whatever you want!

Removing our client-side resolver when the backend is ready

Also, remove the typeDefs and resolvers definitions so our app looks as in the beginning:

And now our application is completely integrated with the backend:

Image for post
Image for post

Conclusion

If you find this article useful, you can follow me on Twitter (https://twitter.com/giovannibenussi) where I constantly post tips and articles on React, Javascript, and the web in general.

Written by

Frontend Developer 👨‍💻 Follow me on Twitter 🐦 https://twitter.com/giovannibenussi

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store