web-dev-qa-db-ja.com

Gatsby.js：ネストされたオブジェクトプロパティでGraphQLクエリをフィルタリングする

私は、それぞれ1人または複数の著者がいる記事を掲載するニュースサイトに取り組んでいます。著者の名前をクリックすると、その著者の情報と投稿した記事のリストを表示するページに移動します。

したがって、各記事にはauthorsプロパティがあり、これは次のプロパティを持つauthorオブジェクトの配列です：フルネーム、スラッグ（スペースがダッシュに置き換えられたフルネームの小文字バージョン）など。

クエリを定義するときに、特定の作成者のスラッグで記事をフィルタリングすることは可能ですか？

query authorQuery($slug: String!) {
  allContentfulArticle(filter: { //not sure what to do here }) {
    edges {
      node {
        title
        slug
        authors {
          name
          slug
        }
      }
    }
  }
}

私の他のオプションは、すべての記事をロードしてから、次のようにコンポーネントにフィルターを設定することです。

const articles = data.allContentfulArticle.edges.filter(({ node }) => {
  return node.authors.some((author) => author.slug === data.contentfulAuthor.slug);
});

これは世界の終わりではありませんが、必要なデータのみをロードするというGraphQLの原則に反します。

filtergraphqlgraphql-jscontentfulgatsby
7
dougmacklin

私が正しく理解していれば、ここで達成したいことは、著者ごとに記事をグループ化することです。次のように、クエリを実行してallContentfulAuthorにフィルタを適用し、articleフィールドをリクエストすると、これを実現できます。

{
  allContentfulAuthor(filter: {slug: {eq: "myslug"}}) {
    edges {
      node {
        name
        article {
          title
          slug
        }
      }
    }
  }
}

article名は、記事のcontentTypeIdであることに注意してください。

4
Khaled Garbaya