前回は Content Hub ONE のメディアに関するインターフェイスを作成しました。今回は利用したいブログのコンテンツタイプに対するインターフェイスを作成したいと思います。
ブログのスキーマを確認する
前回のメディアの時と同じように、対象となるコンテンツの ID を利用してクエリを作成していきます。Postman の画面は以下のような感じです。
実際に作成をしたクエリで不要なものを削除、参照しやすくするように少し並び替えをしたのが以下のようになります。
GraphQL
query Blog {
blog(id: "jPUxNefHAkW31dYrXPwuUg") {
id
name
title
publishDate
description
slug
body
image {
total
results {
description
fileHeight
fileId
fileName
fileSize
fileType
fileUrl
fileWidth
id
name
}
}
relatedArticles {
results {
id
name
title
slug
publishDate
}
}
}
}結果として取得するデータは以下のようになります。
JSON
{
"data": {
"blog": {
"id": "jPUxNefHAkW31dYrXPwuUg",
"name": "Introduction to the Blog",
"title": "Welcome to Our Blog",
"publishDate": "2024-07-23T00:00:00.000Z",
"description": "Explore the latest trends, insights, and stories in our blog.",
"slug": "introduction-to-the-blog",
"body": {
"type": "doc",
"content": [
{
"type": "paragraph",
"content": [
{
"type": "text",
"text": "Welcome to our blog, where we share exciting and informative content on various topics. Whether you're looking for tips, advice, or inspiration, our blog has something for everyone."
}
]
},
{
"type": "paragraph",
"content": [
{
"type": "text",
"text": "Discover the latest trends in technology, lifestyle, travel, and more. Stay updated with industry insights and expert opinions. Dive into captivating stories and personal experiences that will keep you engaged."
}
]
},
{
"type": "paragraph",
"content": [
{
"type": "text",
"text": "Join our community of passionate readers and be a part of the conversation. We encourage you to share your thoughts, ideas, and feedback in the comments section."
}
]
},
{
"type": "paragraph",
"content": [
{
"type": "text",
"text": "Get ready to embark on a journey of knowledge and discovery. Let's explore together!"
}
]
}
]
},
"image": {
"total": 0,
"results": []
},
"relatedArticles": {
"results": []
}
}
}
}この Json のデータを扱うためのインターフェイスは、以下のように作成します。
TypeScript
import { Media } from "@/interfaces/Media"
export interface Blog {
id: string;
name: string;
title: string;
publishDate: string;
description: string;
slug: string;
body: any;
image: {
total: number;
results: Media[];
};
relatedArticles: {
total: number;
results: Blog[];
};
}
export interface BlogResponse {
data: {
blog: Partial<Blog>;
};
}なお、Postman のクエリにおいて、上記の項目以外に locale という項目が表示されています。これに関しては後日紹介をします。
全てのブログ記事のスキーマを確認する
ブログ記事単体のインターフェイスを作成しましたが、実際には複数のブログのデータを取得して、そのデータを利用して React でレンダリングをする部分も多くあります。これに対しては、allBlog のクエリを利用することになります。今回は一部を取得します。
GraphQL
query AllBlog {
allBlog {
total
results {
id
name
publishDate
slug
title
}
}
}結果の json ファイルは以下のようになります。
JSON
{
"data": {
"allBlog": {
"total": 2,
"results": [
{
"id": "bthW8EnPU0-tdSeXOdMdSQ",
"name": "Introducing Sitecore Composable DXP Products",
"publishDate": "2024-07-23T00:00:00.000Z",
"slug": "introducing-sitecore-composable-dxp-products",
"title": "Introducing Sitecore Composable DXP Products"
},
{
"id": "jPUxNefHAkW31dYrXPwuUg",
"name": "Introduction to the Blog",
"publishDate": "2024-07-23T00:00:00.000Z",
"slug": "introduction-to-the-blog",
"title": "Welcome to Our Blog"
}
]
}
}
}２つの記事のデータが json として取得できています。これを Blog に対して作成をしたインターフェイスを利用して、以下のようにインターフェイスを作成します。
TypeScript
export interface AllBlogResponse {
data: {
allBlog: {
total: number;
results: Partial<Blog>[];
};
};
}すでに用意している BlogResponse はブログの記事を取得したときに利用するインターフェイスとし、それを配列として持っている AllBlogResponse となっています。
まとめ
前回は Json のデータを元にインターフェイスを作成しましたが、今回はメディアを複数持つような構成としていること、またブログを複数取得する際に、複数のコンテンツを取得するようにインターフェイスをまとめてみました。
ここまでは Postman を利用して実行結果を取得、インターフェイスを作成していた形です。このインターフェイスを利用して、Content Hub ONE に接続してコンテンツを利用したいと思います。