NextJS + useSuspenseQuery: async/await is not yet supported in Client Components

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’m using useSuspenseQuery as shown in the Apollo blog post Using Apollo Client with Next.js 13: releasing an official library to support the App Router, except that this is a component on a page rather than the page itself, in case that matters.

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.

Hi Trevor,

That is a very weird error that should definitely not be caused by that line in your code - could you share the repository?

Hi Lenz,

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.

Thanks,
Trevor

If you have to do shenanigans like that to trigger the error, I’m pretty sure you found a bug in Next.js - I’d suggest opening an issue over there.

Also, just to get you into some kind of track here: do you get the same error in a production build? This sounds like it could be a bug in HMR.

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.

Thanks for your help, @lenz!

Happy to help!
And good point about that Suspense boundaries :thinking:
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!

It would be nice if Next added to their error message: “Did you forget to add a Suspense boundary?” :sweat_smile:

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 :confused:

1 Like

i’m also experiencing this bug. it makes absolutely no sense. has a bug report with nextjs been filed?