Unhandled Runtime Error getClient)(...).query is not a function when upgrading from Next.js 14.1.0 to 14.1.1

[linucks]

I'm migrating a Next.js app from the pages to the app router. I'm currently using:

"@apollo/client": "3.11.1" "@apollo/experimental-nextjs-app-support": "0.11.2" "next": "14.1.1"

I've followed the recommendations in the README and am using the following code to set up the Apollo Client:

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

export const { getClient, query, PreloadQuery } = registerApolloClient(() => {
  return new ApolloClient({
    cache: new InMemoryCache(),
    link: new HttpLink({
      // this needs to be an absolute url, as relative urls cannot be used in SSR
      uri: "http://example.com/api/graphql",
    }),
  });
});

I call the client like this: const { data } = await getClient().query({ query: getUserQuery });

With Next.js 14.1.0, this works fine. If I upgrade to Next.js 14.1.1, I get the following error:

 ✓ Compiled /dashboard in 5.7s (3021 modules)
 ⨯ app/dashboard/page.tsx (25:37) @ query
 ⨯ TypeError: (0 , _apollo_ApolloRSC__WEBPACK_IMPORTED_MODULE_1__.getClient)(...).query is not a function
    at DashboardHome (./app/dashboard/page.tsx:42:91)
    at stringify (<anonymous>)
  23 |   // } = useUser();
  24 |
> 25 |   const { data } = await getClient().query({ query: getUserQuery });
     |                                     ^
  26 |   const user = data.viewer;
  27 |
  28 |   if (!user) {

[phryneas]

Hi Jens, thank you for the report!

I just tried bumping next to 14.1.1 in our integration tests over in #337, but I cannot see the problem happening there.

Could you please try to create a reproduction?

[linucks]

Hi Lenz. Thanks for getting back to me so quickly. I've packaged up what I think is the bare minimum required to reproduce the issue and have attached it here:

apollo_error.tgz

Run yarn install && yarn dev and then go to http://localhost:3000/dashboard to see the error.

[phryneas]

I see it now.

Irritatingly, doing

const registeredClient = registerApolloClient(() => {
  return new ApolloClient({
    cache: new InMemoryCache(),
    link: new HttpLink({
      uri: "https://graphqlzero.almansi.me/api",
    }),
  });
});
export const { getClient, query, PreloadQuery } = registeredClient;

which just saves it to a variable first and should be absolutely equivalent doesn't fail for me.

I believe you found a bug in Next.js here - could you open an issue with them and link back to this issue so I can follow along please?

[phryneas]

PS: unrelated - but maybe useful: As a neat trick, you can just use the exported query instead of getClient().query - it's a shortcut :)

-import { getClient } from "@/apollo/ApolloRSC";
+import { query } from "@/apollo/ApolloRSC";

const DashboardHome = async () => {
-  const { data } = await getClient().query({ query: testQuery });
+  const { data } = await query({ query: testQuery });

[linucks]

Thanks for the workaround and suggestions Lenz - much appreciated.

I've filed a bug with next: https://github.com/vercel/next.js/issues/68413