Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
linucks opened this issue Jul 31, 2024 · 5 comments

Comments

@linucks
Copy link

linucks commented Jul 31, 2024

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
Copy link
Member

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
Copy link
Author

linucks commented Jul 31, 2024

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
Copy link
Member

phryneas commented Aug 1, 2024

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
Copy link
Member

phryneas commented Aug 1, 2024

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
Copy link
Author

linucks commented Aug 1, 2024

Thanks for the workaround and suggestions Lenz - much appreciated.

I've filed a bug with next: vercel/next.js#68413

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants