How to fetch data in React Native using Apollo Client

According to the official documentation, Apollo Client is a state management library for JavaScript that allows you to manage remote and local data with GraphQL. Apollo provides integration with React, making it easy to get or modify data in a GraphQL API using hooks.

In this article, I will focus on:

• Explaining the minimum configuration necessary to establish the connection with the public API GraphQL Jobs
• How to use React hooks to get data.

Building our React Native Project:

Before starting with our project, ensure you have installed expo-cli because we will use the expo for this guide. You can get more information about the tool here: expo-cli

The first thing we must do is create a new React Native project with expo-cli.

Once the command execution has finished, a folder containing our project files will have been created.

To run your project, navigate to the directory: cd apollo-client-intro and use one of the following commands: yarn android or yarn ios

Now, we are ready to install dependencies. In this scenario, I’ll be using yarn, but if you prefer npm it’s ok. With Yarn, execute: yarn add @apollo/client graphql

The @apollo/client package includes features like in-memory caching, local state management, error handling, and React integration and we will be using it in React Native to fetch data from GraphQL Jobs API. The graphql package, for its part, contains the logic to parse our queries and mutations.

Configure the GraphQL Client

Before starting to consume the data, it is necessary to create an instance of the apollo client package to indicate: (1) which API we will point to, (2) how errors will be handled, (3) how requests should be made to the endpoints that require authorization, and (4) any other action that depends on the characteristics of our application.

In our case, we will only focus on the basic configuration, which is the definition of the API that we will consume. So, for it, we will create the client.js file and instantiate ApolloClient specifying in the URI property the URL of the GraphQL endpoint.

Once the configuration is ready, the easiest and fastest way to obtain data would be by calling the query method of the client object and passing it the necessary arguments; however, we will do it differently. We will expose the apollo instance globally so that any component or custom hook in charge of obtaining or modifying data can easily use it.

To make this easy, Apollo supplies us with the ApolloProvider component, which is similar to React’s Context Provider. The ApolloProvider wraps child components and makes the previously created instance accessible to those child components. Now, in our App.jsx, wrap the app with the ApolloProvider and pass the client prop.

As you can see, there’s a <JobList /> component that we’ll create later.

Fetching data

To obtain or modify data, we can use one of the following hooks: useQuery, useLazyQuery, useMutation, and useSubscription. In this article, we will be using useQuery, which is used to get data and will allow us to obtain a list of jobs from the API.

To utilize the useQuery hook, we need to define the query in a string and wrap it in the gql function to pass it as the first argument to the hook (in our case, we only have one argument).

Now, we’re going to create the JobList component

The code above executes the query when React mounts the component and returns three state properties:

loading: when its value is true, the request is in progress.
error: if it is different from null, it means that an error occurred and therefore it contains an object with information about it.
data: it is an object that contains the data that we request in the query.

Based on these properties we render different components depending on the state emitted by useQuery. Now if you run your app you should see the Loading component, and then the list of jobs

Conclusion

Well, this is the end of this introductory article. I hope it is a good starting point to begin your journey using Apollo Client. Feel free to leave your questions, suggestions, or contributions in the comments. Also, if you are interested in my content or want to talk about React Native or GraphQL, here are my social networks:

GitHub: https://github.com/LaurenceM10
Twitter: https://twitter.com/LaurenceM10_