使用 Contentful API 在 Gatsby 中按标签对内容进行排序

Question

在 Contentful 中，我创建了一个包含少量媒体图片的内容。图片有两个不同的标签boxon 和attaqueGenetique。我想使用为每种媒体添加的标签对幻灯片进行排序，但我找不到这样做的方法。 Gatsby 网站上有一个例子，但不是很清楚，我的尝试失败了。

来自Gatsby的例子

query FilterByTagsQuery {
  allContentfulNumber(
    sort: { fields: contentful_id }
    filter: {
      metadata: {
        tags: { elemMatch: { contentful_id: { eq: "numberInteger" } } }
      }
    }
  ) {
    nodes {
      title
      integer
    }
  }
}

我想我必须将这段代码转换到我的位置 allContentfulNumber 变为 allContentfulDiaporama，并且

metadata: {
        tags: { elemMatch: { contentful_id: { eq: "numberInteger" } } }
      }

成为

metadata: {
        tags: { elemMatch: { contentful_id: { eq: "boxon" } } }
      }

但是当我尝试编译控制台时返回 56:5 error Field "metadata" is not defined by type "ContentfulDiaporamaFilterInput" graphql/template-strings

我不知道在内容中导入媒体元数据时从哪里获取元数据...但我是 graphql 和 Contentful 的初学者。如果有解决方案，那可以让我开心一天！！！

Answer 1

在 Gatsby 的示例中，metadata 是一个在其数据结构中有效的 GraphQL 节点，如果您的节点没有，请不要使用它，否则会破坏代码，因为它不是有效的自定义类型。

除了使用无效字段（metadata）之外，您的查询中的问题是您正在使用elemMatch 过滤器，将contentful_id（数字）与boxon（字符串）进行比较，所以它永远不会工作在您的场景中（它适用于 Gatsbys，因为它是同一类型）。在您的情况下，您可能希望使用 in（对于数组）或 eq（对于单个值）。查看可用列表：https://www.gatsbyjs.com/docs/graphql-reference/#filter

据我了解您的问题，您似乎想将diaporama 数据拆分为两个不同的节点，一个包含boxon，另一个包含attaqueGenetique。如果是这样，您将需要通过别名来创建不同的节点：

query FilterByTagsQuery {
  boxon: allContentfulDiaporama(
    sort: { fields: contentful_id }
    filter: {
        metadata: { tags: { in: ["boxon"]  } }
      }
  ) {
    nodes {
      #your data/fields here
    }
  }
  attaqueGenetique: allContentfulDiaporama(
    sort: { fields: contentful_id }
    filter: {
        metadata: { tags: { in: ["attaqueGenetique"]  } }
      }
  ) {
    nodes {
      #your data/fields here
    }
  }
}

在localhost:8000/___graphql 提供的 GraphiQL 游乐场中测试查询，您可以更直观地添加或删除过滤器并查看可用节点。

上面的sn-p会根据标签别名生成两种不同的数据结构。有了这个：boxon: allContentfulDiaporama，您将在boxon 中为allContentfulDiaporama 的结果添加别名，因此在您的页面中，您将能够分别直接访问props.data.boxon 和props.data.attaqueGenetique。

请记住，sort 过滤方法仅适用于日期或数值，如果是字符串，它将按字母顺序对它们进行排序。所以我假设你的数据有一个contentful_id（我不确定通过contentful_id排序会有什么帮助）。

根据pull-request，enableTags 功能已在前沿版本（5 天前）中修复，因此请尝试升级您的插件依赖项。

它似乎是固定的，根据这个GitHub thread：

gatsby-source-contentful@7.5.0-next.0

或者在下一个版本中。