Here is a write-up of the approach we've been taking: https://www.loudnoises.us/next-js-two-apollo-clients-two-graphql-data-sources-the-easy-way/

It should work with any number of GraphQL sources you want to include.

How did it work for you with 2 ApolloProviers at a time? For me it works only with last called..

@ihai

which solution are you referring to?

@orkhanjafarovr

solution

@ihai

, I'd recommend giving the one I suggested a try.

@orkhanjafarovr

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}>
          {data.dogs.map(dog => (
            <option key={dog.id} value={dog.breed}>
              {dog.breed}
            </option>
          ))}
        </select>
      );
    }}
  </Query>
);

@yellow-space-boots

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.