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.


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?

Hey guys, i have a similar issue with Nextjs, but my issue comes at using async/await acting as a server, “class extends value undefined is not a constractor or null”. when i add the “use client” it says asyc/await isnt supported in client side. how can i solve this, im stuck

I am using nextjs app router and in a page.tsx, just faced this. The page.tsx component was a client component using “use client”. I was using supabase and used “await supabase …” inside the component which I could not. I had to wrap that awaited supabase call in a async function and then call that function. I did not await that called function. Just did addProduct() and it worked. No more errors.

1 Like

I am having the same issue, using supabase to sign out.

'use server';

import { createClient } from "@/utils/supabase/server";
import { redirect } from 'next/navigation';

const signOut = async () => {
  const supabase = createClient();
  await supabase.auth.signOut();
  return redirect("/login");

export default signOut;

import { createClient } from "@/utils/supabase/server";
import Link from "next/link";
import signOut from "../utils/supabase/signOut";

export default async function AuthButton() {
  const supabase = createClient();

  const {
    data: { user },
  } = await supabase.auth.getUser();

  return user ? (
    <div className="flex items-center gap-4">
      Hey, {}!
      <form action={signOut}>
        <button className="py-2 px-4 rounded-md no-underline bg-btn-background hover:bg-btn-background-hover">
  ) : (
      className="py-2 px-3 flex rounded-md no-underline bg-btn-background hover:bg-btn-background-hover"

"use client";

import { Link, Navbar, NavbarBrand, NavbarContent, NavbarItem } from "@nextui-org/react";
// import Link from "next/link";
import AuthButton from "../components/AuthButton";
import HumblFinanceTitle from "../components/indexpage/HumblFinanceTitle";

export default function IndexPage() {
  return (
    <div className="flex-1 w-full flex flex-col gap-20 items-center">
      <nav className="w-full flex justify-center flex-col gap-20 items-center p-4">
        <p className="bg-clip-text text-transparent bg-gradient-to-r from-purple-400 via-pink-500 to-red-500 font-bold text-inherit pr-3">humblFINANCE</p>
        <NavbarContent className="hidden sm:flex gap-4" justify="center">
          <NavbarItem isActive>
            <Link href="/investing-framework">
              Investing Framework
            <Link href="/features">
            <Link href="/changelog">
            <Link href="/pricing">
          {/* <NavbarItem>
            <Link href="/dashboard">
          </NavbarItem> */}
        <NavbarContent justify="end">
              <AuthButton />  
      <div className="flex-1 w-full flex flex-col gap-10 items-center">
      <HumblFinanceTitle />

I have tried declaring the supabase await in another function but can’t seem to get it to work? Any suggestions on how to fix this?

I fixed it by adding async to my IndexPage()… export default async function IndexPage()

I believe the real problem here was that you marked IndexPage as "use client", which makes that file and all files imported from it “Client files”. A component defined inside a Client File is a Client component, so your AuthButton would become a Client Component - and Client Components cannot be async.