Odyssey

Lift-off II: Resolvers

Journey of a GraphQL queryExploring our dataApollo RESTDataSourceImplementing our RESTDataSourceThe shape of a resolverImplementing query resolversConnecting the dots in server-landQuerying live dataErrors! When something goes wrongJourney's end
10. Journey's end
2m

We took a shortcut to server-land with GraphOS Studio, where we saw queries succeed and fail. Now how about we make sure the whole round-trip query journey works from our client app, to the server and back?

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.

Screenshot of the Catstronauts homepage in a browser showing live data
Can you see all the cards displaying live data? What's the author's name on the last track card?

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.

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!

Previous

Share your questions and comments about this lesson

Your feedback helps us improve! If you're stuck or confused, let us know and we'll help you out. All comments are public and must follow the Apollo Code of Conduct. Note that comments that have been resolved or addressed may be removed.

You'll need a GitHub account to post below. Don't have one? Post in our Odyssey forum instead.

              GraphOS Studio

              The web interface for GraphOS, which provides graph, variant, and organization management, metrics visualization, schema pipeline tools and more.

              query

              A request for specific data from a GraphQL server. Clients define the structure of the response, enabling precise and efficient data retrieval.

              query

              A request for specific data from a GraphQL server. Clients define the structure of the response, enabling precise and efficient data retrieval.

              resolver

              A function that populates data for a particular field in a GraphQL schema. For example:

              const resolvers = {
                Query: {
                  author(root, args, context, info) {
                    return find(authors, { id: args.id });
                  },
                },
              };
              fields

              A unit of data that belongs to a type in a schema. Every GraphQL query requests one or more fields.

              type Author {
                # id, firstName, and lastName are all fields of the Author type
                id: Int!
                firstName: String
                lastName: String
              }
              query

              A request for specific data from a GraphQL server. Clients define the structure of the response, enabling precise and efficient data retrieval.

              graph

              A schema-based data model representing how different data elements interconnect and can be accessed.

              query

              A request for specific data from a GraphQL server. Clients define the structure of the response, enabling precise and efficient data retrieval.

              arguments

              A key-value pair associated with a particular schema field that lets operations pass data to that field's resolver.

              Argument values can be hardcoded as literal values (shown below for clarity) or provided via GraphQL variables (recommended).

              query GetHuman {
                human(id: "200") {
                  name
                  height(unit: "meters")
                }
              }
              resolvers

              A function that populates data for a particular field in a GraphQL schema. For example:

              const resolvers = {
                Query: {
                  author(root, args, context, info) {
                    return find(authors, { id: args.id });
                  },
                },
              };

              NEW COURSE ALERT

              Introducing Apollo Connectors

              Connectors are the new and easy way to get started with GraphQL, using existing REST APIs.

              Say goodbye to GraphQL servers and resolvers—now, everything happens in the schema!

              Take the course