Nested ApolloProviders in React

Question

I'm working on a micro-frontend application. We're building a library to manage all of our user data, permissions, roles, etc.

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

This will be used in many applications and it looks something like this:

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

The issue is that the application's ApolloProvider doesn't work cause the Queries are being done against the library's data source and not the application.

Does anyone know a way of having nested, or multiple, ApolloProviders?

Answer 1

For anyone interested:

You are only allowed one Provider per application, no matter where this provider is being fetched from. What you can do is define the client which you want to use for your queries, mutations, subscriptions:

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

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

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