apollographql / apollographql/apollo-client-integrations
SSR/RSC Rendering Behaviour
- Dominant language
- TypeScript
- Stars
- 556
- Forks
- 53
- PR merge metrics
- No merged PRs in 30d
Description
So I have been unable to work around an issue I am having using a server side query along with some suspense queries and how they are being rendered. This is how things are currently setup:
`layout.tsx`
```
export const dynamic = 'force-dynamic'
export default async function OrderOnlineLayout({ children }: React.PropsWithChildren) {
const { data } = await query({
query: BusinessOpenDocument,
variables: {
ids: [env.NEXT_PUBLIC_BUSINESS_ID],
open: true
},
fetchPolicy: 'network-only',
notifyOnNetworkStatusChange: true,
context: {
noCache: true
}
})
if (data && data.businesses.length <= 0) return
return children
}
```
`page.tsx`
```
export default async function OrderOnlinePage({ searchParams }: PageProps) {
const product = parseAsString.parseServerSide(searchParams.pid)
const type = parseAsStringEnum(Object.values(OrderType)).parseServerSide(searchParams.type)
return (
}>
)
}
```
The issue that is happening is that when either directly going to the page, or navigating to the page from another for the first time, the conditional `OrderOnlineUnavailable` component is being rendered, followed by the suspense fallback, followed by the `OrderOnlineUnavailable` component again with the correct content.
I want / it should render directly into the LoadingIndicator by either the `loading.tsx` file however the awaited query doesnt seem to be being awaited at all.
In addition to that, if I load this page initially, then navigate to another page and come back, the query does not get run again even though the cache is set to `cache: 'no-store'` and the query `fetchPolicy` is set to `network-only`. I am only able to get the function to run again when reloading the page entirely.
Not sure if you have any insights here as far as either of these issues.
Contributor guide
No contributing guide indexed for this repository
Research direction
Start with the awaited query in layout.tsx, then compare the Suspense boundary in page.tsx with the loading.tsx behavior during direct loads and client navigation. Reproduce both the duplicate OrderOnlineUnavailable rendering and the missing query rerun, and verify that loading displays first and navigation executes the query again.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- graphql, next.js, react, typescript
- Domain
- frontend, web-dev
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100