How can I resolve uncached promise warning when using SWR in client component?
Unanswered
Cape lion posted this in #help-forum
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:
Snippets of the code is like below. In the child component
And in the parent component
How can I resolve the warning?
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