SCALE — Build Lab
開発パターン · CLOUDFLARE FUNCTION

D1 データ一括取得 API

CATEGORY開発パターン TYPECloudflare Function EFFORT60〜120分 DIFFICULTY
PRIMARY CODE
ts · scale-crm:functions/api/data/index.ts
// GET  /api/data           → 全件取得
// GET  /api/data?prefix=X  → prefix一致の行のみ取得
import { corsResponse, corsError, handleOptions } from '../../_lib/cors';

interface Env { DB: D1Database }

export const onRequestOptions = () => handleOptions();

export const onRequestGet: PagesFunction<Env> = async ({ request, env }) => {
  try {
    const url = new URL(request.url);
    const prefix = url.searchParams.get('prefix') || '';
    const limit = parseInt(url.searchParams.get('limit') || '5000', 10);

    let stmt;
    if (prefix) {
      stmt = env.DB.prepare(
        'SELECT key, value, updated_at, updated_by FROM app_data WHERE key LIKE ? ORDER BY key LIMIT ?'
      ).bind(prefix + '%', limit);
    } else {
      stmt = env.DB.prepare(
        'SELECT key, value, updated_at, updated_by FROM app_data ORDER BY key LIMIT ?'
      ).bind(limit);
    }

    const { results } = await stmt.all();
    return corsResponse({ ok: true, count: results.length, data: results });
  } catch (e: any) {
    return corsError(e.message || 'D1 query failed');
  }
};

前提条件
Tailwind CSS v4TypeScript 5
USE CASES
  • SPA 起動時の状態復元

D1 データ一括取得 API

:LiTarget: 用途

全データを一括取得して JSON で返す API。初回ロード時のデータ復元に。

:LiSparkle: 特徴

  • 一括取得
  • JSON 整形
  • キャッシュ制御

:LiCode: 実コード(SCALE Base より自動抽出)

:LiInfo: scale-crm:functions/api/data/index.ts の中身そのもの。コピペ即可。

// GET  /api/data           → 全件取得
// GET  /api/data?prefix=X  → prefix一致の行のみ取得
import { corsResponse, corsError, handleOptions } from '../../_lib/cors';

interface Env { DB: D1Database }

export const onRequestOptions = () => handleOptions();

export const onRequestGet: PagesFunction<Env> = async ({ request, env }) => {
  try {
    const url = new URL(request.url);
    const prefix = url.searchParams.get('prefix') || '';
    const limit = parseInt(url.searchParams.get('limit') || '5000', 10);

    let stmt;
    if (prefix) {
      stmt = env.DB.prepare(
        'SELECT key, value, updated_at, updated_by FROM app_data WHERE key LIKE ? ORDER BY key LIMIT ?'
      ).bind(prefix + '%', limit);
    } else {
      stmt = env.DB.prepare(
        'SELECT key, value, updated_at, updated_by FROM app_data ORDER BY key LIMIT ?'
      ).bind(limit);
    }

    const { results } = await stmt.all();
    return corsResponse({ ok: true, count: results.length, data: results });
  } catch (e: any) {
    return corsError(e.message || 'D1 query failed');
  }
};

:LiFolder: ソースファイルのパス

/Users/oogushiyuuki/株式会社SCALE/scale-lead/functions/api/data/index.ts

:LiHandPointer: 使い方

対象プロジェクトに該当ファイルをコピーして、props を流し込むだけ。

:LiAlertCircle: 注意事項

  • 依存パッケージを忘れず追加