Welcome to another GraphQL for Beginners article, Part 5! I am very thankful that this series has received lots of support. It is a pleasure to know that it has helped a lot of new GraphQL developers.

In this part, let's learn more about Apollo Client and how to fetch data from GraphQL APIs using this simple and powerful library.

Prerequisite

Before you read further, you should have at least a beginner-level of knowledge in GraphQL. If not, please check out my GraphQL for Beginner Series.

If you are a complete beginner in GraphQL, please read from Part 1 of this series.

Introduction to Apollo Client

Apollo Client is a modern and comprehensive state management library that helps developers to fetch, cache or update data from GraphQL APIs. In this article, we will take a look at how to use this library to query a GraphQL API and display its data in a React app.

Apollo Client has a declarative data fetching approach that gives the code predictability and efficiency. There is no need to manually track loading states with Apollo React.

It is also fully compatible with any GraphQL API and setup, allowing it to be easily integrated with such apps. Specifically, it is very powerful with React apps as it features built-in support and React Hooks.

For more information on Apollo Client, feel free to read its documentation.

Step 1: Getting Started

In this example, I will be using the Pokémon GraphQL API to fetch and display data in my app.

Let's get started by installing Apollo Client and GraphQL packages in a React App:

npm install @apollo/client graphql

Step 2: Initialize ApolloClient

In our index.js, let us initialize an ApolloClient instance by importing the following:

import {
  ApolloClient,
  InMemoryCache,
  ApolloProvider
} from "@apollo/client";

Below the import statement, we initialize the instance like so:

const client = new ApolloClient({
  uri: 'https://beta.pokeapi.co/graphql/v1beta',
  cache: new InMemoryCache()
});

The uri refers to the endpoint of the GraphQL API. As shown in the screenshot below, our PokeAPI is located at: https://beta.pokeapi.co/graphql/v1beta

Finally, we wrap the ApolloProvider component around our App component, passing client as a prop.

ReactDOM.render(
  <ApolloProvider client={client}>
  <React.StrictMode>
    <App />
  </React.StrictMode>
  </ApolloProvider>,
  document.getElementById('root')
);

Step 3: Write the Query

In the React's app src folder, let's create a gql folder. This is where we will write all our queries or mutation. It keeps the code organized.

Inside the gql folder, create a file called Query.js, where we will write our query to fetch data from the PokeAPI.

At this point, the app structure should roughly look like this:

In gql/Query.js, we will first import gql, then export and write our GraphQL query inside it like so:

import { gql } from "@apollo/client";

export const GET_GEN_3 = gql`
  query getGen3 {
    pokemon_v2_pokemonspecies(
      order_by: { id: asc }
      where: { pokemon_v2_generation: { name: { _eq: "generation-iii" } } }
    ) {
      name
      id
    }
  }
`;

In this example, we are querying all Pokémon's name and id that were from Generation 3 aka Hoenn region (i.e. created in 2003).

Step 4: Run the Query

To execute the query, head over to App.js. Import the useQuery Hook and the query:

import { useQuery } from '@apollo/client';
import { GET_GEN_3 } from "./gql/Query";

Then, run the query with this one line:

function App() {
   const { loading, error, data } = useQuery(GET_GEN_3);
   console.log(data);
   //...
}

Now, we can run npm start and we should see our Pokémon data has been successfully fetched in the following format:

Step 5: Display Data in React

Our next step is to display this fetched data in our App.

In the return function of App.js, we can simply use conditionals and map the data like this:

 return (
    <div className="App">
      <header className="App-header">
        {loading ? (
          <img src={logo} className="App-logo" alt="logo" />
        ) : error ? (
          <p>Error: {error}</p>
        ) : (
          <div>
            {data.pokemon_v2_pokemonspecies.map((pokemon) => {
              return (
                <p>
                  {pokemon.id} {pokemon.name}
                </p>
              );
            })}
          </div>
        )}
      </header>
    </div>
  );

In the code above, we show different UI based on the state of the query. If it is loading, we will show a loading animation. Else if there's an error, we simply print it on the app. Else, we shall map the pokemon_v2_pokemonspecies array and print each Pokemon's name and id.

Open Source Session Replay

Debugging a web application in production may be challenging and time-consuming. OpenReplay is an Open-source alternative to FullStory, LogRocket and Hotjar. It allows you to monitor and replay everything your users do and shows how your app behaves for every issue. It’s like having your browser’s inspector open while looking over your user’s shoulder. OpenReplay is the only open-source alternative currently available.

Happy debugging, for modern frontend teams - Start monitoring your web app for free.

Result

Here is the result of our very simple example.

Conclusion

Thanks for reading. I hope this article has helped you in getting started with Apollo Client. Note that Apollo Client automatically caches queries and therefore, subsequent executions of the same query will be very fast.

Apollo Client also supports other GraphQL operations such as Mutations, Subscriptions and more. If you want me to write about these other operations, do let me know in the comments below.

In the meantime, please check out their documentation to learn more. Cheers!