apollographql / apollographql/apollo-client-integrations
`useQuery` runs twice with `skip=true` and `ApolloNextAppProvider`
- Dominant language
- TypeScript
- Stars
- 556
- Forks
- 53
- PR merge metrics
- No merged PRs in 30d
Description
## Version info
```
{
"react": "18.3.1",
"react-dom": "18.3.1",
"next": "15.1.5",
"@apollo/client": "3.10.4",
"@apollo/experimental-nextjs-app-support": "0.11.9"
}
```
## Behavior
`useQuery(QUERY, { skip: true })` causes a re-render after mount of any component leveraging it inside of the `ApolloNextAppProvider`
## Expected behavior
`useQuery(QUERY, { skip: true })` should not cause any additional renders after mount. This matches the behavior it has when running within the standard `ApolloProvider`.
## Consequence
Unable to leverage ApolloClients in the NextJS app directory due to the increased cost of running large chunks of React components twice the expected amount.
## Minimal reproduction
https://codesandbox.io/p/devbox/elegant-snow-x9h97v
`/example` = pages directory route using `ApolloProvider`. Renders once to mount.
`/` = app directory route using `ApolloNextAppProvider`. Renders a second time after mount.
https://github.com/user-attachments/assets/ccae00ac-54fa-49b7-9e07-ccb1b017f323
Contributor guide
No contributing guide indexed for this repository
Research direction
Start with the linked CodeSandbox reproduction, comparing the `/example` pages-directory route using `ApolloProvider` with the `/` app-directory route using `ApolloNextAppProvider`. Trace the `useQuery(QUERY, { skip: true })` behavior after mount; done means the app-directory route no longer performs the additional render and matches the standard provider’s behavior.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- nextjs, react, typescript
- Domain
- frontend, web-dev
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 42/100