React 中嵌套 ApolloProvider

Question

我正在开发一个微前端应用程序。我们正在构建一个库来管理所有用户数据、权限、角色等。

<ApolloProvider client={userManagementClient}>
  {children}
</ApolloProvider>

这将在许多应用程序中使用，它看起来像这样：

<ApolloProvider client={appClient}>
  <UserManagementProvider><App /></UserManagementProvider>
</ApolloProvider>

问题是应用程序的 ApolloProvider 不起作用，因为查询是针对图书馆的数据源而不是应用程序进行的。

有谁知道嵌套或多个 ApolloProvider 的方法吗？

Answer 1

对于任何有兴趣的人：

每个应用程序只允许有一个提供程序，无论该提供程序是从何处获取的。您可以做的是定义要用于查询、突变、订阅的客户端：

const link = ApolloLink.from([ /* ... */ ]);

const apolloClient = new ApolloClient({ link, cache: new InMemoryCache() });

const status = useQuery<GetUserQuery>(
  userQuery,
  {
    variables: {
      email
    },
    client: apolloClient, // <<--
  }
);