tRPC에 대한 유형 안전 가이드

이것은 tRPC를 사용하는 가장 좋은 가이드는 아닙니다. 아마도 create-t3-app 과 같이 내가 찾을 수 있는 최선의 방법이 있을 것입니다.

여기에 있는 내용의 대부분은 tRPC's documentation에서 가져온 것이므로 매우 유용하고 읽기 쉬운 참조할 수 있습니다.

tRPC란?
tRPC는 말하자면 스키마나 어떤 종류의 코드 생성 없이도 유형이 안전한 API를 쉽게 만들 수 있게 해주는 유형 스크립트 라이브러리입니다.

어디에서 사용합니까?
형식화된 서버를 만든 다음 해당 형식을 가져와서 클라이언트 측에서 어댑터와 함께 사용합니다.

유형 안전성을 어떻게 구현합니까?
tRPC는 입력 및 출력 인수의 유형 유효성 검사를 위한 라이브러리인 zod 사용을 권장합니다.

tRPC는 React에만 제한됩니까?
tRPC의 핵심 API는 모든 클라이언트와 작동하도록 구축되었지만 현재 React를 지원하고 NextJS 또는 SolidJS와 같은 React Meta Framework와 함께 사용할 수 있습니다. 데이터 파이프라인 또는 데이터 흐름.

현재로서는 React, NextJS, Express, Fastify, SolidJS 및 tRPC for SveleteKit과 같은 일부 커뮤니티 패키지용 자사 어댑터가 있습니다.

그 기능은 무엇입니까?

경량, 강력한 라이브러리에 대한 작은 번들 크기.

형식이 최대한 안전합니다!

websockets 라이브러리로 구독을 지원합니다.

일괄 처리 요청

요청을 동시에 수행한 다음 하나로 묶을 수 있습니다.

강력한 사용자 기반 및 유용한 커뮤니티

tRPC x NextJS

권장 파일 구조:

.
├── prisma # <-- if prisma is added
│   └── [..]
├── src
│   ├── pages
│   │   ├── _app.tsx # <-- add `withTRPC()`-HOC here
│   │   ├── api
│   │   │   └── trpc
│   │   │       └── [trpc].ts # <-- tRPC HTTP handler
│   │   └── [..]
│   ├── server # <-- can be named backend or anything else
│   │   ├── routers
│   │   │   ├── app.ts   # <-- main app router
│   │   │   ├── post.ts  # <-- sub routers
│   │   │   └── [..]
│   │   ├── context.ts      # <-- create app context
│   │   └── createRouter.ts # <-- router helper
│   └── utils
│       └── trpc.ts  # <-- your typesafe tRPC hooks
└── [..]

구성품

라우터

이것은 실제 비즈니스 로직이 상주할 라우터입니다. backend 디렉토리 안에 src 폴더를 만들고 이 모든 것을 거기에 넣습니다.

그렇지 않으면 prisma를 사용하는 경우 이것은 선택 사항입니다.src/server/utils/prisma.ts

import { PrismaClient } from "@prisma/client";

declare global {
    var prisma: PrismaClient | undefined;
};

export const prisma = global.prisma || new PrismaClient({
    log: ["query"]
});

if (process.env.NODE_ENV != 'production') global.prisma = prisma;

src/server/router/context.ts

import * as trpc from "@trpc/server";
import * as trpcNext from "@trpc/server/adapters/next";
import { prisma } from "@/server/utils/prisma"; // this is optional

export const createContext = async (
    options?: trpcNext.CreateNextContextOptions
) => {
    const req = options?.req;
    const res = options?.res;

    return {
        req,
        res,
        prisma, // this is optional
    };
};

type Context = trpc.inferAsyncReturnType<typeof createContext>;

export const createRouter = () => trpc.router<Context>();

Using Contexts

We can create router without using the above context by just using trpc.router() that will work just fine. But if you are using some external API like in the above case we are using prisma, it's better to use pass in repeatedly used instances to context to avoid having multiple ones for every query we use that in, that may affect our performance and can also be vulnerable.

src/server/router/index.ts

import {createRouter} from "./contex";
import {exampleRouter} from "./example.router";

export const appRouter = createRouter()
    .merge("example.", exampleRouter)
    .query("posts.count", {
        async resolve({ctx}) {
            return await ctx.prisma.patient.count();
        }
    });

export type AppRouter = typeof appRouter;

API 핸들러 일명 NextJS 어댑터:

The exact filename is necessary to make this work!

src/pages/api/trpc/[trpc].ts

import * as trpcNext from "@trpc/server/adapters/next";
import { appRouter, AppRouter } from "@/backend/router";
import { inferProcedureOutput } from "@trpc/server";
import { createContext } from "@/backend/router/context";

// export API handler
export default trpcNext.createNextApiHandler({
  router: appRouter,
  createContext: createContext,
});

후크
이들은 유형 안전성을 유지하는 데 필요한 React 후크이며 API를 가져오기 위한 후크와 같은 반응 쿼리를 제공합니다.
src/utils/trpc.ts

import { createReactQueryHooks } from "@trpc/react";
import type { AppRouter } from "@/backend/router";
import { inferProcedureOutput } from "@trpc/server";

export const trpc = createReactQueryHooks<AppRouter>();

export type TQuery = keyof AppRouter["_def"]["queries"];

// helper type to infer query output
export type InferQueryOutput<TRouteKey extends TQuery> = inferProcedureOutput<
  AppRouter["_def"]["queries"][TRouteKey]
>;

React Component의 예제 쿼리
이제 tRPC가 설정되었으므로 반응 구성 요소 내부에서 사용하는 방법입니다.
src/pages/index.tsx

// we use the instance we created that has our router type definitions
import { trpc } from "@/utils/trpc";

export default SomePage() {
    const { isLoading, data:postsCount } = trpc.useQuery(["posts.count"]);
    return <div>...</div>
}

SSG 도우미

SSG Helper는 로딩 시간을 줄이기 위해 요청 시 서버에서 쿼리를 미리 가져오는 데 사용할 수 있는 도우미 기능입니다.

SSR 및 SSG 또는 ISR과 함께 작업할 때 사용됩니다.

NextJS 페이지의 getServideSideProps 기능과 함께 사용하는 방법입니다.

// /pages/posts/[id].tsx
export function getServerSideProps(
    context: GetServerSidePropsContext<{id: string}>
) {
    const { id } = context.params;

    const ssg = createSSGHelpers({
        router: appRouter,
        ctx: await createContext(), // { } if no context in your router
        transformer: superjson
    });

    ssg.fetchQuery("posts.get", {id});

    return {
        props: {
            trpcState: ssg.dehydrate(),
            id
        }
    }
}

export default function PostPage(props: InferGetServerSidePropsType<typeof getServerSideProps>) {
    const {id} = props;

    // this query will be fetched instantly because of the cached
    // response of the query we fetching on server
    const {isLoading, data} = trpc.useQuery(["posts.get"], {id})

    return ...
}

참조

tRPC 대 GraphQL과 그 위험에 대한 놀라운 이야기를 확인하십시오.

YouTube 또는 기타 소셜 미디어 플랫폼에서 Theo를 확인하십시오. 그는 tRPC

에 대한 많은 콘텐츠를 가지고 있습니다.

tRPC의 창시자인 Katt를 팔로우합니다.