I'm using Next13 + Apollo Server + Apollo Client. I'm trying to configure the client to be able to hit either the apollo server api or an external api depending on what content I need to get.

I am setting up the server components to utilise this:

import { ApolloClient, HttpLink, InMemoryCache } from "@apollo/client";
import { registerApolloClient } from "@apollo/experimental-nextjs-app-support/rsc";

export const { getClient } = registerApolloClient(() => {
  return new ApolloClient({
    cache: new InMemoryCache(),
    link: new HttpLink({
      uri: "https://main--spacex-l4uc6p.apollographos.net/graphql",
    }),
  });
});

From this article: https://www.apollographql.com/blog/announcement/frontend/using-apollo-client-with-next-js-13-releasing-an-official-library-to-support-the-app-router/

However I need to configure this to be able to conditionally hit, say, a contentful graphql api.
I attempted something like this:

const db = new HttpLink({
  uri: "http://localhost:3000/api",
});

const cms = new HttpLink({
  uri: `${CONTENTFUL_BASE_URL}${CONTENTFUL_SPACE_ID}`,
  headers: {
    "Content-Type": "application/json",
    Authorization: `Bearer ${CONTENTFUL_DELIVERY_TOKEN}`,
  },
});

export const { getClient } = registerApolloClient(
  () =>
    new ApolloClient({
      cache: new InMemoryCache(),
      link: ApolloLink.split(
        operation => operation.getContext().clientName === APOLLO_CLIENTS.CMS,
        cms,
        db,
      ),
    }),
);

But can't quite get it to work.

Can anyone help?