Fetch Data with Queries in Apollo Client

Apollo Client made the fetching of data from a graph API relatively easy because it intelligently caches your data, while keeping tracks of loading and error state.

In this section, we'll learn how to use the useQuery hook from @apollo/react-hooks to fetch more complex queries and execute features like pagination.

The useQuery hook

The useQuery hook is one of the most vital building blocks of an Apollo app. It's typically a React Hook that fetches a GraphQL query giving you the result so you can render your UI based on the data it returns.

The useQuery hook makes use of React's Hooks API to fetch and load data from queries into our UI. It exposes error, loading and data properties through a result object, that help us populate and render our component.

If above explanation sounds huge, don't panic we will illustrate this concept with an example in a moment.

Fetching a list

To create a component with useQuery, import useQuery from @apollo/react-hooks, pass your query wrapped with gql in as the first parameter, then wire your component up to use the loading, data, and error properties on the result object to render UI in your app.

First, we're going to build a GraphQL query that fetches a list of launches. We're also going to import some components that we will need in the next step.

To start, Navigate to src/pages/launches.jsx to get started and copy the code below into the file.

// src/pages/launches.jsx
import React, { Fragment } from "react";
import { useQuery } from "@apollo/react-hooks";
import gql from "graphql-tag";
import { LaunchTile, Header, Button, Loading } from "../components";

const GET_LAUNCHES = gql`
  query launchList($after: String) {
    launches(after: $after) {
      cursor
      hasMore
      launches {
        id
        isBooked
        rocket {
          id
          name
        }
        mission {
          name
          missionPatch
        }
      }
    }
  }
`;

Here, we're defining a query to fetch a list of launches by calling the launches query from our schema. The launches query returns an object type with a list of launches, in addition to the cursor of the paginated list and whether or not the list hasMore launches. We need to wrap the query with the gql function in order to parse it into an AST.

Now, let's pass that query to Apollo's useQuery component to render the list. To do this, copy and paste the following code after the query:

//src/pages/launches.jsx
const Launches = () => {
  const { data, loading, error } = useQuery(GET_LAUNCHES);
  if (loading) return <Loading />;
  if (error) return <p>ERROR</p>;
  if (!data) return <p>Not found</p>;

  return (
    <Fragment>
      <Header />
      {data.launches &&
        data.launches.launches &&
        data.launches.launches.map(launch => (
          <LaunchTile key={launch.id} launch={launch} />
        ))}
    </Fragment>
  );
};

export default Launches;

In the above code snippet, we passed the GET_LAUNCHES query from the previous step into our useQuery hook. Then, depending on the state of loading, error, and data, we either render a loading indicator, an error message, or a list of launches fetched.

So far, our query is only fetching the first 20 launches from the list. To fetch the full list of launches, we need to build a pagination feature that displays a Load More button for loading more items on the screen.

This feature will be implemented in the very next tutorial.

Previous: Connect GraphQL API to a React Client with Apollo.
Next: Update Data with Mutations in Apollo Client.