Zenn
Open5

Sonicjsについて

Drizzle ORM
sonicjs
munmun

Cloudflare workersで展開できるHeadless cmsを探してSonicjsにたどり着いた。
はじめはこっちmicrofeedを検討したけど、こっちはデータ構造とかを好きにカスタマイズできなかった。

munmun
npx create-sonicjs-app

で、とりあえずプロジェクト作成できるので特にこだわりがなければこれでいいけど、
hono, drizzle-ormとかを組み合わせて作られたFWで、もとリポジトリの更新に追従できたほうがいい気がするのでhttps://github.com/lane711/sonicjs これをミラーしていい感じに使ったほうがいいかも。

munmun

DBのschema定義については、ドキュメントの通りでdrizzle-ormの使い方に従って定義してやる。
ただ、

export const definition = {
  id: text('id').primaryKey(),
  title: text('title'),
  body: text('body'),
  userId: text('userId'),
  image: text('image'),
  images: text('images', { mode: 'json' }).$type<string[]>(),
  tags: text('tags', { mode: 'json' }).$type<string[]>()
};

export const table = sqliteTable(
  tableName,
  {
    ...definition,
    ...auditSchema
  },
  (table) => {
    return {
      userIdIndex: index('postUserIdIndex').on(table.userId)
    };
  }
);

これがdrizzle公式の例だと

import { int, text, mysqlTable, mysqlSchema } from "drizzle-orm/mysql-core";
export const mySchema = mysqlSchema("my_schema")
export const mySchemaUsers = mySchema.table("users", {
  id: int("id").primaryKey().autoincrement(),
  name: text("name"),
});

で、何が言いたいかというと
sonicjsでは export const table が
drizzleでは export const mySchema になっていて、drizzleとしてはtableの変数名は自由にわかりやすくして良いみたい。
ただ、ここで結構つまったのが、sonicjsではここは絶対 table の変数名で定義する必要があった。
そうしないと、sonicjsの管理画面でレコードの追加、編集などができなくなる。ドキュメントで例として書かれているだけで定義の仕方として明示されていなかった気がするので結構こまった。
不思議なことにデータの取得はできた。

munmun

公式の手順にそってやれば概ね動くので動作させるまでは、あとはそのとおりでいいと思う。

プロジェクトのデフォルトで展開されるdemoのテーブルで
post, category があってその２つが多対多の関係が定義されていて、Headless cms的にそのまま何も手を加えずともいい感じにリレーションされた結果がAPIで取得できるのかなと思っていたけど、
そういうことではなく、自分でそれができるエンドポイントを作って返してやる必要があって結構面倒。

結局僕は src/custom/gql として @hono/graphql-server をつかってgraphqlで実装している。
一通り機能が揃ったHeadless cmsではなく、最低限のAPIと管理画面が実装された軽量のAPI用FWという印象