Today, I faced the same issue and needed a dynamic solution. Here is what I came up with:

type DynamicLinkClient = "aApp" | "bApp" | "graphqlApp";
type LinkType = RestLink | HttpLink;
type DynamicLinkType = { link: LinkType; name: DynamicLinkClient };
const LINK_STORAGE: DynamicLinkType[] = [
  { link: aRestLink, name: "aApp" },
  { link: bAppRestLink, name: "bApp" },
  { link: graphqlAppLink, name: "graphqlApp" },
];

const determineClientFromContext = (client: string) => (operation: Operation) =>
  operation.getContext().client === client;

const DynamicApolloLinkHandler = LINK_STORAGE.reduce<ApolloLink | undefined>(
  (previousLink, nextDynamicLink) => {
    // If no name is provided, resort to defaultLink.
    if (!previousLink) {
      return ApolloLink.split(
        determineClientFromContext(nextDynamicLink.name),
        nextDynamicLink.link,
        defaultLink
      );
    }
    return ApolloLink.split(
      determineClientFromContext(nextDynamicLink.name),
      nextDynamicLink.link,
      previousLink
    );
  },
  undefined
) as ApolloLink;

I have identified this task as utilizing Apollo Links within the vanilla Apollo Client.

Specifically, it involves creating a directional composition link chain. https://i.sstatic.net/PQlx7.png

While my prototype may be verbose, the key points to focus on are:

• Using ApolloLink.split during ApolloClient initialization to direct queries to different endpoints.
• Implementing redirection in the Apollo Link using a boolean operation.
  • In the example provided, I am utilizing "context" as part of query options.

It's worth noting that excessive complexity is not necessary.

Below is my prototype (NextJS + TypeScript + ApolloClient):

libs/apollo/index.ts (where you define your apollo client)

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

// Define endpoints
const animeEndpoint = new HttpLink({
    uri: 'https://graphql.anilist.co',
})
const countriesEndpoint = new HttpLink({
    uri: 'https://countries.trevorblades.com/',
})

// Optional for type safety.
export enum Endpoint {
    anime = 'anime',
    country = 'country',
}

// Configure apollo-client with endpoints
const client = new ApolloClient({
    // Custom property "Version" determines which endpoint to use
    // Truthy = animeEndpoint (second) parameter, falsy = countriesEndpoint (third) parameter
    link: ApolloLink.split((operation) => operation.getContext().version === Endpoint.anime, animeEndpoint, countriesEndpoint),
    cache: new InMemoryCache(),
})

export default client

app/page.tsx (for NextJS implementation)

'use client'
import { useQuery } from '@apollo/client'
import GetAnimeQuery from '@/libs/gql/GetAnime' // GraphQL query
import { Endpoint } from '@/libs/apollo'
import GetCountriesQuery from '@/libs/gql/GetCountries' // GraphQL query

export default function Home() {
  // Fetch Anime data
    const { loading: loadingAnime, error: errorAnime, data: dataAnime } = useQuery(GetAnimeQuery, { context: { version: Endpoint.anime } })
  // Fetch Countries data
    const {
        loading: loadingCountries,
        error: errorCountries,
        data: dataCountries,
    } = useQuery(GetCountriesQuery, { context: { version: Endpoint.country } })
    console.log('Countries', dataCountries)
    console.log('Anime', dataAnime)
    return (
        <main>
            {loadingAnime && <p>Loading Anime...</p>}
            {errorAnime && <p>Error Anime :{errorAnime.message}</p>}
            {loadingCountries && <p>Loading Countries...</p>}
            {errorCountries && <p>Error Countries:{errorCountries.message}</p>}
        </main>
    )
}

Appendix (skip unless requiring graphql queries)

libs/gql/GetAnime.ts

import { gql } from '@apollo/client'

const GetAnimeQuery = gql`
    query Get {
        Page(page: 1, perPage: 5) {
            pageInfo {
                total
                currentPage
                lastPage
                hasNextPage
                perPage
            }
            media {
                id
                title {
                    romaji
                }
            }
        }
    }
`

export default GetAnimeQuery

libs/gql/GetCountries.ts

import { gql } from '@apollo/client'

const GetCountriesQuery = gql`
    query GetAllCountries {
        countries {
            code
            currency
            name
        }
    }
`

export default GetCountriesQuery

Really impressed with Pete's solution that allows for more than just 2 endpoints.

I decided to create my own version in order to enhance type checking.

This is my take on his implementation:

Typescript:

const defaultClient: keyof typeof clients = "heroku";

const clients = {
    "heroku": new HttpLink({ uri: "https://endpointURLForHeroku" }),
    "lists": new HttpLink({uri: "https://endpointURLForLists" })
}

const isRequestedClient = (clientName: string) => (op: Operation) =>
    op.getContext().clientName === clientName;

const ClientResolverLink = Object.entries(clients)
.map(([clientName, Link]) => ([clientName, ApolloLink.from([Link])] as const))
.reduce(([_, PreviousLink], [clientName, NextLink]) => {

    const ChainedLink = ApolloLink.split(
        isRequestedClient(clientName),
        NextLink,
        PreviousLink
    )

    return [clientName, ChainedLink];
}, ["_default", clients[defaultClient]])[1]

declare module "@apollo/client" {
interface DefaultContext {
clientName: keyof typeof clients
}
}

JS:

const defaultClient = "heroku";

const clients = {
"heroku": new HttpLink({ uri: "https://endpointURLForHeroku" }),
"lists": new HttpLink({uri: "https://endpointURLForLists" })
}

const isRequestedClient = (clientName) => (op) =>
op.getContext().clientName === clientName;

const ClientResolverLink = Object.entries(clients)
.reduce(([_, PreviousLink], [clientName, NextLink]) => {

const ChainedLink = ApolloLink.split(
isRequestedClient(clientName),
NextLink,
PreviousLink
)

return [clientName, ChainedLink];
},["_default", clients[defaultClient]])[1]