Nested ApolloProviders in React

user_554021 0
Viewed 963

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?

react-gql react-apollo apollo reactjs
1 Answers

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