SvelteKit + EdgeDB

Beaver Bridge - Dec 31 '23 - - Dev Community

SvelteKit 프로젝트 생성

https://kit.svelte.dev/docs/creating-a-project

$ npm create svelte@latest my-app
$ cd my-app
$ npm install
$ npm run dev
Enter fullscreen mode Exit fullscreen mode

EdgeDB 설치

https://www.edgedb.com/docs/cli/index 를 봐도 되는데, 나는 그냥 https://github.com/edgedb/homebrew-tap 보고 brew로 설치했음

$ brew install edgedb/tap/edgedb-cli
Enter fullscreen mode Exit fullscreen mode

EdgeDB 생성 및 실행

https://www.edgedb.com/docs/intro/projects#initializing

$ edgedb project init
$ npx @edgedb/generate edgeql-js
$ edgedb ui
Enter fullscreen mode Exit fullscreen mode

scheme 작성

  • dbschema/default.esdl 수정
  • 로그인을 위해 미리 using extension auth 추가했음
using extension auth;

module default {
  type user {
    name: str;
  }
}
Enter fullscreen mode Exit fullscreen mode

migration 생성 및 적용

$ edgedb migration create
$ edgedb migrate
Enter fullscreen mode Exit fullscreen mode

이후 브라우저에서 user 테이블에 테스트 사용자 추가

프로젝트에 EdgeDB 연결

https://www.npmjs.com/package/edgedb

$ npm i edgedb
Enter fullscreen mode Exit fullscreen mode

app.d.ts 설정

import { Client } from "edgedb";

declare global {
  namespace App {
    interface Locals {
      db: Client;
    }
  }
}

export {};
Enter fullscreen mode Exit fullscreen mode

hooks.server.js 설정

import * as edgedb from "edgedb";

export const handle = async ({ event, resolve }) => {
  const client = edgedb.createClient();
  event.locals.db = client;

  return resolve(event, {
    filterSerializedResponseHeaders(name) {
      return name === "content-range";
    }
  });
};
Enter fullscreen mode Exit fullscreen mode

user 정보 가져오기

page.server.js 수정

export async function load({ locals }) {
  const user = await locals.db.query("select user { id, name }");
  return { user };
}
Enter fullscreen mode Exit fullscreen mode

orm을 사용하고 싶다면 https://www.edgedb.com/docs/clients/js/index 참고

auth 사용하기

https://www.edgedb.com/docs/guides/auth/index

. . . . . . . . . . . . . . . . . . . . . . . . . . .