Overview

We've tested queries in Explorer. Now let's complete the round trip and confirm the Catstronauts client renders live homepage data.

In this lesson, we will:

• Run the client app against our live GraphQL server
• Verify the homepage displays tracks from the REST API
• Reflect on how the schema stayed stable while the data source changed

Let's run the client. Open up a new terminal and navigate to the client folder. Run npm start, which will open up your browser to http://127.0.0.1:3000/, or localhost:3000.

Look at that, our Catstronauts app is showing all of the tracks on the homepage! Well done! Our query's journey is complete.

We've come a long way. We retrieved live data from a REST API. We used a RESTDataSource to handle making these API calls more efficient. We created a resolver to connect to that data source and successfully return the correct fields to our client. We even saw what can happen if something went wrong with our query. In the end we got all of the Catstronauts tracks on our homepage.

Have you noticed that we changed our data from mock objects to live data, without needing to modify a thing on the client app? Everything on the client's end kept working as in Lift-off I, but now it's populated with real data.

Although things can and will change (new data sources, new clients, and so on), the graph brings a new level of flexibility and resilience for developers. The schema remains the single source of truth for your data, which your clients can rely on.

Practice

Up next

In the next mission, Lift-off III, we'll be using query arguments, writing more resolvers, and adding a new Track Details page to our Catstronauts app. See you there!