Let's say you have your ApolloProvider set up like this:
import React from "react";
import { render } from "react-dom";
import { ApolloProvider } from "react-apollo";
import ApolloClient from "apollo-boost";
const client = new ApolloClient({
uri: 'http://www.example.com/graphql',
});
const App = () => (
<ApolloProvider client={client}>
<div>
<h2>My first Apollo app 🚀</h2>
</div>
</ApolloProvider>
);
render(<App />, document.getElementById("root"));
If you would use a Query component, it would use the client you passed via context. But what if your team decided to move to a microservice architecture where you'll have to deal with multiple clients. How would you do this?
Here are 2 simple ways:
If you are using
const User = () => {
return (
<Query query={GET_USER} client={userClient}>
...
</Query>
)
}
If you are using useQuery react hook, you can pass a client instance in its options.
const { data } = useQuery(GET_USER, {
client: userClient
});
const User = () => {
return (
...
)
}
There are other ways to work with multiple graphql clients in react. If you want to know more, check out this article:
https://medium.com/open-graphql/apollo-multiple-clients-with-react-b34b571210a5