Mastering React Test-Driven Development

Building the GraphQL reducer

The Git tag for this section is query-customer-reducer.

Now that we have a Relay environment, we can begin to build out our feature. Recall from the introduction that we're going to build 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 itself looks like this:

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

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

Since our application ...