前回はブログのタイトルの取得を page.tsx ファイルで利用しましたが、ブログのデータを取得する部分をきちんと別ファイルに今回は分けます。

ページのコードを整理する

今回は page.tsx のファイルの中で GraphQL のデータを取得してきて、というのを記述しましたが、汎用性を持たせるために、まず api/queries/getBlog/index.tsx ファイルを作成します。コードは、app/page.tsx で用意していたファイルになります。

import { fetchGraphQL } from "@/api";
import { Blog, AllBlogResponse, AllBlogQuery } from "@/interfaces/blog";

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,
      description: post.description,
      name: post.name,
      title: post.title,
      publishDate: post.publishDate,
      blogImage: post.blogImage,
    });
  });

  return posts;
}

分離をすることで、getAllBlog の関数を利用して、ブログのデータを取得することが可能になります。page.tsx ファイルは以下のようにシンプルになります。

import getAllBlog from "@/api/queries/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 のスキーマを変更した際には、インターフェイスの定義を変更して、またそれに該当する関数の値を変更する、という形で修正部分をわかりやすくすることができます。