مدتی است که متوجه فناوری به نام tRPC شده ام که در بسیاری از پشته های فناوری مدرن از جمله T3 ذکر شده است. اما نمی دانستم چیست و چرا اینقدر محبوب شده است.

پس شروع به تحقیق و یادگیری در مورد آن کردم. نمیدونستم منظورش چیه یا هدفش چیه. پس ، من عمیق‌تر در RPC ، gRPC و سایر فناوری‌ها جستجو کردم تا بفهمم.

من متوجه شدم که tRPC یک سبک معماری ایمن برای طراحی API است. اما این تعریف تنها نوک کوه یخ است.

در این مقاله، من می خواهم عمیق تر به ریشه های این کوه یخ بروم و بفهمم tRPC چیست. این مقاله توضیحی عمیق درباره tRPC، چرایی نیاز به آن و نحوه استفاده از آن است.

توجه داشته باشید که من در حال نوشتن این مقاله هستم. من برای اولین بار در کنار شما tRPC را بر اساس مقالاتی که مطالعه کرده ام تحلیل می کنم. برای مبتدیان و تازه آموزان هدف قرار گرفته است. بیا با هم شیرجه بزنیم

پیش نیازها

دانش متوسط ​​جاوا اسکریپت.

دانش پایه TypeScript.

دانش واکنش متوسط

با Fetch and REST API تجربه کنید.

تجربه استفاده از ترمینال یا کنسول.

تجربه استفاده از NPM و دستورات آن.

تجربه استفاده از CORS و اتصال front-end/back-end.

لذت بردن از یادگیری چیز جدید.

می توانید مخزن GitHub و سایر منابع این مقاله را در اینجا بیابید.

فهرست مطالب

tRPC چیست؟

چرا به tRPC نیاز داریم؟

نحوه استفاده از tRPC

نتیجه

tRPC چیست؟

tRPC یک کتابخانه نوع امن مبتنی بر TypeScript است که از طراحی RPC API برای پردازش درخواست‌های API و ارائه پاسخ استفاده می‌کند.

RPC مخفف Remote Procedural Call است. tRPC ما بر اساس RPC ساخته می شود. RPC یک سبک معماری برای طراحی APIهایی مانند REST است. با استفاده از RPC، از Fetch و REST API خلاص می شوید.

همانطور که از نام آن پیداست، tRPC یک لایه امن نوع بر روی طرح معماری RPC قرار می دهد. به طور سنتی، ما از REST API استفاده می کنیم. دارای GET، POST، PULL و انواع درخواست های دیگر است. در tRPC هیچ نوع درخواستی وجود ندارد.

هر درخواست به پایانه پشتی tRPC از طریق یک سیستم پرس و جو می گذرد و بر اساس ورودی و پرس و جو از بک اند tRPC پاسخ می گیرد.

و در عوض، توابع داخلی با tRPC و react-query در دسترس هستند که درخواست‌های شما را پردازش می‌کنند. با هر درخواستی یکسان برخورد می شود. بستگی به این دارد که آیا نقطه پایانی API یک ورودی را می پذیرد، یک خروجی می اندازد، آن را جهش می دهد و غیره.

هنگام استفاده از REST، یک پوشه اصلی به نام /api ایجاد می کنید و فایل های داخل آنها را مسیریابی کنید. برای tRPC، به هیچ پوشه ای با فایل های زیاد نیاز ندارید. شما به چند توابع داخلی و یک سیستم واکنش پرس و جو ساده شده نیاز دارید.

شما نیازی به استفاده از fetch() ندارید، خروجی را پردازش کنید و غیره. همانطور که به زودی خواهید دید، tRPC با استفاده از URLهایی که یک پرس و جو خاص را نشان می دهند، عمل می کند.

چرا به tRPC نیاز داریم؟

tRPC نوع RPC را ایمن می کند. این بدان معنی است که مشتری شما نمی تواند داده هایی را که سرور نمی تواند دریافت کند ارسال کند. من نمی توانم رشته ای را برای یک ویژگی مبتنی بر عدد ارسال کنم.

اگر مشتری سعی کند این کار را انجام دهد، بلافاصله یک خطا دریافت خواهید کرد - نوع نامعتبر . در صورت عدم تطابق نوع داده، IDE و مرورگرها خطا می کنند.

