Tailwind Logo

メディア、ブログのクエリに関して不足項目を追加する

Content Hub ONE

公開日: 2024-08-08

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

共通項目の定義を追加する

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 に関して処理を追加していくうえで、クエリを作成する際に利用しやすいように、共通の項目は別に呼び出しをしやすくしました。これにより、今後作成するコンポーネントに対して個別の影響は最小限にして、項目や処理の更新を柔軟にできるようになりました。

関連タグ