React Context with Apollo Client

Avoiding props-drilling by making data accessible through a React Hook

React Context provides a way to pass data through the component tree without having to pass props down manually at every level in your application which is also known as props-drilling.

Props-drilling can cause problems when you need to rename a property or update the data type and can cause bloat within your application as each component in the tree needs to be aware of properties they may not be using. Instead our data will be accessible through a React Hook, which can be called anywhere in the nested component tree.

To help show how to avoid props-drilling, we'll first configure two components to use React Context: QueryResultProvider and useQueryResult.

The QueryResultProvider component is used to wrap a component tree, providing it with the context for a specific GraphQL query. The component takes in a query which is a GraphQL query, and optionally variables which is passed to the query. It uses the useQuery hook from the Apollo Client to execute the query and get the query data, loading, and error values. These values are then saved in the context.

1
import React, { createContext, useContext } from "react";
2
import { ApolloQueryResult, OperationVariables, useQuery } from "@apollo/client";
3

4
interface QueryResult<TData> {
5
  data?: TData;
6
  error?: any;
7
  loading: boolean;
8
}
9

10
interface QueryContextValue<TData> {
11
  queryData: QueryResult<TData>;
12
  refetch: () => Promise<ApolloQueryResult<TData>>;
13
}
14

15
const QueryResultContext = createContext<QueryContextValue<any>>({
16
  queryData: { loading: true },
17
  refetch: () => Promise.resolve({} as ApolloQueryResult<any>),
18
});
19

20
interface QueryResultProviderProps<TVariables extends OperationVariables | undefined = object> {
21
  query: any;
22
  variables?: TVariables;
23
  children: React.ReactNode;
24
}
25

26
export const QueryResultProvider = ({ query, variables, children }: QueryResultProviderProps) => {
27
  const { data, error, loading, refetch } = useQuery(query, { variables });
28
  const value = { queryData: { data, error, loading }, refetch };
29
  return <QueryResultContext.Provider value={value}>{children}</QueryResultContext.Provider>;
30
};
31

32
export const useQueryResult = <TData = any,>(): QueryResult<TData> => {
33
  const context = useContext(QueryResultContext);
34
  if (!context) {
35
    throw new Error("useQueryResult must be used within a QueryResultProvider");
36
  }
37
  return context.queryData;
38
};

In this example, we use the QueryResultProvider component to wrap the Users component, providing it with the GET_USERS query. The Users component then uses the useQueryResult hook to access the data, loading state, and error from the query context.

1
import { QueryResultProvider, useQueryResult } from "./query-context";
2
import { gql } from "@apollo/client";
3

4
const GET_USERS = gql`
5
  query GetUsers {
6
    users {
7
      id
8
      name
9
    }
10
  }
11
`;
12

13
interface IUser {
14
  id: string;
15
  name: string;
16
}
17

18
const Users = () => {
19
  const { data, loading, error } = useQueryResult<IUser>();
20

21
  if (loading) return <div>Loading...</div>;
22
  if (error) return <div>Error: {error.message}</div>;
23

24
  return (
25
    <div>
26
      <h1>Users</h1>
27
      <ul>
28
        {data.users.map((user) => (
29
          <li key={user.id}>{user.name}</li>
30
        ))}
31
      </ul>
32
    </div>
33
  );
34
};
35

36
const App = () => (
37
  <QueryResultProvider query={GET_USERS}>
38
    <Users />
39
  </QueryResultProvider>
40
);

Home