← Cloudflare D1 / d1 / examples

Запрос к D1 из SvelteKit

SvelteKit ↗ представляет собой фреймворк полного цикла, который объединяет фронтенд-фреймворк Svelte с Vite для серверных возможностей и рендеринга. Из SvelteKit можно выполнять запросы к D1, настроив конечная точка сервера ↗ с привязкой к вашей базе данных (базам данных) D1.

Чтобы настроить новый сайт на SvelteKit в Cloudflare Pages с возможностью запросов к D1:

1. См. руководство по SvelteKit и Svelte Адаптер Cloudflare ↗.
2. Установите адаптер Cloudflare в своём проекте SvelteKit: npm i -D @sveltejs/adapter-cloudflare.
3. Привязка базы данных D1 к вашей Pages Function.
4. Передайте --d1 BINDING_NAME=DATABASE_ID флаг для wrangler dev при локальной разработке. BINDING_NAME должен соответствовать вызову в вашем коде, и DATABASE_ID должен совпадать с database_id заданный в вашем конфигурационный файл Wrangler: например, --d1 DB=xxxx-xxxx-xxxx-xxxx-xxxx.

В следующем примере показано, как создать серверную конечную точку для выполнения запросов к D1.

• Привязки доступны в platform параметр, передаваемый каждой конечной точке через platform.env.BINDING_NAME.
• С помощью SvelteKit маршрутизация на основе файлов ↗, конечная точка сервера, определённая в src/routes/api/users/+server.ts находится по адресу /api/users внутри вашего приложения SvelteKit.

В примере также показано, как настроить общие для приложения типы в src/app.d.ts чтобы распознать ваш D1Database привязку и импортируйте @sveltejs/adapter-cloudflare адаптер в svelte.config.js, и настройте это так, чтобы оно применялось ко всем вашим маршрутам.

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
		});
	}
}

// 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 {};

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

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