Skip to content
Use multiple ApolloClient instances for your queries
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src
.babelrc
.editorconfig
.eslintignore
.eslintrc.js
.gitattributes
.gitignore
.node-version
.nvmrc
LICENSE
README.md
package.json
yarn.lock

README.md

React Apollo Multiple Clients

Motivation and Idea

Inspired by Rafael Nunes (see Medium Article: Apollo Multiple Clients with React), we needed a more generic solution.

Install

yarn @titelmedia/react-apollo-multiple-clients

Usage

You can get rid of the original <ApolloProvider> and use <ApolloMultipleClientsProvider> instead. Use the Higher Order Component 'withClient' to set a namespace.

import React from 'react';
import ReactDOM from 'react-dom';
import ApolloClient from 'apollo-boost';
import { Query, Mutation } from 'react-apollo';

import { ApolloMultipleClientsProvider, withClient } from '@titelmedia/react-apollo-multiple-clients';

const client1 = new ApolloClient({
  uri: 'https://graphql.client1.com'
});

const client2 = new ApolloClient({
  uri: 'https://graphql.client2.com'
});

const clients = {
  firstNamespace: client1,
  secondNamespace: client2,
};

const FETCH_TEST = gql`
  query fetch($foo: String!) {
    test: post(foo: $foo) {
      foo
    }
  }
`;

const InnerComponent = ({error, load, data: { test }}) => (loading || error) ? null : test;

const Component = ({ ...rest }) => (
  <Query query={FETCH_TEST} variables={{ foo: 'bar' }}>
    <InnerComponent {...rest} />
  </Query>
  <Mutation query={FETCH_TEST} variables={{ foo: 'bar' }}>
    <InnerComponent {...rest} />
  </Mutation>
);

const ClientQueryContainer = withClient('clientName1')(Component);
const ClientQuery1 = withClient('clientName1')(Component);
const ClientQuery2 = withClient('clientName2')(Component);

const App = () => (
  <ApolloMultipleClientsProvider clients={clientList}>
    <ClientQuery1 />
    <ClientQueryContainer>
      <ClientQuery1 />
      <ClientQuery2 />
    </ClientQueryContainer>
    <ClientQuery2 />
  </ApolloMultipleClientsProvider>,
);

/* Output will be something like
  <ApolloProvider client={client1}>
    <ClientQuery1 /> // context is client1
    <ClientQueryContainer>
      <ApolloProvider client={client2}>
        <ClientQuery2 /> // context is client2
      </ApolloProvider>
      <ClientQuery1 /> // context is client1 and is not extra wrapped inside a provider
    </ClientQueryContainer>
    <ApolloProvider client={client2}>
      <ClientQuery2 /> // context is client2 and will be wrapped inside a new container
    </ApolloProvider>
  </ApolloProvider>

*/

ReactDOM.render(<App />, document.getElementById('root'));
You can’t perform that action at this time.