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

[trevorr]

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.

[lenz]

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?

[trevorr]

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

[lenz]

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.

[trevorr]

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!

[lenz]

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!

[trevorr]

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

[lenz]

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

[zfogg]

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

[Kealeboga_k_Mosate]

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

[Barbie]

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.

[jjfantini]

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, {user.email}!
      <form action={signOut}>
        <button className="py-2 px-4 rounded-md no-underline bg-btn-background hover:bg-btn-background-hover">
          Logout
        </button>
      </form>
    </div>
  ) : (
    <Link
      href="/login"
      className="py-2 px-3 flex rounded-md no-underline bg-btn-background hover:bg-btn-background-hover"
    >
      Login
    </Link>
  );
}

"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">
      <Navbar>
        
        <NavbarBrand>
        <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>
        </NavbarBrand>
          
        <NavbarContent className="hidden sm:flex gap-4" justify="center">
          
          <NavbarItem isActive>
            <Link href="/investing-framework">
              Investing Framework
            </Link>
          </NavbarItem>
            
          <NavbarItem>
            <Link href="/features">
              Features
            </Link>
          </NavbarItem>
            
          <NavbarItem>
            <Link href="/changelog">
              Changelog
            </Link>
          </NavbarItem>
          
          <NavbarItem>
            <Link href="/pricing">
              Pricing
            </Link>
          </NavbarItem>
          
          {/* <NavbarItem>
            <Link href="/dashboard">
              Dashboard
            </Link>
          </NavbarItem> */}
        
        </NavbarContent>
        <NavbarContent justify="end">
            <NavbarItem>
              <AuthButton />  
          </NavbarItem>
        </NavbarContent>
        </Navbar>
      </nav>
      <div className="flex-1 w-full flex flex-col gap-10 items-center">
      <HumblFinanceTitle />
      </div>
    </div>
  );
}

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?

[jjfantini]

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

[lenz]

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.