tRPC + Nextjs: redirect on next error with new TanStack Query integration

export const withSessionProcedure = t.procedure
  .use(timingMiddleware)
  .use(({ next, ctx: { session, ...rest } }) => {
    if (!session) {
      redirect($path({ route: "/sign-in" }));
    }

    return next({
      ctx: { session, ...rest },
    });
  });

export const api = createCallerFactory(appRouter)(createContext, {
  onError({ error }) {
    // this handled the "redirect" error above
    unstable_rethrow(error);
    throw error;
  },
});

export const createQueryClient = () =>
  new QueryClient({
    defaultOptions: {
      queries: {
        staleTime: 30 * 1000,
      },
      dehydrate: {
        serializeData: SuperJSON.serialize,
        shouldDehydrateQuery: (query) =>
          defaultShouldDehydrateQuery(query) ||
          query.state.status === "pending",
      },
      hydrate: {
        deserializeData: SuperJSON.deserialize,
      },
    },
  });

export const getQueryClient = cache(createQueryClient);

import { getQueryClient, HydrateClient, trpc } from "@/trpc/server";

import { StaffView } from "./view";

export default async function StaffPage() {
  const queryClient = getQueryClient();

  await queryClient.prefetchQuery(trpc.staff.general.list.queryOptions());

  return (
    <HydrateClient>
      <StaffView />
    </HydrateClient>
  );
}