ایمنی نوع برای برنامه هایی که از جاوا اسکریپت استفاده می کنند بسیار مهم است. پس tRPC از TypeScript استفاده می کند. این امر ایجاد مسیرها و انجام عملیات در قسمت پشتی را آسان تر می کند.

tRPC به کتابخانه ای به نام Zod نیاز دارد. این به tRPC کمک می کند تا طرح داده هر مسیر را بسازد. طرحواره یک شی با ویژگی ها و یک نوع داده معادل است که به هر ویژگی مرتبط است.

به عنوان مثال، اگر یک مسیر API به جزئیات کاربر نیاز دارد، می‌توانید یک شی در انتهای پشتی ایجاد کنید و با استفاده از Zod یک نوع داده به هر ویژگی اختصاص دهید.

در قسمت جلویی، tRPC تحلیل می‌کند که آیا داده‌های ارائه‌شده توسط کاربر یا درخواست API با انواع داده‌های ثبت‌شده توسط پایانه پشتی مطابقت دارد یا خیر. tRPC از این نوع یکپارچگی ایمن بین قسمت جلویی و انتهایی استفاده می کند.

بیایید ببینیم که چگونه tRPC، Zod و کتابخانه های دیگر در یک پروژه نمایشی با هم کار می کنند.

نحوه استفاده از tRPC

می توانید یک سرور اکسپرس را در چند ثانیه بچرخانید و شروع به نوشتن مسیرها و پرس و جوهای tRPC کنید — این آسان است.

به طور سنتی، سمت سرویس گیرنده (فرانت پایان) و سمت سرور (پشت پایان) از هم جدا می شوند. ما این جداسازی را برای این مثال دنبال خواهیم کرد.

بیایید با ایجاد سمت مشتری با استفاده از React و سمت سرور با استفاده از Express + CORS برای اتصال آنها شروع کنیم.

ساختار پوشه

ابتدا یک دایرکتوری با نام tRPC Demo ایجاد کنید. در داخل این دایرکتوری، دایرکتوری دیگری به نام trpclibrary ایجاد کنید تا سمت کلاینت و سرور از هم جدا شوند و بعداً آنها را با هم به عنوان یک کتابخانه اجرا کنید.

در داخل دایرکتوری trpclibrary ، سرور خود (Express) و کلاینت (React) را به زودی قرار خواهید داد.

در داخل دایرکتوری ریشه tRPC Demo ، یک فایل package.json را با کد زیر وارد کنید تا همه پوشه ها به هم متصل شوند و با یک دستور، کلاینت و سمت سرور را اجرا کنید.

 { "name": "trpclibrary", "version": "1.0.0", "main": "index.js", "license": "MIT", "private": true, "scripts": { "start": "concurrently \"wsrun --parallel start\"" }, "workspaces": [ "trpclibrary/*" ], "devDependencies": { "concurrently": "^5.2.0", "wsrun": "^5.2.0" } }

پس از راه‌اندازی package.json در فهرست اصلی، با راه‌اندازی سرور Express خود در دایرکتوری trpclibrary شروع می‌کنید.

نکته: از دستور cd <folder_name> استفاده کنید تا با استفاده از ترمینال وارد پوشه شده و دستورات را اجرا کنید. در مورد ما، شما در دایرکتوری ریشه هستید. پس cd .\trpclibrary به شما کمک خواهد کرد. می توانید از ترمینال VS Code نیز استفاده کنید.

شما از دستور npx create-mf-app starter برای راه اندازی سرور خود با یک الگوی از پیش تعریف شده استفاده خواهید کرد که در زمان شما صرفه جویی می کند.

ممکن است خطاهایی دریافت کنید که بیان می کند Express یا کتابخانه های دیگری را نصب نکرده اید. نگران نباشید - به زودی تمام کتابخانه های مورد نیاز را نصب خواهید کرد.

پس از ایجاد سرور، بیایید مشتری را با استفاده از React و همان دستور در همان دایرکتوری trpclibrary بسازیم.

