なつねこメモ

主にプログラミング関連のメモ帳 ♪(✿╹ヮ╹)ノ 書いてあるコードは自己責任でご自由にどうぞ。記事本文の無断転載は禁止です。

Contentful に Rich Text データを API 経由で登録したい

海外の大手 CMS に Contentful があるんですが、 API ドキュメントがびみょーに分かりにくいのでメモ。

例えば、ある Entry に対してデータを作成したい場合、こんな感じでリクエストを投げてね、とあります。

import { createClient, Environment } from "contentful-management";

const client = createClient({ accessToken: "ACCESS_TOKEN" });
const space = await client.getSpace("SPACE_ID");
const environment = await space.getEnvironment("ENVIRONMENT_ID");

const entry = await environment.createEntry("CONTENT_TYPE_ID", {
  fields: {
    title: {
      "en-US": "Entry title",
    },
  },
});

なるほど、 fields にデータを渡せば良いのね、と。
では、 Rich Text はどうすればいいでしょう?というのがあるんですが、 fields 以下は Record<string, any> で定義されているので、どうすればええねんとなります。
そこで、結果としては以下のように @contentful/rich-text-types で組み立てたものを投げつければ良いとのことでした。

import {
  BLOCKS,
  MARKS,
  Document,
  TopLevelBlock,
} from "@contentful/rich-text-types";

const content: TopLevelBlock[] = [
  {
    nodeType: BLOCKS.HEADING_1,
    data: {},
    content: [
      {
        nodeType: "text",
        value: "Hello, world!",
        marks: [],
        data: {},
      },
    ],
  },
  {
    nodeType: BLOCKS.PARAGRAPH,
    data: {},
    content: [
      {
        nodeType: "text",
        value: "This is a paragraph.",
        marks: [],
        data: {},
      },
    ],
  },
];

const document: Document = {
  nodeType: BLOCKS.DOCUMENT,
  content,
  data: {},
};

await environment.createEntry("CONTENT_TYPE_ID", {
  fields: {
    title: {
      "en-US": "Entry title",
    },
    body: {
      "en-US": document,
    },
  },
});

これで、単純に h1 で装飾されたテキストと、その本文が作成されます。
ということで、メモでした。