Theo's Typesafe Cult•2d ago

question about the "taint" section of the "From 0 to Production" tutorial

Theo described how its important to do your server calls away from components in a file marked with server only. Im following the tutorial but using trpc too, in the setup it seems like the server only functionality is already setup when the cli made the project, because i can see "server-only" imported in the server.ts file and i believe the context is being made here so i shouldnt have to also import it in the file holding my query? But i just wanted to make sure i dont have to also include this in the router file. Relevant code: trpc/server.ts

import "server-only";

import { createHydrationHelpers } from "@trpc/react-query/rsc";
import { headers } from "next/headers";
import { cache } from "react";

import { createCaller, type AppRouter } from "@/server/api/root";
import { createTRPCContext } from "@/server/api/trpc";
import { createQueryClient } from "./query-client";

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

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

const getQueryClient = cache(createQueryClient);
const caller = createCaller(createContext);

export const { trpc: api, HydrateClient } = createHydrationHelpers<AppRouter>(
  caller,
  getQueryClient
);

import "server-only";

import { createHydrationHelpers } from "@trpc/react-query/rsc";
import { headers } from "next/headers";
import { cache } from "react";

import { createCaller, type AppRouter } from "@/server/api/root";
import { createTRPCContext } from "@/server/api/trpc";
import { createQueryClient } from "./query-client";

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

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

const getQueryClient = cache(createQueryClient);
const caller = createCaller(createContext);

export const { trpc: api, HydrateClient } = createHydrationHelpers<AppRouter>(
  caller,
  getQueryClient
);

server/api/routers/image.ts

import { z } from "zod";
import { createTRPCRouter, publicProcedure } from "@/server/api/trpc";
import { auth } from "@clerk/nextjs/server";


export const imageRouter = createTRPCRouter({

    getImages: publicProcedure.query(async ({ ctx }) => {

        const user = await auth();

        const userId = user.userId as string;

        if (!userId) return null;

        const images = await ctx.db.image.findMany({ 
            where: {
                userId: {
                    equals: userId
                } 
            }
        });

      return images ?? null;
    }),
})

import { z } from "zod";
import { createTRPCRouter, publicProcedure } from "@/server/api/trpc";
import { auth } from "@clerk/nextjs/server";


export const imageRouter = createTRPCRouter({

    getImages: publicProcedure.query(async ({ ctx }) => {

        const user = await auth();

        const userId = user.userId as string;

        if (!userId) return null;

        const images = await ctx.db.image.findMany({ 
            where: {
                userId: {
                    equals: userId
                } 
            }
        });

      return images ?? null;
    }),
})

0 Replies

No replies yetBe the first to reply to this messageJoin

Gaming

Programming

question about the "taint" section of the "From 0 to Production" tutorial