این React سمت کلاینت شما آماده است. اما ممکن است با تمام خطاهای مربوط به ماژول ها و بسته ها غرق شوید. پس ، ابتدا آنها را دانلود می کنیم.

من از نخ استفاده می کنم و به شما توصیه می کنم همین کار را انجام دهید. از دستور yarn در دایرکتوری root trpcDemo استفاده کنید.

نکته: می توانید از دستور cd .. برای فرار از دایرکتوری فعلی و وارد کردن پوشه بیرونی استفاده کنید.

سمت سرور، سمت سرویس گیرنده یا هر دو ممکن است فایل TS Configuration را نداشته باشند. پس توصیه می کنم آن را با استفاده از دستور npx tsc --init در هر دو دایرکتوری نصب کنید.

اکنون، باید tRPC، CORS و Zod را در سمت سرور پروژه خود دانلود کنید.

از 2 ژوئیه 2024، بسته @trpc/server در آخرین نسخه 10.45.2 است. به یاد داشته باشید، حتی بسته tRPC سمت کلاینت باید 10.45.2 باشد.

سپس، باید @trpc/client ، @trpc/react-query ، @tanstack/react-query ، @trpc/server و Zod را برای سمت کلاینت نصب کنید. شما از همان دستور " yarn add <package_names> " استفاده خواهید کرد.

این بار، اسکرین شات را به اشتراک نمی گذارم. به مراحل قبلی مراجعه کنید و سعی کنید آنها را دانلود کنید.

ما اکثر نصب و راه اندازی را تکمیل کرده ایم. ساختار پوشه شما باید به صورت زیر باشد:

 tRPC Demo ├── trpclibrary │ ├── client-side (React App Folder) │ ├── server-side (Express Server Folder) └── package.json

راه اندازی tRPC

در اینجا کاری که ما در این بخش انجام خواهیم داد:

یک نمونه tRPC با Context ایجاد کنید

مسیرهای tRPC را ایجاد کنید و پرس و جوها را تنظیم کنید

یک URL پایه تنظیم کنید

CORS را راه اندازی کنید

بیایید با ایجاد یک نمونه tRPC در فایل index.ts دایرکتوری سمت سرور شروع کنیم. طبق مستندات، شما باید فقط یک نمونه را در هر برنامه شروع کنید.

با استفاده از نمونه tRPC، یک روتر ایجاد کنید. روتر به شما کمک می‌کند مسیرهایی را که درخواست‌های API می‌رسند و پردازش می‌شوند ثبت کنید.

مسیرها جایی هستند که شما به درخواست رسیدگی می کنید و پاسخ می دهید. مسیر یک نقطه پایانی API است که به URL پایه متصل است.

به عنوان مثال، http://localhost:3005/api/hello یک نقطه پایانی API به نام hello و URL پایه api برای فراخوانی نقطه پایانی API نشان می‌دهد.

 import { initTRPC } from "@trpc/server"; import * as trpcExpress from "@trpc/server/adapters/express"; const createContext = ({}: trpcExpress.CreateExpressContextOptions) => ({}); type Context = Awaited<ReturnType<typeof createContext>>; const trpc = initTRPC.context<Context>().create();

شما باید این کد را در بالای کد دیگ بخار موجود در فایل index.ts و زیر عبارات import قرار دهید. باید بالای اعلان‌های متغیر برنامه و پورت و زیر عبارت import express قرار گیرد.

Voilà! من یک نمونه tRPC با استفاده از initTRPC Builder از بسته @trpc/server ایجاد کردم. ما از این نمونه برای هر چیزی که به قسمت پشتی مربوط می شود استفاده خواهیم کرد.

علاوه بر این، من یک Context به روتر tRPC اضافه کرده ام. این یک ویژگی توسط tRPC است. به شما امکان می دهد جزئیاتی مانند اتصالات پایگاه داده و اطلاعات احراز هویت را قرار دهید.

tRPC Context را بین تمام رویه‌های tRPC به اشتراک می‌گذارد. این یک مکان اطلاعات و ذخیره سازی برای جلوگیری از تکرار کد و سازماندهی کد است.

