前回はブログのタイトルの取得を page.tsx ファイルで利用しましたが、ブログのデータを取得する部分に関して分けて再利用しやすく実装をしていきます。
ページのコードを整理する
前回の記事では page.tsx のファイルの中で GraphQL のデータを取得してきて、というのを記述しましたが、汎用性を持たせるために、まず src/utils/getBlog/index.ts ファイルを作成します。コードは、src/app/page.tsx で利用していたコードを別のファイルに記述する形です。
TypeScript
import { AllBlogQuery, AllBlogResponse, Blog } from "@/interfaces/Blog";
import { fetchGraphQL } from "@/utils";
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,
publishDate: post.publishDate,
slug: post.slug,
title: post.title,
description: post.description,
});
});
return posts;
}分離をすることで、getAllBlog の関数を利用して、ブログのデータを取得することが可能になります。src/app/page.tsx ファイルは以下のようにシンプルになります。
TypeScript
import { getAllBlog } from "@/utils/getBlog";
export default async function Home() {
const posts = await getAllBlog();
return (
<main>
<h1>Content Hub ONE - Title list</h1>
<ul>
{posts.map((post) => (
<li key={post.id}>{post.title}</li>
))}
</ul>
</main>
);
}前回作成をした関数部分を別のファイルに定義した形です。動作結果は前回と同じ結果を表示します。
まとめ
今回のように、例えば Blog のスキーマを変更した際には、インターフェイスの定義を変更して、該当する関数の値を変更する、という形で修正箇所をわかりやすくすることができます。