menu

Apollo

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

Channels
# All channels
view-forward
# General
view-forward
# Apollo Angular
view-forward
# Announcements
view-forward
# Apollo Android
view-forward
# Apollo Client
view-forward
# Apollo iOS
view-forward
# Apollo Link
view-forward
# Apollo Link Rest
view-forward
# Local State
view-forward
# Apollo Studio
view-forward
# Apollo Server
view-forward
# Apollo Tooling
view-forward
# Contributing
view-forward
# Docs
view-forward
# Events
view-forward
# GraphQL Tools
view-forward
# Jobs
view-forward
# Random
view-forward
# React Apollo
view-forward
# Showcase
view-forward
# Subscriptions
view-forward
# Testing
view-forward
# Vue Apollo
view-forward
Team

Multiple clients with react-apollo

November 13, 2018 at 8:42am

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 />
</ApolloProvider>
</ApolloProvider>
</ApolloProvider>
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.
Edited
like-fill
2
  • reply
  • like

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..
  • reply
  • like
which solution are you referring to?
  • reply
  • like
which solution are you referring to?
  • reply
  • like
, 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.
  • reply
  • like
, 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.
  • reply
  • like
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
  • reply
  • like
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>
);
  • reply
  • like
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.
like-fill
4
  • reply
  • like