NextJS error page not shown if query fails and another query succeeds on initial page load

[fdev]

Problem
When a page contains a useSuspenseQuery and that query fails, the nearest error.tsx is rendered. However, when another useSuspenseQuery is in the same page that does succeed, the error page is no longer rendered and the suspense fallback is rendered indefinitely.

How to reproduce
I have set up a CodeSandbox to demonstrate this specific issue.

1. Open the root page.
2. Click on Apollo with working query + broken query.
3. The error page will render.
4. Do a hard reload of the page.
5. Notice the error page doesn't render and the suspense fallback is rendered indefinitely.

Video of issue occurring in CodeSandbox

error.page.mp4

CodeSandbox
https://codesandbox.io/p/sandbox/confident-glade-rg9fzx

[phryneas]

Thank you for the reproduction! I'll see that I look into this!

[phryneas]

Ha, nice, this is already fixed (but not reviewed/merged yet) with #62!
Give it a try:

npm i @apollo/experimental-nextjs-app-support@0.0.0-commit-7dad495

(Note that this is based on version 0.4.0 which relies on @apollo/client@3.8-beta-1 and see the release notes for 0.4.0)

[fdev]

Ha, nice, this is already fixed (but not reviewed/merged yet) with #62!

If only all issues were fixed that easily 😄

npm i @apollo/experimental-nextjs-app-support@0.0.0-commit-7dad495

(Note that this is based on version 0.4.0 which relies on @apollo/client@3.8-beta-1 and see the release notes for 0.4.0)

This PR now relies on @apollo/client in the 3.8 Release Candidate versions instead of the Beta tag.

I used @apollo/client@3.8.0-rc.1 as described in the v0.4.0 release notes, and it now works as expected. Thanks!

[phryneas]

0.4.1 is out so I'll close this :)