apollographql / apollographql/apollo-client-integrations
useSuspenseQuery with Next.js: RSC Query Variables are Ignored
- 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):
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