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...