Test-Driving GraphQL

GraphQL offers an alternative to HTTP requests for fetching data. It offers a whole bunch of additional features that can be added to data requests.

As with Redux, GraphQL systems can seem complicated, but TDD helps to provide an approach to understanding and learning.

In this chapter, we’ll use the Relay library to connect to our backend. We’re going to build a new CustomerHistory component that displays details of a single customer and their appointment history.

This is a bare-bones GraphQL implementation that shows the fundamentals of test-driving the technology. If you’re using other GraphQL libraries instead of Relay, the techniques we’ll explore in this chapter will also apply.

Here’s what the new CustomerHistory component looks like:

Figure 13.1 – The new CustomerHistory component

This chapter covers the following topics:

• Compiling the schema before you begin
• Test...

Technical requirements

The code files for this chapter can be found here:

https://github.com/PacktPublishing/Mastering-React-Test-Driven-Development-Second-Edition/tree/main/Chapter13

Compiling the schema before you begin

The code samples for this chapter already contain some additions:

• The react-relay, relay-compiler, and babel-plugin-relay packages.
• Babel configuration to ensure your build understands the new GraphQL syntax.
• Relay configuration in the relay.config.json file. The primary piece of configuration is the location of the schema.
• A GraphQL schema in the file src/schema.graphql.
• A server endpoint at POST/graphql, which services incoming GraphQL requests.

It’s beyond the scope of this book to go into each of these, but you will need to compile the schema before you begin, which can be done by typing the following command:

npx relay-compiler

The npm run build command has also been modified to run this command for you, just in case you forget. Once everything is compiled, you’re ready to write some tests.

Testing the Relay environment

There are a few different ways to approach the integration of Relay into a React application. The method we’ll use in this book is the fetchQuery function, which is analogous to the global.fetch function we’ve already used for standard HTTP requests.

However, Relay’s fetchQuery function has a much more complicated setup than global.fetch.

One of the parameters of the fetchQuery function is the environment, and in this section, we’ll see what that is and how to construct it.

Why Do We Need to Construct an Environment?

The Relay environment is an extension point where all manner of functionality can be added. Data caching is one example. If you’re interested in how to do that, check out the Further reading section at the end of this chapter.

We will build a function named buildEnvironment, and then another named getEnvironment that provides a singleton instance of this environment so that the initialization...

Fetching GraphQL data from within a component

Now that we have a Relay environment, we can begin to build out our feature. Recall from the introduction that we’re building a new CustomerHistory component that displays customer details and a list of the customer’s appointments. A GraphQL query to return this information already exists in our server, so we just need to call it in the right way. The query looks like this:

customer(id: $id) {
  id
  firstName
  lastName
  phoneNumber
  appointments {
    startsAt
    stylist
    service
    notes
  }
}

This says we get a customer record for a given customer ID (specified by the $id parameter), together with a list of their appointments.

Our component will perform this query when it’s mounted. We’ll jump right in with that functionality, by testing the call to fetchQuery...

Summary

This chapter has explored how to test-drive the integration of a GraphQL endpoint using Relay. You have seen how to test-drive the building of the Relay environment, and how to build a component that uses the fetchQuery API.

In Part 3, Interactivity, we’ll begin work in a new code base that will allow us to explore more complex use cases involving undo/redo, animation, and WebSocket manipulation.

In Chapter 14, Building a Logo Interpreter, we’ll begin by writing new Redux middleware to handle undo/redo behavior.

Exercises

Integrate the CustomerHistory component into the rest of your application by taking the following steps:

1. Add a new route at /viewHistory?customer=<customer id> that displays the CustomerHistory component, using a new intermediate CustomerHistoryRoute component.
2. Add a new Link to the search actions on the CustomerSearch screen, titled View history, that, when pressed, navigates to the new route.

Further reading

The RelayEnvironmentProvider component:

https://relay.dev/docs/api-reference/relay-environment-provider/