Next.js Discord

Discord Forum

incrementalCache missing in unstable_cache

Answered
ImHaGGling posted this in #help-forum
Open in Discord
ImHaGGlingOP
I have a select component with server side data
interface Props {
  value: string
  onChange: (value: string) => void
}

const ForumGroupsSelect = async ({value, onChange}: Props) => {

  const cachedGetForumGroups = unstable_cache(
    async () => getForumGroups(),
    ['forum_groups']
  )

  const groups = await cachedGetForumGroups()

  return (...)

and file with request function

import {API} from "@/api"


interface IGroup {
  id: number,
  prefix: string,
  suffix: string,
  title: string
}

export const getForumGroups = async (): Promise<IGroup[]> => {
  const res = await API.get<IGroup[]>('...')

  return res.data
}

But i have error Error: Invariant: incrementalCache missing in unstable_cache async ()=>(0,_modules_Permissions_http_forum__WEBPACK_IMPORTED_MODULE_3__.getForumGroups)()
Answered by Ray
it need to be used on server
View full answer

16 Replies

ImHaGGlingOP
unstable_cache shouldnt be used in react component
@Ray could you try to define `cachedGetForumGroups` outside of react component?
ImHaGGlingOP
Yes, i try some different solutions, but still have error
and define cachedGetForumGroups in file with request function
and in file with react component
@ImHaGGling Yes, i try some different solutions, but still have error
Ray
could you show the code again?
@Ray could you show the code again?
ImHaGGlingOP
import {cachedGetForumGroups} from "@/modules/Permissions/http/forum"

interface Props {
  value: string
  onChange: (value: string) => void
}

const ForumGroupsSelect = async ({value, onChange}: Props) => {
  // const groups = await getForumGroups()

  const groups = await cachedGetForumGroups()
  return (...)


import {unstable_cache} from "next/cache"

import {API} from "@/api"


interface IGroup {
  id: number,
  prefix: string,
  suffix: string,
  title: string
}

export const getForumGroups = async (): Promise<IGroup[]> => {
  const res = await API.get<IGroup[]>('...')

  return res.data
}

export const cachedGetForumGroups = unstable_cache(
  async () => getForumGroups(),
  ['forum_groups']
)
ImHaGGlingOP
 <Suspense
  fallback={(...)}
 >
   <ForumGroupsSelect value={field.value} onChange={field.onChange}/>
 </Suspense>

yes ForumGroupsSelect in client component
Ray
it need to be used on server
Answer
ImHaGGlingOP
:kms:
Ray
fetch the data on server and pass to client component
ImHaGGlingOP
ohh...
This is impossible...
To do this, I will have to pass props through 10-15 reusable components
Ray
But it is impossible to use server api on client too