Implementing GraphQL in a microservice architecture

August 30th, 2019/Share/Edit on Github ✏️

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 component, easiest way to do this is to just pass a prop.

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

Share Discuss