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

**URL:** <https://community.apollographql.com/t/nextjs-usesuspensequery-async-await-is-not-yet-supported-in-client-components/6745>\
**Category:** Client SDKs\
**Tags:** client\
**Created:** [September 21, 2023, 3:08am UTC](https://community.apollographql.com/t/nextjs-usesuspensequery-async-await-is-not-yet-supported-in-client-components/6745 "2023-09-21T03:08:26Z")\
**Posts on this page:** 15\
**Page:** 1

<div class="post-metadata">

**Author:** ![trevorr](https://sea1.discourse-cdn.com/flex019/user_avatar/community.apollographql.com/trevorr/32/4593_2.png) [@trevorr](https://community.apollographql.com/u/trevorr)\
**Post date:** [September 21, 2023, 3:08am UTC](https://community.apollographql.com/t/nextjs-usesuspensequery-async-await-is-not-yet-supported-in-client-components/6745/1 "2023-09-21T03:08:26Z")

</div>

I just created a test project with [`apollo-client-nextjs`](https://github.com/apollographql/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.

 ![Screenshot 2023-09-20 at 10.00.13 PM](https://us1.discourse-cdn.com/flex019/uploads/apollographql/original/2X/2/29eb31147371d9e9bf793508b4531accb468d0f1.png)

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](https://www.apollographql.com/blog/announcement/frontend/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.

---

<div class="post-metadata">

**Author:** ![lenz](https://sea1.discourse-cdn.com/flex019/user_avatar/community.apollographql.com/lenz/32/4007_2.png) [@lenz](https://community.apollographql.com/u/lenz)\
**Post date:** [September 21, 2023, 10:26am UTC](https://community.apollographql.com/t/nextjs-usesuspensequery-async-await-is-not-yet-supported-in-client-components/6745/2 "2023-09-21T10:26:59Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![trevorr](https://sea1.discourse-cdn.com/flex019/user_avatar/community.apollographql.com/trevorr/32/4593_2.png) [@trevorr](https://community.apollographql.com/u/trevorr)\
**Post date:** [September 21, 2023, 3:59pm UTC](https://community.apollographql.com/t/nextjs-usesuspensequery-async-await-is-not-yet-supported-in-client-components/6745/3 "2023-09-21T15:59:35Z")

</div>

Hi Lenz,

The repository is [here](https://github.com/FITT-Finder-Inc/fitness-finder). 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

---

<div class="post-metadata">

**Author:** ![lenz](https://sea1.discourse-cdn.com/flex019/user_avatar/community.apollographql.com/lenz/32/4007_2.png) [@lenz](https://community.apollographql.com/u/lenz)\
**Post date:** [September 22, 2023, 7:50am UTC](https://community.apollographql.com/t/nextjs-usesuspensequery-async-await-is-not-yet-supported-in-client-components/6745/4 "2023-09-22T07:50:42Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![trevorr](https://sea1.discourse-cdn.com/flex019/user_avatar/community.apollographql.com/trevorr/32/4593_2.png) [@trevorr](https://community.apollographql.com/u/trevorr)\
**Post date:** [September 22, 2023, 5:22pm UTC](https://community.apollographql.com/t/nextjs-usesuspensequery-async-await-is-not-yet-supported-in-client-components/6745/5 "2023-09-22T17:22:14Z")

</div>

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](https://stackoverflow.com/a/77101793/123336) 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](https://www.apollographql.com/blog/apollo-client/next-js/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!

---

<div class="post-metadata">

**Author:** ![lenz](https://sea1.discourse-cdn.com/flex019/user_avatar/community.apollographql.com/lenz/32/4007_2.png) [@lenz](https://community.apollographql.com/u/lenz)\
**Post date:** [September 26, 2023, 5:04pm UTC](https://community.apollographql.com/t/nextjs-usesuspensequery-async-await-is-not-yet-supported-in-client-components/6745/6 "2023-09-26T17:04:40Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![trevorr](https://sea1.discourse-cdn.com/flex019/user_avatar/community.apollographql.com/trevorr/32/4593_2.png) [@trevorr](https://community.apollographql.com/u/trevorr)\
**Post date:** [September 26, 2023, 6:29pm UTC](https://community.apollographql.com/t/nextjs-usesuspensequery-async-await-is-not-yet-supported-in-client-components/6745/7 "2023-09-26T18:29:43Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![lenz](https://sea1.discourse-cdn.com/flex019/user_avatar/community.apollographql.com/lenz/32/4007_2.png) [@lenz](https://community.apollographql.com/u/lenz)\
**Post date:** [September 27, 2023, 10:12am UTC](https://community.apollographql.com/t/nextjs-usesuspensequery-async-await-is-not-yet-supported-in-client-components/6745/8 "2023-09-27T10:12:32Z")

</div>

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 😕

---

<div class="post-metadata">

**Author:** ![zfogg](https://sea1.discourse-cdn.com/flex019/user_avatar/community.apollographql.com/zfogg/32/4632_2.png) [@zfogg](https://community.apollographql.com/u/zfogg)\
**Post date:** [September 29, 2023, 6:12pm UTC](https://community.apollographql.com/t/nextjs-usesuspensequery-async-await-is-not-yet-supported-in-client-components/6745/9 "2023-09-29T18:12:07Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Kealeboga\_k\_Mosate](https://sea1.discourse-cdn.com/flex019/user_avatar/community.apollographql.com/kealeboga_k_mosate/32/4832_2.png) [@Kealeboga\_k\_Mosate](https://community.apollographql.com/u/Kealeboga_k_Mosate)\
**Post date:** [December 29, 2023, 4:59pm UTC](https://community.apollographql.com/t/nextjs-usesuspensequery-async-await-is-not-yet-supported-in-client-components/6745/10 "2023-12-29T16:59:08Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Barbie](https://sea1.discourse-cdn.com/flex019/user_avatar/community.apollographql.com/barbie/32/4927_2.png) [@Barbie](https://community.apollographql.com/u/Barbie)\
**Post date:** [February 25, 2024, 11:04pm UTC](https://community.apollographql.com/t/nextjs-usesuspensequery-async-await-is-not-yet-supported-in-client-components/6745/11 "2024-02-25T23:04:28Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![jjfantini](https://sea1.discourse-cdn.com/flex019/user_avatar/community.apollographql.com/jjfantini/32/5011_2.png) [@jjfantini](https://community.apollographql.com/u/jjfantini)\
**Post date:** [April 10, 2024, 12:22pm UTC](https://community.apollographql.com/t/nextjs-usesuspensequery-async-await-is-not-yet-supported-in-client-components/6745/12 "2024-04-10T12:22:25Z")

</div>

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

```auto
'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;

```

```auto
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>
  );
}

```

```auto
"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?

---

<div class="post-metadata">

**Author:** ![jjfantini](https://sea1.discourse-cdn.com/flex019/user_avatar/community.apollographql.com/jjfantini/32/5011_2.png) [@jjfantini](https://community.apollographql.com/u/jjfantini)\
**Post date:** [April 10, 2024, 12:38pm UTC](https://community.apollographql.com/t/nextjs-usesuspensequery-async-await-is-not-yet-supported-in-client-components/6745/13 "2024-04-10T12:38:19Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![lenz](https://sea1.discourse-cdn.com/flex019/user_avatar/community.apollographql.com/lenz/32/4007_2.png) [@lenz](https://community.apollographql.com/u/lenz)\
**Post date:** [April 11, 2024, 9:05am UTC](https://community.apollographql.com/t/nextjs-usesuspensequery-async-await-is-not-yet-supported-in-client-components/6745/14 "2024-04-11T09:05:35Z")

</div>

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`.

---

<div class="post-metadata">

**Author:** ![Justin\_Gonzalez](https://sea1.discourse-cdn.com/flex019/user_avatar/community.apollographql.com/justin_gonzalez/32/5359_2.png) [@Justin\_Gonzalez](https://community.apollographql.com/u/Justin_Gonzalez)\
**Post date:** [February 6, 2025, 8:47pm UTC](https://community.apollographql.com/t/nextjs-usesuspensequery-async-await-is-not-yet-supported-in-client-components/6745/15 "2025-02-06T20:47:49Z")

</div>