RPC.io - 엔드 투 엔드 유형 보안 API 구축을 위한 키트🧙‍♂️

저는 알렉스나 GitHub의 "KATT"입니다. tRPC라는 도서관을 알려드리고 싶습니다.나는 아직 이 방면에 관한 어떤 문장도 발표한 적이 없기 때문에, 내가 이 소개문을 쓴 것은 단지 모두를 즐겁게 하기 위해서이다. (그러나 우리는 이미 왠지 모르게 >530에 이르렀다)🌟 GitHub에서).글과 영상 소개를 기대합니다!최신 상황을 알고 싶거나 물어보고 싶으면 트위터에서 저를 팔로우해 주세요.
간단히 말해서 tRPC는 (노드) 서버에서 클라이언트까지의 모든 종류의 안전성을 제공하며, 심지어는 형식을 설명할 필요가 없다.백엔드에서, 함수에서만 데이터를 되돌려주고, 백엔드에서, 노드 이름에 따라 상술한 데이터를 사용합니다.
이것은 tRPC 엔드포인트 및 클라이언트 호출을 수행할 때의 모습입니다.

React(@trpc/react)를 위한 라이브러리를 만들었습니다. 위대한 React 조회 위에 있지만 클라이언트 라이브러리(@trpc/client)는 React가 없는 상황에서 작업합니다(특정한 Svelte/Vue/Angular/[...]lib, 손 좀 내밀어 주세요!)
코드 생성과 관련이 없습니다. 기존 다음 코드에 쉽게 추가할 수 있습니다.js/CRA/Express 프로젝트

예.

다음은 hello라는 tRPC 프로세스(또는 단점)의 예로 string 파라미터를 받아들인다.(zod를 사용하여 데이터 검증을 하고 Colin에 의해 만들어졌으며 tRPC의 초기 개념 검증도 개발했다)

const appRouter = trpc.router().query('hello', {
  input: z.string().optional(),
  resolve: ({ input }) => {
    return {
      text: `hello ${input ?? 'world'}`,
    };
  },
});

export type AppRouter = typeof appRouter;

다음은 위의 데이터를 사용하는 보안 클라이언트 유형입니다.

import type { AppRouter } from './server';

async function main() {
  const client = createTRPCClient<AppRouter>({
    url: `http://localhost:2022`,
  });

  const result = await client.query('hello', '@alexdotjs');
  console.log(result); // --> { text: "hello @alexdotjs" }
}

main();

이것이 바로 당신이 필요로 하는 유형의 안전입니다!result는 백엔드가 함수에서 되돌아오는 내용에 따라 추정된 유형이다.입력한 데이터도 검증기의 반환에서 추정할 수 있기 때문에 데이터를 직접 사용하는 것은 안전합니다. 실제로는 검증기를 통해 입력 데이터를 전달해야 합니다. (tRPC는zod/yup/custom 검증기와 함께 상자를 열면 됩니다.)
여기에 코드샌드박스 링크가 있습니다. 위의 예시를 사용할 수 있습니다: https://githubbox.com/trpc/trpc/tree/main/examples/standalone-server (미리 보기 대신 터미널 출력을 보십시오!)

워터?코드를 백엔드에서 클라이언트로 가져오는 중입니까? -아니, 너는 사실 아니야.

이렇게 보여도 서버에서 클라이언트로 코드가 공유되지 않는다.타자 원고import type"[...]유형 주석 및 선언에 대한 선언만 가져옵니다.그것은 항상 완전히 지워져서 운행할 때 아무런 잔류도 없다."- TypeScript 3.8-see TypeScript docs에 추가된 기능입니다.
코드 생성이 필요하지 않습니다. 서버에서 클라이언트로 유형을 공유할 수 있는 방법이 있다면, 현재 응용 프로그램에 적용할 수 있습니다.

그런데 우리 이제 시작이야!

앞서 언급한 바와 같이 React 라이브러리에는 다음과 같은 데이터를 React에서 사용하는 방법이 있습니다.

const { data } = trpc.useQuery(['hello', '@alexdotjs' ])

.. 클라이언트에서 유형 보안 데이터를 가져옵니다.
현재, tRPC를 기존brownfield 프로젝트에 추가할 수 있습니다. (Express/Next.js에 사용되는 어댑터를 얻었습니다.) 이것은 CRA와 함께 사용할 수도 있고, React Native와 함께 사용할 수도 있습니다.그것은 심지어 반응과는 무관하기 때문에 날씬하거나 Vue lib을 하고 싶으면 저에게 연락 주세요.

변이 데이터는?

돌연변이는 조회와 마찬가지로 간단하다. 실제로는 같지만, 서로 다른 문법 설탕으로 공개되고, GET 요청이 아닌 HTTP POST를 생성한다.
다음은 데이터베이스를 사용하는 더 복잡한 예입니다. 저희가 TodoMVC에 있는 TodoMVC 예에서 얻은 것입니다.trpc.io/https://github.com/trpc/trpc/tree/main/examples/next-prisma-todomvc

const todoRouter = createRouter()
  .mutation('add', {
    input: z.object({
      id: z.string().uuid(),
      data: z.object({
        completed: z.boolean().optional(),
        text: z.string().min(1).optional(),
      }),
    }),
    async resolve({ ctx, input }) {
      const { id, data } = input;
      const todo = await ctx.task.update({
        where: { id },
        data,
      });
      return todo;
    },
  })

React 사용법은 다음과 같습니다.

const addTask = trpc.useMutation('todos.add');

return (
  <>
    <input
      placeholder="What needs to be done?"
      onKeyDown={(e) => {
        const text = e.currentTarget.value.trim();
        if (e.key === 'Enter' && text) {
          addTask.mutate({ text });
          e.currentTarget.value = '';
        }
      }}
    />
  </>
)

이제 끝.

어쨌든, 내가 말한 바와 같이, 나는 단지 공을 굴리게 하고 싶었을 뿐이다.그리고 많은 일들이 있다.

해석 프로그램에 주입된 사용자 특정 데이터의 전송 요청에 대한 상하문 만들기 - link

공유기 중간부품 지원 - link

라우터 병합link - link

어댑터@trpc/next를 사용하여 React land에서 본 가장 간단한 서버 렌더링

유형 보안 오류 포맷 - link

데이터 변환기(온라인 도로에서 사용된 날짜/지도/설정 대상)-link

React 쿼리 도움말

시작하고 싶으면 Getting Started for Next.js에 몇 가지 예가 있다.