Content Hub ONE のデータを取得するにあたって、Typescript で利用するインターフェイスを先に実装していきます。作業としては Postman を利用してクエリを確認していきながら、作成していきます。初回は Media に関するインターフェイスの作成です。
メディアのスキーマを確認する
以前の記事で Postman と連携をした際に、Postman が Content Hub ONE のスキーマを読み込んでツールで見やすくなっています。以下のような画面です。
例えば Media をクリックすると以下のように画面が切り替わります。
実際にアップロード済みの Media の ID を設定をしてクエリを実行すると、以下のような形で結果を取得しています。
システムが持っているデータも取ることができますが、今回はメディアファイルに関するコードを取得したいだけですので以下のようにクエリを作成します。順番は少し変更をしました。
GraphQL
query Media {
media(id: "yourmediaid") {
id
name
description
fileId
fileName
fileUrl
fileHeight
fileWidth
fileSize
fileType
}
}取得する結果は以下の通りです。
JSON
{
"data": {
"media": {
"id": "GXDwOgPJDESspwsYlbx_Rg",
"name": "chonestatus03.png",
"description": "",
"fileId": "fef9ac60109043cbbb1c3401e6938ae0",
"fileName": "chonestatus03.png",
"fileUrl": "https://mms-delivery.sitecorecloud.io/api/media/v2/delivery/f36ae82c-5f19-40c5-4086-08daadeee1b8/fef9ac60109043cbbb1c3401e6938ae0",
"fileHeight": 398,
"fileWidth": 941,
"fileSize": 30399,
"fileType": "image/png"
}
}
}この結果を利用して、interface のファイルを以下のように作成します。
TypeScript
export interface Media {
id: string;
name: string;
description: string;
fileId: string;
fileName: string;
fileUrl: string;
fileHeight: number;
fileWidth: number;
fileSize: number;
fileType: string;
}
export interface MediaResponse {
data: {
media: Partial<Media>;
};
}Media に関してはシステムで持っているスキーマになるので基本的には拡張することはないものです。そして、Media に関しては Blog の記事のコンテンツタイプのフィールドとして定義しています。この際に今回のインターフェイスを利用する形となります。
まとめ
今回は実際に Next.js での連携実装をする前準備の１つ、Media のインターフェイスを作成しました。次回は、Blog のインターフェイスを作成します。