What is a client query in Apollo?

Apollo Client is a popular JavaScript libraryWhile Apollo has dedicated versions to work with client-side applications using Kotlin and Swift (for iOS), we will only talk about client queries in React applications. that allows data management—fetch, cache, update, and so on—via GraphQL queries. The Apollo Client library provides a 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.

The `useQuery` hook in React

The 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.

Using `useQuery`

Here 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>,
);

React application with useQuery

Explanation

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

What is a client query in Apollo?

The useQuery hook in React

Using useQuery

Explanation

The `useQuery` hook in React

Using `useQuery`