Query D1 from SvelteKit (SvelteKit에서 D1 쿼리하기)

이 문서는 SvelteKit 애플리케이션에서 D1 데이터베이스를 쿼리하는 방법을 설명해요.

출처: 문서

본문

SvelteKit ↗︎은 Svelte 프런트엔드 프레임워크를 Vite와 결합해 서버 사이드 기능과 렌더링을 제공하는 풀스택 프레임워크예요. D1 데이터베이스에 대한 서버 엔드포인트 ↗︎를 구성해 SvelteKit에서 D1을 쿼리할 수 있어요.

D1을 쿼리할 수 있는 새 SvelteKit 사이트를 Cloudflare Pages에 설정하려면:

1. **SvelteKit 가이드**와 Svelte의 Cloudflare 어댑터 ↗︎를 참고하세요.
2. SvelteKit 프로젝트에 Cloudflare 어댑터를 설치하세요: npm i -D @sveltejs/adapter-cloudflare.
3. D1 데이터베이스를 Pages Function에 바인딩하세요.
4. 로컬에서 개발할 때 wrangler dev에 --d1 BINDING_NAME=DATABASE_ID 플래그를 전달하세요. BINDING_NAME은 코드에서 호출하는 이름과 일치해야 하고, DATABASE_ID는 Wrangler 설정 파일에 정의된 database_id와 일치해야 해요. 예: --d1 DB=xxxx-xxxx-xxxx-xxxx-xxxx.

다음 예시는 D1을 쿼리하도록 구성된 서버 엔드포인트를 만드는 방법을 보여줘요.

• 바인딩은 각 엔드포인트에 전달되는 platform 매개변수에서 platform.env.BINDING_NAME을 통해 사용할 수 있어요.
• SvelteKit의 파일 기반 라우팅 ↗︎을 사용하면, src/routes/api/users/+server.ts에 정의된 서버 엔드포인트가 SvelteKit 앱에서 /api/users로 사용 가능해요.

이 예시는 또한 src/app.d.ts 내에서 앱 전체 타입을 구성해 D1Database 바인딩을 인식하고, @sveltejs/adapter-cloudflare 어댑터를 svelte.config.js로 가져와 모든 라우트에 적용하도록 구성하는 방법을 보여줘요.

src/routes/api/users/+server.ts:

import type { RequestHandler } from "@sveltejs/kit";

export async function GET({ request, platform }) {
	try {
		let result = await platform.env.DB.prepare(
			"SELECT * FROM users LIMIT 5",
		).run();
		return new Response(JSON.stringify(result), {
			headers: { "Content-Type": "application/json" },
		});
	} catch (error) {
		return Response.json({ error: "Failed to fetch users" }, {
			status: 500
		});
	}
}

src/app.d.ts:

// See https://kit.svelte.dev/docs/types#app
// for information about these interfaces
declare global {
	namespace App {
		// interface Error {}
		// interface Locals {}
		// interface PageData {}
		interface Platform {
			env: {
				DB: D1Database;
			};
			context: {
				waitUntil(promise: Promise<any>): void;
			};
			caches: CacheStorage & { default: Cache };
		}
	}
}

export {};

svelte.config.js:

import adapter from "@sveltejs/adapter-cloudflare";

export default {
	kit: {
		adapter: adapter({
			// See below for an explanation of these options
			routes: {
				include: ["/*"],
				exclude: ["<all>"],
			},
		}),
	},
};