I'm currently using unstable_cache to cache data collected from prisma and populate a client component. I'm trying to "refetch" the original data fetched on server-side, via the client-side. Am I doing this correctly? If I "revalidate" again, then solution works as intended. Any advice greatly appreciated.

page.tsx: (server side)

export const dynamic = 'force-dynamic';

import {
  GetBuildProjectsParams,
  GetBuildProjectsResponse,
  SortOrder,
} from 'app/api/types';
import BuildFilesPage from 'app/[lng]/build-files/_components/BuildFilesPage';
import { getCachedBuildProjects } from 'app/utils/getBuildProjects';

const initialParams: GetBuildProjectsParams = {
  pageNumber: 1,
  pageSize: 25,
};

const Page = async ({ searchParams, params: { lng } }: PageProps) => {
  const params: GetBuildProjectsParams = {
    pageNumber: parseInt(searchParams.pageNumber)  initialParams.pageNumber,
    pageSize: parseInt(searchParams.pageSize)  initialParams.pageSize,
  };

  const buildProjects: GetBuildProjectsResponse =
    await getCachedBuildProjects(params);

  return <BuildFilesPage {...{ buildProjects, params, lng }} />;
};

export default Page;

getCachedBuildProject.ts looks like this:

export const getCachedBuildProjects = async (
  params: GetBuildProjectsParams,
) => {
  const cacheKey = 'buildProjects';

  const cachedBuildProjects = unstable_cache(
    async (params: GetBuildProjectsParams) => getBuildProjects(params),
    [cacheKey],
    { tags: [cacheKey] },
  );
  const buildProjects = await cachedBuildProjects(params);
  return buildProjects;
};

getBuildProjects.ts returns the prisma result.

Within BuildFilesPage.ts (client component) we have a function that forces the revalidation:

  const onRefetchProjects = useCallback(() => {
    revalidateBuildProjects();
    setFetchDate(new Date());
  }, []);

which calls my actions.ts

'use server';

export const revalidateBuildProjects = () => {
  revalidateTag('buildProjects');
};