tRPC: 2022년에 API를 구축하는 가장 좋은 방법은?

[원래 게시됨here ]

우리 모두는 API 구축의 번거로움을 알고 있습니다. Express를 설치하거나 대규모 프로젝트를 위해 개발하는 경우 Nest, 아마도 GraphQL을 설치한 다음 모든 것을 직접 만들어야 합니다. 관계형 매핑에서 서버와 클라이언트에 걸친 TypeScript 지원까지. 하지만 이에 대한 올인원 솔루션이 있다고 말하면 어떻게 될까요?

당신이 생각하고 있을지도 모르는 사실이 되기에는 너무 좋습니다. 그렇지 않다는 것을 알려드리고자 이렇게 글을 씁니다.

어쨌든 tRPC는 무엇입니까?

tRPC는 본질적으로 코드를 호출하는 방법일 뿐입니다. API 끝점처럼 생각하지만 tRPC 용어는 procedure 입니다.

“그래서 우리는 이 새로운 도구로 API를 만들 수 있습니다. 무엇이 다른가요?”

tRPC는 절차를 만드는 방법일 뿐만 아니라 훨씬 더 많은 기능을 제공합니다.

⚡️ 빠름 - 코드 생성 또는 런타임 부풀림 없음

🧙‍♂️ Typesafe - DB에서 클라이언트로

✅ 안전 - Zod를 사용한 입력 및 출력 검증

🍃 경량 - tRPC의 deps가 0임(@trpc/[email protected]은 4.9kb gzip 압축됨)

🔋 배터리 포함 - React, Next, Express 및 Fastify에 사용 가능(Nuxt 및 SvelteKit과 함께 사용할 수 있지만 API가 완전하지 않을 수 있음)

⛑ 반응 쿼리 지원 - 모든 쿼리, 변형 및 구독은 반응 쿼리를 사용합니다

그것은 어떻게 비교됩니까?

쉬다

REST의 주의 사항은 표준화가 부족하다는 것입니다. 간단히 말해서 REST는 URL 경로를 엔터티에 매핑한 다음 다른 HTTP 메서드를 노출하여 해당 엔터티를 가져오거나 변경하는 아키텍처 스타일입니다.

이 접근 방식은 대부분의 개발자에게 직관적이지만 서버와 클라이언트에서 표준화가 부족합니다. 양 당사자 사이의 가상의 가려진 선으로 생각하십시오. DX에는 적합하지 않습니다…

GraphQL

반면에 GraphQL은 표준화되었으며 위에서 언급한 정확한 문제를 위해 만들어졌습니다. 서버와 클라이언트 사이의 경계를 제거하고 서버가 응답하려는 정확한 스키마를 제공합니다.

그러나 주의할 점은 GraphQL 구문을 배워야 하고 프로젝트를 설정할 때 많은 오버헤드가 있다는 사실입니다.

일부 코드 살펴보기

절차 정의

우선 스키마를 정의하는 것이 가장 좋습니다. 제 경우에는 REST를 사용하는 PokéAPI 을 쿼리할 것이므로 Zod 을 사용하여 예상되는 응답을 수동으로 정의하겠습니다.

const pokemonSchema = z.object({
  count: z.number(),
  next: z.string().nullish(),
  previous: z.string().nullish(),
  results: z.array(
    z.object({
      name: z.string(),
      url: z.string(),
    })
  ),
});

그런 다음 페이지 매김을 위한 오프셋 입력을 사용하여 포켓몬을 가져오는 절차를 정의할 수 있습니다.

export const pokemonRouter = createRouter().query("findAll", {
  // Create input schema
  input: z.object({
    offset: z.number(),
  }),
  async resolve({ input }) {
    const res = await (
      await fetch(`https://pokeapi.co/api/v2/pokemon?offset=${input.offset}`)
    ).json();

    // Validate the response
    return pokemonSchema.parse(res);
  },
});

위의 예에서 입력 또는 출력 기준이 충족되지 않으면 오류가 발생합니다. 단 30줄의 코드로 모든 작업을 수행할 수 있습니다!

그런 다음 pokemonRouter를 기본 라우터에 연결해야 합니다. 이것은 tRPC 기능createRoute으로도 수행되며 .merge()로 쉽게 추가할 수 있습니다.

import { pokemonRouter } from "./pokemon";

export const appRouter = createRouter()
  .transformer(superjson)
  .merge("pokemon.", pokemonRouter);

export type AppRouter = typeof appRouter;

보시다시피 appRouter 유형을 내보내고 있습니다. TypeScript가 절차를 추론하고 자동 완성을 위해 이를 수행해야 합니다! 아래 줄을 사용하여 코드를 호출하는 후크를 쉽게 만들 수 있습니다(Next 또는 React에서 사용하는 경우에만 필요함).

export const trpc = createReactQueryHooks<AppRouter>();

그런 다음 다음과 같이 구성 요소에서 데이터를 사용할 수 있습니다.

const Home: NextPage = () => {
  // ...

  const { data, refetch } = trpc.useQuery(["pokemon.findAll", { offset }]);

  // ...
};

내 경우에는 페이지 매김을 추가하면서 작동하도록 하는 몇 가지 추가 기능이 있습니다. 대부분이 React Query이므로 여기에 포함하지는 않겠지만 source code here 을 확인해보세요.

생각

전반적으로 저는 tRPC가 계속 유지될 것이라고 굳게 믿습니다. 점점 더 많은 기업이 이 기술을 채택함에 따라 프론트엔드 및 백엔드 프레임워크 전반에 걸쳐 더 강력한 생태계와 더 넓은 지원을 보게 될 것입니다.

한번 해보고 싶다면 그들의 website로 가서 자세한 내용을 확인할 수 있습니다.

이것이 도움이 되었기를 바랍니다 😃