Next.js Discord

Discord Forum

How can I resolve uncached promise warning when using SWR in client component?

Unanswered
Cape lion posted this in #help-forum
Open in Discord
Cape lionOP
Hi,

I’m using SWR (https://swr.vercel.app) for data fetching in my client component. For some reason, I’m getting this warning in my browser console:

Warning: A component was suspended by an uncached promise. Creating promises inside a Client Component or hook is not yet supported, except via a Suspense-compatible library or framework.

Snippets of the code is like below. In the child component

"use client"
const fetchData = async ([state]: [state: StateType]) => {
 data = await someFunction()
};

export default function ChildComponent() {
    ...
  const { data }: SWRResponse<Type | undefined, any, any> = useSWR(
    [state],
    fetchData,
    {suspense: true}
  );
  ...
}


And in the parent component

"use client";
import dynamic from 'next/dynamic';

const ChildComponent = dynamic(() => import('@/app/ui/dashboard/child-component'), {
  loading: () => <DefaultSkeleton />,
  ssr: false,
});

export default function ParentComponent(){
    ...
    return (
        <>
            <ChildComponent />
        </>
    );
}


How can I resolve the warning?

1 Reply

Cape lionOP
Seems like the issue has been reported before at https://github.com/vercel/next.js/discussions/64814