Spectrum is now read-only. Learn more about the decision in our official announcement.


A community of developers, designers and others who love Apollo and GraphQL. 🚀


Multiple clients with react-apollo

November 13, 2018 at 8:42am
The Apollo community has a new home. This thread is preserved for historical purposes. The content of this conversation may be innaccurrate or out of date. Go to new community home →

Multiple clients with react-apollo

November 13, 2018 at 8:42am
Hey guys,
I was using 2 ApolloProviders with different clients and was calling the one I need with `use` param in graphql (HOC).
Now It's not working with 3rd ApolloProvider (example below)
<ApolloProvider client={clientOne}>
<ApolloProvider client={clientTwo} as="clientTwo">
<ApolloProvider client={clientThree} as="clientThree">
<App />
Yeap, it's a bit stupid way, but for now because we have 3 separated endpoints we need to implement it.
One of the solution is: Put needed client in options for graphql (HOC) and it works.
1) But is there any better/elegant way to solve that ?
2) Why 1st example doesn't work with 3 clients but works with 2 ?

February 19, 2019 at 10:57am
It should work with any number of GraphQL sources you want to include.

May 2, 2019 at 12:01pm
How did it work for you with 2 ApolloProviers at a time? For me it works only with last called..
which solution are you referring to?
, I'd recommend giving the one I suggested a try. was asking why the solution he presented didn't work. The one I linked to works great.
I really appreciate your help! I was trying to avoid Next.js, but i have no other options.
Well the good news is you don't necessarily need to use Next.js to accomplish what I show in that post. The real "magic" in there relates strictly to Apollo. I suggest paying close attention to what I show in the "solution" version of init-apollo.js
I am not sure of all of the details of your set up but according to this medium article Apollo Multiple Clients with React? you can actually pass a client into the Query and Mutation components to over ride which client is being used. In a case where you have maybe a main client you could pass that your ApolloProvider and then where you need to query a seperate client just pass that client into the Query component as as a prop. Or create your own <QueryWithClient1> <QueryWithClient2> <QueryWithClient3> components where you import and set the client you want so you don't have to do it manually everywhere.
const customClient = new ApolloClient({
uri: "http://other-api/graphql"
const Dogs = ({ onDogSelected }) => (
<Query query={GET_DOGS} client={customClient} >
{({ loading, error, data }) => {
if (loading) return "Loading...";
if (error) return `Error! ${error.message}`;
return (
<select name="dog" onChange={onDogSelected}>
{ => (
<option key={} value={dog.breed}>
the challenge there is that you end up with multiple clients, which is contrary to many of the built in assumptions of Apollo (fairly certain on this). The solution in the post I shared keeps everything on one client, and toggles the one client's link attribute based on context passed to the query. Seems cleaner.