nestjs-svelte-1

NestJS, SvelteKit, Prisma, PostgreSQL で何かをつくってみる

• CSS Framework は Skeketon を使ってみる

Settings Memo

とりあえずバックエンドとフロントを入れる。

nest new backend
npm create skeleton-app@latest frontend

Backend の設定・開発

バックエンドを設定しましょう。

cd backend
npm i -D prisma
npx prisma init

とりあえず User テーブルを作ります。

CREATE TABLE "User" (
  id SERIAL PRIMARY KEY,
  email VARCHAR(255) NOT NULL UNIQUE,
  username VARCHAR(100) NOT NULL UNIQUE,
  bio VARCHAR(200),
  avatar VARCHAR(500),
  active BOOLEAN DEFAULT TRUE,
  createdAt TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP,
  updatedAt TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP
);

上記を元に schema.prisma を更新して、マイグレーションファイルを作成します。

npx prisma introspect
npx prisma migrate dev --name created_user

users リソース作成します。

nest g resource users

GrahpQL を入れます。

npm i @nestjs/graphql @nestjs/apollo @apollo/server graphql

GraphQL 関連の設定をします。

• nest-cli.jsonのpluginsに@nestjs/graphqlを追加します。これによって、entity とかに追加するデコレータをシンプルにできます。
• app.module.tsにGraphQLModuleを追加します。その際に、autoSchemaFileを追加して、自動で gql ファイルが作成されるようにします。

users の Controller, Service, Entity などをざっくり作ります。

• 上記の際に、UsersService で PrismaService を使いますが、それを簡単に扱えるnestjs-prismaを追加しておきます。

npm i nestjs-prisma

• また、UsersModuleのimportsにPrismaModuleを追加しておく必要があります。

// src/users/users.module.ts

...
import { PrismaModule } from "nestjs-prisma";

@Module({
  imports: [PrismaModule],
  providers: [UsersResolver, UsersService],
})
...

起動して GraphQL プレイグラウンドを見てみましょう。

npm run start:dev

エラーがなければ、起動すると勝手に、src/schema.gqlが作成されます。 http://localhost:3045/graphqlにアクセスすると、GraphQL プレイグラウンドが確認できます。（port はデフォルトは 3000 です。）

下記でユーザを作成できます。

mutation CreateUser($createUserInput: CreateUserInput!) {
  createUser(createUserInput: $createUserInput) {
    id
    username
    email
    createdat
  }
}

Query Variables

{
  "createUserInput": {
    "username": "hoge taro",
    "email": "[email protected]"
  }
}

下記で全ユーザ取得できます。

query GetAllUsers {
  users {
    id
    username
    email
  }
}

Frontend の設定・開発

SvelteKit でサイトのレイアウトと、アカウント作成・ログイン画面とかを作りつつ、GraphQL で Backend にリクエストを送れるようにしましょう。試しに、トップページに全ユーザの一覧を表示させつつ、新規ユーザの作成も可能にしてみましょう。