تا به حال، شما نمونه tRPC را با Context مقداردهی اولیه کرده اید. اکنون، روتر را کد می‌زنید - پس کد زیر را زیر کد قبلی قرار دهید:

 import zod from "zod"; const appRouter = trpc.router({ hello: trpc.procedure .input( zod.object({ name: zod.string(), }) ) .query(({ input }) => { return { name: input.name, }; }), }); export type AppRouter = typeof appRouter;

بالاخره زود وارد کردی. شما همچنین یک نقطه پایانی API به نام hello ایجاد کردید که ورودی را با استفاده از متد input() دریافت می‌کند و درخواست API کاربر را با شی Zod مشخص‌شده در این نقطه پایانی مطابقت می‌دهد.

با این کد، Zod و tRPC انتظار دارند که قسمت جلویی یک شی با یک ویژگی مبتنی بر رشته به نام name ارائه دهد. tRPC از این ویژگی استفاده می کند و با استفاده از ورودی پاسخ می دهد.

شما ورودی را گرفتید، آن را تخریب کردید و آن را در متد query() پردازش کردید. همه این روش ها رویه های tRPC هستند. tRPC Context را در میان این رویه ها به اشتراک می گذارد.

همانطور که قبلاً اشاره کردم، در همه جا به نمونه tRPC نیاز دارید. من از آن برای ایجاد یک روتر برای ذخیره مسیرها (نقاط پایانی API)، ثبت و پردازش آنها استفاده کردم.

شما می توانید مسیرهای نامحدودی را در داخل router() روتر ایجاد کنید. این مانند یک کنترل کننده مسیر است. این نقطه پایانی یک شی است که هر مسیر به عنوان یک ویژگی عمل می کند.

برای دسترسی به رویه‌هایی مانند query() ، input() و غیره از سازنده پروسه نیاز دارید. پس ما آن را با نمونه tRPC پیوند داده ایم و به آن روش ها دسترسی پیدا کرده ایم.

اکنون زمان تنظیم URL اصلی است. برای تنظیم URL پایه از آداپتور Express از کتابخانه @trpc/server استفاده خواهید کرد.

کد زیر را بالای مسیرهای app.get() داخل فایل index.ts قرار دهید:

 app.use( "/api", trpcExpress.createExpressMiddleware({ router: appRouter, createContext, }) );

/api نشان دهنده URL پایه شما است. هر مسیر در بالای URL /api قرار خواهد گرفت. اکنون، نقطه پایانی hello API شما به http://localhost:3005/api/hello تبدیل شده است.

بیایید سعی کنیم این را با استفاده از مرورگر خود آزمایش کنیم. آیا به یاد دارید که از شما خواسته بودم یک فایل package.json با یک کد از پیش نوشته شده در دایرکتوری root tRPC Demo ایجاد کنید؟

قرار بود هم سرور و هم سمت کلاینت را به صورت کتابخانه اجرا کند. ترمینال خود را روی دایرکتوری ریشه تنظیم کنید. سپس، yarn start را اجرا کنید تا سرور و سمت کلاینت را با هم اجرا کنید و به آدرس http://localhost:3005/api/hello بروید.

اوه-اوه! آیا خطا دریافت کردید؟ اگر خطا می گوید "نوع نامعتبر"، شما در مسیر درستی هستید. ببینید، اینجاست که tRPC به ما کمک می کند.

در کد بالا، وقتی یک درخواست API را به عنوان کاربر به نقطه پایانی hello API ارسال کردم، هیچ شی یا مقادیری را که tRPC برای آن نقطه پایانی انتظار داشت ارسال نکردم.

tRPC از یک شی با یک ویژگی مبتنی بر رشته به name با یک مقدار انتظار داشت. وقتی من آن را ارائه نکردم، tRPC دسترسی من را محدود کرد. آنجاست که می درخشد.

"این همه خوب است، اما حالا چه؟" برای ارسال شی با داده های مورد انتظار، باید قسمت جلویی را به سمت سرور متصل کنید.

یک چیز دیگر برای سمت سرور باقی مانده است. CORS! راه اندازی آن ساده است. کد Express Initialisation را در فایل index.ts پیدا کنید. همراه با قالب Express ارائه شد. سپس خط زیر را وارد کنید:

 import cors from "cors"; app.use(cors());

