نحوه استفاده از Astro با Hono

Astro آینده چارچوب های وب است. حداقل برای من اینطور است. استفاده از آن بسیار خوب بود و احساس می‌کنم چارچوب «همه کار را انجام دهید» تا جایی که می‌خواهم از آن برای همه چیز و هر چیزی استفاده کنم.

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

بنابراین، با آن، چرا یاد نگیرید که چگونه 2 را ترکیب کنید تا بتوانید بهترین های هر دو جهان را داشته باشید؟

راه اندازی Astro

اول از همه، شما باید یک پروژه جدید Astro را راه اندازی کنید. با اجرای دستور زیر می توانید این کار را انجام دهید:

npm create astro@latest

این شما را از طریق یک راهنمای CLI بسیار فانتزی برای راه اندازی پروژه خود راهنمایی می کند.

پس از انجام این کار، می توانید دستور زیر را برای شروع پروژه خود اجرا کنید:

npm run dev

با این راه اندازی و در حال اجرا می توانید بازدید کنید http://localhost:4321 برای دیدن پروژه جدید Astro.

راه اندازی Hono

در مرحله بعد، مطمئناً باید یک برنامه اصلی Hono را راه اندازی کنید.

برای شروع باید Hono را به عنوان یک وابستگی نصب کنید. این کار با دستور زیر قابل انجام است:

npm install hono

با نصب Hono، باید یک نقطه پایانی جدید در Astro ایجاد کنید تا همه درخواست‌ها را به یک نمونه Hono هدایت کند.

برای انجام این کار یک مسیر catch-all جدید در مسیر خود ایجاد کنید src/pages/ دایرکتوری چیزی شبیه به: src/pages/api/[...path].ts.

با استفاده از این فایل می توانید یک نمونه پایه جدید Hono مانند این ایجاد کنید:

// src/pages/api/[...path].ts
import { Hono } from 'hono';

const app = new Hono().basePath('/api/');

را یادداشت کنید .basePath(...) بخش اینجا، مهم است. این به Hono می گوید که همه درخواست های دریافتی باید با این مسیر پیشوند شوند. در مورد ما، چون از Astro استفاده می کنیم، باید با ساختار فایل پروژه Astro شما مطابقت داشته باشد. برای مثال اگر نقطه پایانی شما در است src/pages/foo/bar/[...path].ts سپس شما باید استفاده کنید /foo/bar/ به عنوان مسیر پایه

اکنون، تا پایان راه‌اندازی Hono، یک نقطه پایانی اولیه برای بازیابی برخی از داده‌های ساختگی اضافه می‌کنیم.

// src/pages/api/[...path].ts
import { Hono } from 'hono';

const app = new Hono()
    .basePath('/api/')
    .get('/posts', async (c) => {
        return {
            posts: [
                { id: 1, title: 'Hello World' },
                { id: 2, title: 'Goodbye World' },
            ],
        };
    });

اتصال Hono به Astro

با راه اندازی یک نمونه اولیه Hono، اکنون می توانیم آن را به Astro متصل کنیم.

Astro معمولاً انتظار دارد که یک تابع با نام مطابق با روش HTTP صادر شود که انتظار می رود آن را مدیریت کند. مانند GET رسیدگی خواهد کرد GET درخواست ها، POST رسیدگی خواهد کرد POST درخواست ها و غیره

اکنون، در مورد ما باید همه درخواست‌ها را به Hono هدایت کنیم. این را می توان با ایجاد یک جدید انجام داد ALL صادرات. بنابراین بیایید یک مورد اساسی از اینها ایجاد کنیم که فعلاً فقط متنی را برمی گرداند:

// src/pages/api/[...path].ts
import { Hono } from 'hono';

import type { APIRoute } from 'astro';

// ...

export const ALL: APIRoute = () => new Response('Hello World');

در مرحله بعد می توانیم به آن دسترسی پیدا کنیم context پارامتر تابع برای دسترسی به درخواست ورودی و ارسال آن به Hono fetch روش

// src/pages/api/[...path].ts
import { Hono } from 'hono';

import type { APIRoute } from 'astro';

// ...

export const ALL: APIRoute = (context) => app.fetch(context.request);

و دقیقاً مانند آن اکنون می توانید بازدید کنید http://localhost:4321/api/posts برای مشاهده بازگشت داده های ساختگی خود از Hono.

یک کلاینت RPC تایپ شده اضافه کنید

در حال حاضر، برای بخش پایانی کار کردن همه چیز بدون ظاهر. ما می‌توانیم آن را طوری بسازیم که وقتی می‌خواهیم به این API درخواست کنیم، گزینه‌های درخواست تایپ شده مانند پارامترهای پرس و جو، سرصفحه‌ها و غیره را به همراه یک پاسخ کاملاً تایپ شده دریافت می‌کنیم.

شما می توانید در مورد نحوه کار این همه در مستندات Hono بیشتر بخوانید.

تنظیم این کار بسیار آسان است زیرا تمام کاری که باید انجام دهید صادر کردن نوع نمونه Hono خود و ارسال آن به ویژه fetch مشتری که Hono ارائه می دهد تماس گرفت hc.

ابتدا نوع نمونه Hono خود را صادر کنید:

// src/pages/api/[...path].ts
import { Hono } from 'hono';

import type { APIRoute } from 'astro';

// ...

export type App = typeof app;

اکنون، برای استفاده از این نوع، می‌توانیم یک صفحه Astro پایه با یک اسکریپت سمت کلاینت ایجاد کنیم تا با استفاده از مشتری Hono درخواست واکشی کنیم:

		

			

										

							
							 هم‌رسانی
						
						
				
					 فیس بوک
				
				
					 توییتر (X)
				
				
					 لینکدین
				
				
					 ‫تامبلر
				
				
					 ‫پین‌ترست
				
				
					 ‫رددیت
				
				
					 ‫VKontakte
				
				
					 ‫Odnoklassniki
				
				
					 پاکت
				
				
					 رایانامه
				
				
					 چاپ