Apollo Client is a popular useQuery hook to fetch and use GraphQL data in our React application. When our React client application successfully uses the Apollo Client's useQuery hook to fetch data from a GraphQL, Apollo Server, or any other server instance, we can call this a client query in Apollo.
We will discuss using Apollo's useQuery in a simple React application.
useQuery hook in ReactThe useQuery hook can be imported from the @apollo/client library using import useQuery from '@apollo/client'. It requires a GraphQL query as an argument. To make our application work properly with useQuery, we must ensure it has an ApolloClient instance and wrap it inside the ApolloProvider component. There are some other important considerations, but they are more to do with React and GraphQL than Apollo Client. We will discuss them in our code explanation in the section below.
useQueryHere is a simple React application that uses the useQuery hook.
import React from 'react';
import * as ReactDOM from 'react-dom/client';
import { ApolloClient, InMemoryCache, ApolloProvider } from '@apollo/client';
import { useQuery, gql } from '@apollo/client';
const client = new ApolloClient({
uri: 'https://flyby-router-demo.herokuapp.com/',
cache: new InMemoryCache(),
});
const root = ReactDOM.createRoot(document.getElementById('root'));
const GET_LOCATIONS = gql`
query GetLocations {
locations {
id
name
description
photo
}
}
`;
function DisplayLocations() {
const { loading, error, data } = useQuery(GET_LOCATIONS);
if (loading) return <p>Loading...</p>;
if (error) return <p>Error : {error.message}</p>;
return data.locations.map(({ id, name, description, photo }) => (
<div key={id}>
<h3>{name}</h3>
<img width="400" height="250" alt="location-reference" src={`${photo}`} />
<br />
<b>About this location:</b>
<p>{description}</p>
<br />
</div>
));
}
export function App() {
return (
<div>
<h2>Results of user query using Apollo Client</h2>
<br/>
<DisplayLocations />
</div>
);
}
root.render(
<ApolloProvider client={client}>
<App />
</ApolloProvider>,
);Lines 1–2: We perform standard imports required in all React applications.
Line 3: We import ApolloClient, InMemoryCache, and ApolloProvider types from the @apollo/client library.
Line 4: We import the useQuery hook and the gql package from @apollo/client library.
Lines 6–9: We define our ApolloClient instance called client. The uri variable holds the address to our GraphQL server to which the client query will be directed. The cache variable holds a cache instance created using the InMemoryCache type. This is mandatory when working with Apollo Client in React.
Line 11: Standard React syntax.
Lines 13–22: We specify our GraphQL query GET_LOCATIONS and mark it with the gql tag imported earlier. This is the query that will be sent to the GraphQL server.
Lines 24–40: We define our function DisplayLocations that first executes the useQuery hook with our GET_LOCATIONS query as its argument and then maps results from that query to HTML for three cases:
It displays "Loading..." when our application is loading results.
It displays the error message, if any, as returned by useQuery in the error variable.
It displays the data returned by useQuery in the variable data upon successful execution of the query GET_LOCATIONS as specified by the HTML in lines 31–38.
Lines 42–50: We define our App function that wraps the call to DisplayLocations functions in some extra HTML code.
Lines 52–56: We make our render function execute App but wrapped in the ApolloProvider component. Wrapping in the ApolloProvider component is mandatory when working with Apollo Client in React applications.
Free Resources