SvelteKitからD1をクエリする

SvelteKit ↗は、SvelteフロントエンドフレームワークとViteを組み合わせたフルスタックフレームワークです。サーバーサイドの機能とレンダリングを提供します。D1データベースにクエリを送るには、D1データベースにバインディングされたサーバーエンドポイント ↗を設定します。

D1をクエリできる新しいSvelteKitサイトをCloudflare Pagesにセットアップするには：

1. Svelteガイドと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.tomlで定義された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バインディングを認識させ、svelte.config.jsに@sveltejs/adapter-cloudflareアダプターをインポートし、すべてのルートに適用するように設定する方法も示しています。

TypeScript

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

/** @type {import('@sveltejs/kit').RequestHandler} */
export async function GET({ request, platform }) {
  let result = await platform.env.DB.prepare(
    "SELECT * FROM users LIMIT 5"
  ).run();
  return new Response(JSON.stringify(result));
}

// https://kit.svelte.dev/docs/types#appを参照してください
// これらのインターフェースに関する情報
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({
            // これらのオプションの説明は以下を参照してください
            routes: {
                include: ['/*'],
                exclude: ['<all>']
            }
        })
    }
};