なつねこメモ

主にプログラミング関連のメモ帳 ♪(✿╹ヮ╹)ﾉ

2023/06/16

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

カテゴリー：

TypeScript

海外の大手 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 で装飾されたテキストと、その本文が作成されます。
ということで、メモでした。