如何通过props而非context传递ApolloClient实例？

我之前也遇到过一模一样的情况！在大型React/Redux项目里不想动根组件的Provider结构，又想灵活用多个Apollo Client实例，显式传client给<Query>组件明明功能正常，却一直弹报错，确实挺烦人的。下面给你两个可行的解决办法：

方法一：给单个Query组件套迷你ApolloProvider #

虽然你不想全局包裹根组件，但可以给需要使用特定Apollo Client的<Query>组件单独套一个极小范围的<ApolloProvider>，这样既不会污染全局上下文，又能让Query组件找到它需要的client上下文，彻底消除报错：

import { ApolloProvider, Query } from '@apollo/client';

// 初始化你的Apollo Client实例
const client = new ApolloClient({ uri: "https://w5xlvm3vzz.lp.gql.zone/graphql" });

// 在需要的位置使用
function YourComponent() {
  return (
    <ApolloProvider client={client}>
      <Query variables={/* 你的变量 */} query={/* 你的查询语句 */}>
        {({ loading, error, data }) => {
          // 处理查询结果
          if (loading) return <p>Loading...</p>;
          if (error) return <p>Error!</p>;
          return <div>{/* 渲染数据 */}</div>;
        }}
      </Query>
    </ApolloProvider>
  );
}

这种方式完全不会影响你已有的Redux <Provider>，只是给单个Query组件提供了它需要的局部上下文，灵活性拉满。

方法二：改用useQuery钩子（推荐） #

如果你已经在使用函数组件，Apollo Client 3.x之后更推荐使用useQuery钩子来替代<Query>组件，它直接支持在配置参数里传入client，完全不需要依赖Provider上下文，代码更简洁，也不会出现这种报错：

import { useQuery } from '@apollo/client';

// 初始化你的Apollo Client实例
const client = new ApolloClient({ uri: "https://w5xlvm3vzz.lp.gql.zone/graphql" });
const YOUR_QUERY = gql`/* 你的查询语句 */`;

function YourComponent() {
  const { loading, error, data } = useQuery(YOUR_QUERY, {
    client: client,
    variables: {/* 你的变量 */},
  });

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error!</p>;
  
  return <div>{/* 渲染数据 */}</div>;
}

另外补充一点：如果你的项目还在使用旧的react-apollo包，建议升级到官方推荐的@apollo/client，旧包的<Query>组件对client prop的支持存在一些兼容性问题，升级后不仅能解决这个报错，还能用到更多新特性。

内容的提问来源于stack exchange，提问作者Bruce