Vilian•6h ago

Nextjs 16 use cache

Nextjs 16 introduced the 'use cache' directive and i'm trying to use it with trpc. I tried making use of it, but i'm getting an error

1 Reply

VilianOP•6h ago

My setup is very simple. I have a trpc procedure that does the following:

  header: publicProcedure.query(async ({ ctx }) => {
    const cmsData = await ctx.cms.getJSON<HeaderProps>(
      "/component/menus/header"
    );

    const { error, data } = await headerPropsSchema.safeParseAsync(cmsData);
    if (error) {
      throw new TRPCError({
        code: "PARSE_ERROR",
        message: "Failed to parse header data",
        cause: error,
      });
    }

    return data;
  }),

  header: publicProcedure.query(async ({ ctx }) => {
    const cmsData = await ctx.cms.getJSON<HeaderProps>(
      "/component/menus/header"
    );

    const { error, data } = await headerPropsSchema.safeParseAsync(cmsData);
    if (error) {
      throw new TRPCError({
        code: "PARSE_ERROR",
        message: "Failed to parse header data",
        cause: error,
      });
    }

    return data;
  }),

And i'm simply calling it like this

import DefaultHeader from "@frontend/components/menus/header";
import { HeaderSkeleton } from "@frontend/components/menus/header/HeaderSkeleton";
import { api } from "@frontend/trpc/server";
import { Suspense } from "react";

async function HeaderComponent() {
  "use cache";

  const headerData = await api.menus.header();

  return <DefaultHeader {...headerData} />;
}

export function Header() {
  return (
    <Suspense fallback={<HeaderSkeleton />}>
      <HeaderComponent />
    </Suspense>
  );
}

import DefaultHeader from "@frontend/components/menus/header";
import { HeaderSkeleton } from "@frontend/components/menus/header/HeaderSkeleton";
import { api } from "@frontend/trpc/server";
import { Suspense } from "react";

async function HeaderComponent() {
  "use cache";

  const headerData = await api.menus.header();

  return <DefaultHeader {...headerData} />;
}

export function Header() {
  return (
    <Suspense fallback={<HeaderSkeleton />}>
      <HeaderComponent />
    </Suspense>
  );
}

I'm using the theo's startup and have the following createContext

const createContext = cache(async () => {
  const heads = new Headers(await headers());
  heads.set("x-trpc-source", "rsc");

  return createTRPCContext({
    headers: heads,
  });
});

const createContext = cache(async () => {
  const heads = new Headers(await headers());
  heads.set("x-trpc-source", "rsc");

  return createTRPCContext({
    headers: heads,
  });
});

Nextjs 16 use cache

Did you find this page helpful?