Single React JS project with multiple graphql URI Link

Question

Hello I am new to ApolloClient and I don't know to pass multiple URI links as a clint and I have to use those all URI if anyone knows about it give me suggestions, what I have to do next.

import { ApolloClient, InMemoryCache, HttpLink, ApolloLink } from '@apollo/client';


// Set `RestLink` with your endpoint
const shopLink = new HttpLink({ uri: 'https://demo.vendure.io/shop-api' });

const cmsLink = new HttpLink({
  uri: 'https://cms.trylah.sg/graphql',
});
const vendureLink = new HttpLink({
  // Production
  //uri: 'https://demo.trylah.sg/shop-api',

  uri: process.env.REACT_APP_SHOP_API_URL || 'http://localhost:3000/shop-api',
  credentials: 'include',
});

export const client = new ApolloClient({
  link: shopLink,
  cache: new InMemoryCache(),
});

Answer 1

I had a similar challenge and used apollo-multi-endpoint-link to set Apollo Link to have an API directive to fetch data from multi endpoints.

You can see a working prototype in this repo for how I did it.

Hopefully that helps!