redwoodjs 入門

https://redwoodjs.com/docs/quick-start を触ってみる
リポジトリ
https://github.com/rrih/redwoodjs-start

環境は以下

node -v
v16.14.2
yarn -v
1.22.19

TSを使うか聞かれるのでyes

✔ Use TypeScript? … yes

数分で起動可能な状態になる

 > cd my-redwood-project
 > yarn rw dev

✨  Done in 174.73s.

動かしてみる

cd my-redwood-project && yarn rw dev

http://localhost:8910/ でブラウザで開く

.gitignoreに下記追加

node_modules
.yarn

バージョンを確認

yarn rw --version
3.2.0

下記を追加

model Post {
  id        Int      @id @default(autoincrement())
  title     String
  body      String
  createdAt DateTime @default(now())
}

下記を実行

yarn rw prisma migrate dev

以下に対してはそのままenter

✔ Enter a name for the new migration:

api/db/migrations/20221017085130_/migration.sql が生成された

-- CreateTable
CREATE TABLE "Post" (
    "id" INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT,
    "title" TEXT NOT NULL,
    "body" TEXT NOT NULL,
    "createdAt" DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP
);

以下を実行

yarn redwood g scaffold post

http://localhost:8910/posts/new を開くと既にCRUD操作できるようにファイル生成されてる。

• /posts/new (Create)
  
• /posts (Read)
  
• /posts/1 (Read)
  
• /posts/1/edit (Update)
  
• /posts/1 (Delete)
  

https://redwoodjs.com/docs/tutorial/chapter1/file-structure

/post/:id を開いた時
POST http://localhost:8910/.redwood/functions/graphql をcallしてる

responseは以下のようになってる

{"data":{"post":{"id":1,"title":"aaa","body":"aaa","createdAt":"2022-10-17T08:57:19.801Z","__typename":"Post"}}}

redwoodjs では api/ がバックエンドで Prisma Client を呼び出して DB 操作のソースが記述されている
また、api/src/graphql ディレクトリがあり postgresql のクエリ叩くコードが書かれているっぽい

ということを https://redwoodjs.com/docs/tutorial/chapter1/file-structure#the-api-directory に記述されていることに後から気づいた

The /api Directory
Within api there are four directories:
db contains the plumbing for the database:
schema.prisma contains the database schema (tables and columns)
After we add our first database table there will also be a SQLite database file named dev.db and a directory called migrations created for us. migrations contains the files that act as snapshots of the database schema changing over time.
dist contains the compiled code for the api side and can be ignored when developing.
src contains all your backend code. api/src contains five more directories:
directives will contain GraphQL schema directives for controlling access to queries and transforming values.
functions will contain any lambda functions your app needs in addition to the graphql.ts file auto-generated by Redwood. This file is required to use the GraphQL API.
graphql contains your GraphQL schema written in a Schema Definition Language (the files will end in .sdl.ts).
lib contains a few files:auth.ts starts as a placeholder for adding auth functionality and has a couple of bare-bones functions in it to start, db.ts instantiates the Prisma database client so we can talk to a database and logger.ts which configures, well, logging. You can use this directory for other code related to the API side that doesn't really belong anywhere else.
services contains business logic related to your data. When you're querying or mutating data for GraphQL (known as resolvers), that code ends up here, but in a format that's reusable in other places in your application.
And finally types contains automatically compiled GraphQL types and can be ignored during development
That's it for the backend.

/web 配下は React

https://redwoodjs.com/docs/tutorial/chapter1/first-page
引き続き、チュートリアル通り以下を実行してみる

yarn redwood generate page home /

React コンポーネントが生成された。storybook にも対応している

✔ Generating page files...
  ✔ Successfully wrote file `./web/src/pages/HomePage/HomePage.stories.tsx`
  ✔ Successfully wrote file `./web/src/pages/HomePage/HomePage.test.tsx`
  ✔ Successfully wrote file `./web/src/pages/HomePage/HomePage.tsx`

→ http://localhost:8910/ にアクセスすると生成された HomePageコンポーネントが描画されてる