DEV Community

Beaver Bridge
Beaver Bridge

Posted on • Edited on

SvelteKit + EdgeDB

#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

Top comments (0)