apollographql / apollographql/apollo-client-integrations

useSuspenseQuery with Next.js: RSC Query Variables are Ignored

Open
#551 2 comments 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
556
Forks
53
PR merge metrics
No merged PRs in 30d

Description

I'm using the `useSuspenseQuery` method to hydrate my RSC query client side. In my server component, I pass the variable `limit: 5` to the query:

```

```

In the client component, I pass the variable `limit: 10` (this is just for example purposes):

```
const { data, error } = useSuspenseQuery(GET_RECIPE_ENTRIES, {
variables: {
limit: 10
}
});
```

**What I expect to happen:**

If the page is loaded with javascript disabled, 5 items will be returned.

If the page is loaded with javascript enabled, 5 items will load initially then hydrate to 10 items.

**What actually happens:**

10 items are loaded whether javascript is enabled or disabled. Further, when javascript is *enabled*, Apollo developer tools shows `limit: 5` in the query panel (It eventually updates to 10 after 30 seconds):

Image

 
If the client query variables are the ultimate source of truth, then why pass variables to the server component query at all?

Here's a [codesandbox](https://codesandbox.io/p/devbox/apollo-client-fetchmore-networkstatus-demo-jz3cmh) with the full setup.

Contributor guide

No contributing guide indexed for this repository

Research direction

Start with the linked CodeSandbox and reproduce the server/client snippets using PreloadQuery and useSuspenseQuery with JavaScript disabled and enabled. Trace the Next.js App Router RSC hydration path and compare the variables used in each mode; done means the observed item counts and variable transitions match the documented expectations.

Written by the indexing model from the issue text.

Assessment

Tech stack
graphql, next.js, typescript
Domain
frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
52/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.