در اینجا یک نکته وجود دارد: اعلان متغیر پورت و برنامه را در فایل index.ts خود جستجو کنید.

هنگامی که خط را وارد می کنید، ممکن است به شما خطایی بدهد زیرا هنوز انواع CORS را نصب نکرده اید. به ترمینال خود بروید و @types/cors در دایرکتوری سمت سرور نصب کنید.

CORS آماده و ایمن است. سمت سرور شما آماده است! اکنون، بیایید سعی کنیم سمت سرور را با استفاده از کتابخانه های مربوطه به سمت مشتری متصل کنیم.

قبل از اینکه به سمت مشتری برویم، می‌خواهم مطمئن شوم که در همان صفحه هستیم. تا کنون، نمونه‌ای از tRPC را کدگذاری کرده‌اید، یک روتر تشکیل داده‌اید، یک URL پایه تنظیم کرده‌اید و نقاط انتهایی API را با زمینه اختیاری آزمایش کرده‌اید.

همه اینها را در فایل index.ts سمت سرور کدگذاری کردید. بیایید به سمت مشتری برویم و قسمت آخر این آموزش را فتح کنیم.

سمت مشتری

ما قبلاً بسته های مورد نیاز را دانلود کرده ایم. ما با ایجاد یک فایل trpc.ts در پوشه /src دایرکتوری سمت مشتری شروع می کنیم. این پرس و جوها و درخواست های صادر شده توسط بخش جلویی رسیدگی می کند.

شما یک نمونه tRPC برای ساخت روتر و سایر اجزاء در سمت سرور ایجاد کردید، درست است؟ خوب، اکنون باید همین کار را در سمت مشتری انجام دهید. شما باید یک نمونه tRPC سمت کلاینت را با استفاده از @trpc/react-query ایجاد کنید.

همچنین، از آنجایی که می‌خواهید نمونه tRPC سمت کلاینت خود را با نمونه سمت سرور پیوند دهید، باید نمونه tRPC سمت سرور و نوع آن را وارد کنید.

برای وارد کردن نمونه tRPC سمت سرور، یک ویژگی main را در داخل فایل package.json در سمت سرور وارد کنید. هنگامی که پوشه سمت سرور را در سمت سرویس گیرنده خود وارد می کنید، index.ts به عنوان فایل ورودی تنظیم می کند.

پس از تنظیم آن ویژگی، می توانید نمونه tRPC را با استفاده از ترمینال به سمت مشتری وارد کنید. برای من، قسمت پشتی در فایل package.json من در داخل پوشه سمت سرور با نسخه 1.0.0 سمت server-side نامیده می شود.

پس من yarn add server-side@1.0.0 در ترمینال سمت کلاینت اجرا می کنم. نصب ممکن است آشنا به نظر برسد زیرا توسعه دهندگان اینگونه کتابخانه ها را می سازند.

این دستور باید پوشه سمت سرور شما را به عنوان یک بسته در دایرکتوری ماژول های گره سمت سرویس گیرنده اضافه کند. می توانید آن را با فایل package.json در سمت مشتری تأیید کنید.

این باید شامل نام بسته سمت سرور شما به عنوان یک وابستگی باشد.

به عبارت دیگر، شما بسته سمت سرور را در اپلیکیشن سمت سرویس گیرنده خود نصب کرده اید. اکنون می توانید tRPC سمت سرور را وارد کرده و از آن مانند یک کتابخانه استفاده کنید.

اگر قبلاً به خاطر داشته باشید، هنگام ایجاد روتر در سمت سرور، یک خط AppRouter صادراتی اضافه کردیم. ما این کار را انجام دادیم زیرا مجبور بودیم نوع AppRouter را در سمت کلاینت وارد کنیم تا از نمونه tRPC سمت سرور در سمت مشتری استفاده کنیم.

فایل trpc.ts اکنون چگونه باید باشد:

 import { createTRPCReact } from "@trpc/react-query"; import type { AppRouter } from "server-side"; export const trpc = createTRPCReact<AppRouter>();

با این کد، یک نمونه tRPC سمت کلاینت با استفاده از ویژگی های نمونه tRPC سمت سرور ایجاد کرده اید.

کامل. حالا بیایید فایل دیگری به نام AppComponent.tsx در پوشه /src ایجاد کنیم.

