DEV Community

Beaver Bridge
Beaver Bridge

Posted on • Edited on

SvelteKit + EdgeDB

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

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

Top comments (0)

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay