これまで登録しているブログのデータのクエリに関して、テストに必要な項目だけを定義していましたが、今後利用する上で必要となる項目を追加していきます。

共通項目の定義を追加する
Media に関して
ブログの記事において画像一覧を取得する形になっています。この部分に関して、クエリの定義を追加していきます。まず基本的なクエリは以下のようになります。
GraphQL
query Media {
media(id: "mediaid") {
id
name
description
fileHeight
fileId
fileName
fileSize
fileType
fileUrl
fileWidth
}
}
上記のコードとしてはメディアで必要となる項目、および ID を指定してメディアに関して取得できるように、src/interfaces/Media/index.ts に以下のコードを追加します。
TypeScript
export const MediaQuery = `
id
name
description
fileHeight
fileId
fileName
fileSize
fileType
fileUrl
fileWidth
`;
export const MediaFromIDQuery = (mediaId: string) => {
return (
`
query Media {
media(id: "${mediaId}") {
` +
MediaQuery +
`
}
}
`
);
};
Media に関して、必要なデータを取得できるようにしました。
ブログに関して
ここまで利用していたクエリは以下のコードになります。
TypeScript
export const AllBlogQuery = `query AllBlog {
allBlog(orderBy: PUBLISHDATE_DESC) {
total
results {
id
name
publishDate
slug
title
description
}
}
}
`
現在の Blog のクエリに関しては、画像一覧( image )、関連記事一覧( relatedArticles ) の項目の詳細を省略すると、以下のようなクエリになります。
GraphQL
query Blog {
blog(id: null) {
id
name
publishDate
slug
title
description
body
image {
total
results {
id
}
}
relatedArticles {
total
results {
id
}
}
}
}
実際に relatedArticles は Blog と同じフィールドを持つことになりますが、今回はのrelatedArticles が持っている relatedArticles のデータは取得しない形とします。このため、クエリに関しては少し複雑になりますが以下のように定義します。
TypeScript
const BlogFieldsQuery =
`
id
name
publishDate
slug
title
description
body
`;
const BlogQuery =
BlogFieldsQuery + `
image {
results {
` +
MediaQuery +
`
}
total
}
relatedArticles {
results {
` +
BlogFieldsQuery +
`
image {
total
results {
` +
MediaQuery +
`
}
}
}
}
`;
export const AllBlogQuery = `query AllBlog {
allBlog(orderBy: PUBLISHDATE_DESC) {
total
results {
` +
BlogQuery +
`
}
}
}
`
データ取得の関数の修正
今回は取得するデータの項目を増やしましたので、データを取得する関数での処理も追加します。src/utils/getBlog/index.ts で定義している getAllBlog を以下のように更新します。
TypeScript
export async function getAllBlog() {
const results: AllBlogResponse = (await fetchGraphQL(
AllBlogQuery
)) as AllBlogResponse;
const posts: Partial<Blog>[] = [];
results.data.allBlog.results.forEach((post: Partial<Blog>) => {
posts.push({
id: post.id,
name: post.name,
title: post.title,
publishDate: post.publishDate,
description: post.description,
slug: post.slug,
body: post.body,
image: post.image,
relatedArticles: post.relatedArticles,
});
});
return posts;
}
これで一通りの更新が終わりました。
まとめ
今回、基本的には Blog および Media に関して処理を追加していくうえで、クエリを作成する際に利用しやすいように、共通の項目は別に呼び出しをしやすくしました。これにより、今後作成するコンポーネントに対して個別の影響は最小限にして、項目や処理の更新を柔軟にできるようになりました。