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, // <<--
  }
);

React 中嵌套的 ApolloProvider

Nested ApolloProviders in React

apollo

reactjs

react-apollo

react-gql