No Partying Mariachis

    @titelmedia/react-apollo-multiple-clients

    4.0.5 • Public • Published

    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'));

    Install

    npm i @titelmedia/react-apollo-multiple-clients

    DownloadsWeekly Downloads

    193

    Version

    4.0.5

    License

    MIT

    Unpacked Size

    15.9 kB

    Total Files

    20

    Last publish

    Collaborators

    • mariagluck
    • nanonansen
    • matchs
    • titelmedia-admin
    • dazlious
    • lmtejada
    • bruno.bortagaray
    • jortizsao
    • jbhsnb
    • outisfun
    • apfelfabrik