I just created a test project with apollo-client-nextjs and the latest versions of Apollo Client and NextJS. When trying to use useSuspenseQuery, I intermittently get the following error:
Unhandled Runtime Error
Error: async/await is not yet supported in Client Components, only Server Components. This error is often caused by accidentally adding 'use client' to a module that was originally written for the server.
I’ve tried importing useSuspenseQuery from both @apollo/client and @apollo/experimental-nextjs-app-support/ssr, but get the same error. Generally, the page renders as expected, then switches to the error page.
The repository is here. It’s a full stack example app, so the README should make it pretty easy to get running. The issue is on the main page (localhost:8080), though it can be intermittent. It seems to happen consistently if you click the Search button, and then the browser Back button.
You made a good point that I needed to try this with a production build. When I did, I immediately got “Minified React error #482”. I still don’t know what error 482 is, but I found this SO answer pointing out that you need to use the Suspense component to create a suspense boundary. Adding that fixes the issues in both dev and production builds.
Clearly this is my first time playing with React 18 suspense. None of the Apollo blogs I looked at (such as How to use Apollo Client with Next.js 13) mentioned the Suspense component, though it is used in the linked example repositories.
Happy to help!
And good point about that Suspense boundaries
I’m not sure yet where we can best document those (as there is a lot of consideration required as to where put those, and that is at that point far outside the scope of Apollo Client), but I’ll try to think about it!
Agreed. This is really one of the worse React error messages. On the other hand, if you use Next, you run a semi-experimental build of React, so you can’t expect a lot less unfortunately
