apollographql / apollographql/apollo-client-integrations
Unhandled Runtime Error getClient)(...).query is not a function when upgrading from Next.js 14.1.0 to 14.1.1
- Dominant language
- TypeScript
- Stars
- 556
- Forks
- 53
- PR merge metrics
- No merged PRs in 30d
Description
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 { HttpLink } from "@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 ()
23 | // } = useUser();
24 |
> 25 | const { data } = await getClient().query({ query: getUserQuery });
| ^
26 | const user = data.viewer;
27 |
28 | if (!user) {
```
Contributor guide
No contributing guide indexed for this repository
Research direction
Start by reproducing the failure in app/dashboard/page.tsx with Next.js 14.1.0 and 14.1.1, using the versions and registerApolloClient setup from the report. Read the integration README and trace getClient() to determine why its result no longer exposes query; done means the reported query call works on Next.js 14.1.1 without the runtime error.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- next.js, typescript
- Domain
- backend, web-dev
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 30/100