این فایل جزء اصلی برنامه شما را نگه می دارد. نمونه مشتری trpc را از فایل trpc.ts وارد می کند و از آن برای فراخوانی نقطه پایانی hello API شما استفاده می کند.

 import React from "react"; import { trpc } from "./trpc";

از آنجایی که شما یک نمونه tRPC سمت کلاینت ایجاد کرده اید، می توانید به تمام نقاط انتهایی API در سمت سرویس گیرنده دسترسی داشته باشید و متد useQuery() برای ارسال درخواست به آن نقاط پایانی API فراخوانی کنید.

 import React from "react"; import { trpc } from "./trpc"; const AppComponent = () => { const userQuery = trpc.hello.useQuery({ name: "Afan" }); return ( <div className="mt-10 text-3xl mx-auto max-w-6xl"> <div>{JSON.stringify(userQuery.data?.name)}</div> </div> ); }; export default AppComponent;

اگر به خاطر داشته باشید، نقطه پایانی hello API به یک شی با ویژگی name مبتنی بر رشته با یک مقدار نیاز دارد. پس برای جلوگیری از عدم تطابق tRPC، شی را با استفاده از متد useQuery() با مقدار ارسال می کنید.

در داخل کد JSX، پاسخ API ارسال شده توسط نقطه پایانی API را با استفاده از متد JSON.stringify() تخریب می‌کنید و با نقطه پایانی API به نتیجه دسترسی خواهید داشت.

فایل AppComponent.tsx شما یک جزء استاندارد React است. پس باید این کامپوننت را در فایل اصلی App.tsx وارد کنید. App.tsx در سمت کلاینت معادل index.ts در سمت سرور است.

برای فایل App.tsx ، تنظیمات مشابهی را دنبال خواهید کرد. نمونه tRPC مشتری را از فایل trpc.ts وارد کنید. سپس URL پایه را تنظیم کرده و React Query را راه اندازی کنید.

React Query را از TanStack، trpc را از فایل ./trpc.ts ، httpBatchLink را از @trpc/client ، useState را از React و AppComponent خود را از فایل AppComponent.tsx وارد خواهید کرد.

 // Default Import Statements import React from "react"; import ReactDOM from "react-dom/client"; import "./index.scss"; // Add the following Import Statements import { useState } from "react"; import { trpc } from "./trpc"; import { httpBatchLink } from "@trpc/client"; import AppComponent from "./AppComponent"; import { QueryClient, QueryClientProvider } from "@tanstack/react-query";

شما از هر عبارت import استفاده خواهید کرد. هر گونه خطا در مورد استفاده نکردن از اشیاء وارد شده را نادیده بگیرید. سپس، یک نمونه مشتری React Query مانند tRPC ایجاد کنید.

 const client = new QueryClient();

پس از انجام این کار، باید URL پایه را تنظیم کنید. شما این کار را در تابع اصلی App انجام خواهید داد.

همچنین، عبارات کد زیر را از زیر تابع App به بالای تابع App در زیر عبارت React Query کلاینت منتقل کنید.

 const rootElement = document.getElementById("app"); if (!rootElement) throw new Error("Failed to find the root element"); const root = ReactDOM.createRoot(rootElement as HTMLElement);

سپس کد پیش‌فرض JSX HTML را از تابع App حذف کنید. می‌توانید با خیال راحت تمام کدهای HTML را در عملکرد برنامه حذف کنید.

در مرحله بعد، باید URL پایه را برای سمت مشتری تنظیم کنید. هر زمان که front-end نقاط انتهایی API را فراخوانی کند، از این URL پایه استفاده خواهد کرد. باید با URL اصلی که در سمت سرور تنظیم کرده اید مطابقت داشته باشد.

