directus + astroのチュートリアルをやってみた #1

対象

Astroで何度か静的サイト作ったことある程度の人

ほどほどにTypeScriptいじったことある人

でastroでどうやってdirectusを使うのか学習してみた

@directus/sdkを使って初期化する。このときに定義する型はdirectus側のデータと同じ構造にする。

code:directus.ts

const directus = createDirectus<Schema>('YOUR_DIRECTUS_URL').with(rest());

export default directus;

awaitで取得して、大体こんな感じにデータを扱える

code:index.astro

---

import Layout from "../layouts/Layout.astro";

import directus from "../lib/directus";

import { readSingleton } from "@directus/sdk";

const global = await directus.request(readSingleton("global"));

---

<main>

<div>

<h1>{global.title}</h1>

<p>{global.description}</p>

</div>

</main>

</Layout>

設定/データモデルで設定できる

globalという名前は別に他の名前でもいい。astroで使う時に判別できるようにするため。

シングルトンは例えばglobalに一つのtitleのように1対1しかないということ

https://scrapbox.io/files/68c8bcc5126ae93d4209bc7e.png

作った後新規項目を追加する。..わかりやすい!!!それぞれinputを追加する。

https://scrapbox.io/files/68c8bd95dd2020fe4f3a922b.png

設定->Access PoliciesからAdd collectionでglobal選択し、読み取りを許可する。設定したら☑️ボタンで保存しましょう。

https://scrapbox.io/files/68c8bebd488f26ab2b88ad56.png

設定しなかった場合

code:bash

Hint:

To get as much information as possible from your errors, make sure to throw Error objects instead of object. See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error for more information.

Stack trace:

at /Users/e245719/Documents/GitHub/directus-test/astro/node_modules/astro/dist/core/errors/utils.js:76:19

... See full stack trace in the browser, or rerun with --verbose.

Astroで権限がないと言われる

デフォルトでは読み取り権限が公開apiに与えれてないので与える必要がある。

コンテンツを編集すると

履歴とかコメントとか残せるみたいです。

https://scrapbox.io/files/68c8bf98f1d7c725c88ad69f.png

できてます。

https://scrapbox.io/files/68c8bfbda87ea3d428fb7b4d.png