• ドキュメント
  • エコシステム
  • チュートリアル
  • ストア
  • GitHub
  • @QwikDev
  • Discord

Drizzle

Drizzle ORM は、ヘッドレスな TypeScript ORM で、ヘッド 🐲 があります。

Drizzle を使用すると、TypeScript でデータベーススキーマを定義および管理し、SQL ライクまたはリレーショナルな方法でデータにアクセスし、オプトインツールを利用して開発者エクスペリエンスを向上させることができます 🤯。

サーバーレス環境でも使用できます。

Drizzle は、routeLoader$、routeAction$、server$ 関数を使用して Qwik で使用できます。これらは、サーバーサイドでのみコードを実行できるようにする Qwik API です。

Drizzle を Qwik に追加する最も簡単な方法は、npm qwik add drizzle コマンドを使用することです。これにより、必要な依存関係がインストールされ、Drizzle スキーマを含む db フォルダーが作成されます。

npm run qwik add drizzle

Drizzle は SQL を採用した ORM です。他の ORM とは異なり、SQL から逸脱しないため、SQL とフレームワークの API の二重学習という負担がありません。SQL を知っていれば、Drizzle を最大限に活用できます。

すべてのユーザーのリスト表示

routeLoader$ を使用して、db.query.users.findMany() を使用して DB のすべてのユーザーをクエリし、結果を返します。

src/routes/users/index.tsx
import { component$ } from "@builder.io/qwik";
import { routeLoader$ } from "@builder.io/qwik-city";
import { drizzle } from "drizzle-orm/better-sqlite3";
import Database from "better-sqlite3";
import { schema } from "../../../drizzle/schema";
 
export const useGetUsers = routeLoader$(async () => {
  const sqlite = new Database("./drizzle/db/db.sqlite");
  const db = drizzle(sqlite, { schema });
  const users = await db.query.users.findMany();
  return users;
});
 
export default component$(() => {
  const users = useGetUsers();
  return (
    <section>
      <h1>User's directory</h1>
      <ul>
        {users.value.map((user) => (
          <li key={user.id}>
            <a href={`/users/${user.id}`}>
              {user.name} ({user.email})
            </a>
          </li>
        ))}
      </ul>
    </section>
  );
});

ユーザー詳細の表示

routeLoader$ を使用して、db.query.users.findFirst({ where: (users, { eq }) => eq(users.id, userId), }) を使用して、userId URL パラメーターに基づいて特定のユーザーをクエリし、結果を返します。

src/routes/users/[userId]/index.tsx
import { component$ } from "@builder.io/qwik";
import { routeLoader$ } from "@builder.io/qwik-city";
import { drizzle } from "drizzle-orm/better-sqlite3";
import Database from "better-sqlite3";
import { schema } from "../../../../drizzle/schema";
 
export const useGetUser = routeLoader$(async (requestEvent) => {
  const userId = parseInt(requestEvent.params["userId"], 10);
  const sqlite = new Database("./drizzle/db/db.sqlite");
  const db = drizzle(sqlite, { schema });
  const user = await db.query.users.findFirst({
    where: (users, { eq }) => eq(users.id, userId),
  });
  if (!user) {
    // Set the status to 404 if the user is not found
    requestEvent.status(404);
  }
  return user;
});
 
export default component$(() => {
  const user = useGetUser();
  return (
    <section>
      <h1>User detail</h1>
      {user.value ? (
        <>
          <p>Name: {user.value.name}</p>
          <p>Email: {user.value.email}</p>
        </>
      ) : (
        <p>User not found</p>
      )}
    </section>
  );
});

ユーザーの追加

routeAction$ と Form を使用して、DB に新しいユーザーを追加するためのプログレッシブフォームを作成します。db.insert(schema.users).values(data) を使用してユーザーを作成します。

src/routes/create/index.tsx
import { component$ } from "@builder.io/qwik";
import { routeAction$, zod$, z, Form } from "@builder.io/qwik-city";
import { drizzle } from "drizzle-orm/better-sqlite3";
import Database from "better-sqlite3";
import { schema } from "../../../drizzle/schema";
export const useCreateUser = routeAction$(
  async (data) => {
    const sqlite = new Database("./drizzle/db/db.sqlite");
    const db = drizzle(sqlite, { schema });
    const user = await db.insert(schema.users).values(data);
    return user;
  },
  zod$({
    name: z.string(),
    email: z.string().email(),
  }),
);
 
export default component$(() => {
  const createUserAction = useCreateUser();
  return (
    <section>
      <h1>Create User</h1>
      <Form action={createUserAction}>
        <label>
          Name
          <input name="name" value={createUserAction.formData?.get("name")} />
        </label>
        <label>
          Email
          <input name="email" value={createUserAction.formData?.get("email")} />
        </label>
        <button type="submit">Create</button>
      </Form>
      {createUserAction.value && (
        <div>
          <h2>User created successfully!</h2>
        </div>
      )}
    </section>
  );
});

貢献者

このドキュメントの改善に貢献してくれたすべての貢献者に感謝します！

  • LazyClicks