与 Apollo 客户端的 React Context

通过使用 React 钩子使数据可访问来避免 prop 钻孔

React Context 通过无需在应用程序的每一级手动传递 props 即可传递数据的方式，在组件树中通过上下文进行数据传递，这种方式也被称为 prop 钻孔。

当您需要重命名属性或更新数据类型时，prop 钻孔可能会导致问题，并且会随着树中每个组件都需要知道它们可能不使用的属性而使应用程序变得臃肿。相反，我们的数据将通过一个 React 钩子来访问，这个钩子可以在嵌套组件树的任何地方调用。

为了帮助展示如何避免 prop 钻孔，我们将首先配置两个组件使用 React ContextQueryResultProvider 和 useQueryResult。

组件 QueryResultProvider 用于封装一个组件树，为特定 GraphQL 查询提供 查询，这是一个 GraphQL 查询，并且可选地 变量 传递给查询。该组件通过从 Apollo 客户端获取 useQuery 钩子执行 查询 并获取查询数据、加载和错误值。然后这些值将被保存在上下文中。

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
};

在此示例中，我们使用QueryResultProvider组件包装Users组件，向其提供GET_USERS查询。然后Users组件使用useQueryResult钩子从查询上下文访问数据、加载状态和错误。

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

下一步

首页