apollographql / apollographql/apollo-client-integrations

`useQuery` runs twice with `skip=true` and `ApolloNextAppProvider`

Open
#437 8 comments 0 reactions 0 assignees View on GitHub
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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.