کد تابع برنامه خود را از HTML به کد URL پایه زیر جایگزین کنید:

 const App = () => { const [trpcClient] = useState(() => trpc.createClient({ links: [ httpBatchLink({ // Base URL url: "http://localhost:3005/api", }), ], }) ); return <></>; };

فایل App.tsx شما باید به شکل زیر باشد:

 import React from "react"; import ReactDOM from "react-dom/client"; import "./index.scss"; import { useState } from "react"; import { trpc } from "./trpc"; import { httpBatchLink } from "@trpc/client"; import AppComponent from "./AppComponent"; import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; const client = new QueryClient(); const rootElement = document.getElementById("app"); if (!rootElement) throw new Error("Failed to find the root element"); const root = ReactDOM.createRoot(rootElement as HTMLElement); const App = () => { const [trpcClient] = useState(() => trpc.createClient({ links: [ httpBatchLink({ // Base URL url: "http://localhost:3005/api", }), ], }) ); return <></>; }; root.render(<App />);

من هنوز خیلی در مورد بیانیه return صحبت نکرده ام. پس ، بیایید این کار را در حال حاضر انجام دهیم. ما بیانیه return را خالی نگه نخواهیم داشت.

داده‌های بازگردانده شده توسط نقطه پایانی API را نمایش می‌دهد، که باید رشته‌ای باشد که با استفاده از متد useQuery() در فایل مؤلفه AppComponent.tsx ارسال کرده‌اید.

دستور return برای wrapper ها و جزء AppComponent است. اگر به اجزا و صفحات خود نیاز دارید که از tRPC، React Query و غیره استفاده کنند، باید اجزای خود را مانند AppComponent با Providers این کتابخانه ها بپیچید.

 return ( // tRPC Provider <trpc.Provider client={trpcClient} queryClient={client}> {/* React Query Provider */} <QueryClientProvider client={client}> {/* HTML React Component */} <AppComponent /> </QueryClientProvider> </trpc.Provider> );

اکنون، کامپوننت AppComponent با React Query می‌پیچید و نمونه مشتری React Query را که با استفاده از QueryClient() ایجاد کرده‌اید در این فایل ارسال می‌کنید. سپس، React Query Provider را با ارائه‌دهنده tRPC می‌پیچید.

ارائه دهنده tRPC به React Query Client و tRPC Client با URL Base نیاز دارد. پس ما آن اطلاعات را نیز ارائه خواهیم کرد.

هنگامی که اطلاعات مورد نیاز را ارسال کردید و کد خود را با کد من مطابقت دادید، می توانید به http://localhost:3000 مراجعه کنید و خروجی را مشاهده کنید. داده‌هایی را که با استفاده از نقطه پایانی hello API ارسال کرده‌اید نمایش می‌دهد.

توجه: برای روشن کردن پورت های لوکال هاست برای مشاهده خروجی، باید دستور yarn start را در دایرکتوری روت tRPC Demo اجرا کنید.

Voilà! ما همه چیز را آماده کرده ایم. tRPC نقطه پایانی hello API را از قسمت جلویی فراخوانی می کند. ایمنی نوع را در اولویت قرار می دهد و از TypeScript برای جلوگیری از میلیون ها مشکل دیگر جاوا اسکریپت استفاده می کند.

می‌توانید مسیرها و نقاط پایانی API بیشتری مانند hello را در Route handler اضافه کنید. این کار به آسانی گفت ن یک ویژگی جدید به یک شی است. به این ترتیب tRPC زندگی شما را آسان‌تر می‌کند.

نتیجه

tRPC یک نوع کتابخانه ایمن به سبک RPC است. این RPC را با TypeScript ادغام می‌کند تا REST، fetch() و سایر تکنیک‌ها را برای ایجاد و برقراری تماس‌های API حذف کند.

به عنوان جایگزینی برای REST و Fetch عمل می کند. من از آن برای آینده قابل پیش بینی استفاده خواهم کرد.

من از یادگیری این فناوری جدیدتر لذت برده ام. ممکن است در این مقاله ایراداتی وجود داشته باشد، اما من یک دانش آموز هستم، پس هر زمان که می توانید اشتباهاتم را گزارش کنید و به من کمک کنید تا پیشرفت کنم.

برای دریافت ایمیل‌های هفتگی در مورد مهندسی نرم‌افزار، مشاغل فنی و مشاغل، و منابع، از جمله مقالات پولی به صورت رایگان، در خبرنامه من مشترک شوید تا به شما در پیشرفت شغلی کمک کنید.

به امید دیدار در قسمت بعدی ✌️

خبرکاو