Gatsby WordPress - Graphql 分页分类

Question

有什么方法可以让我有一个查询并且 gatsby-paginate 为所有类别创建所有分页？

而不是这样做，我必须为每个类别手动创建查询。

gatsby-node.js

graphql(queryCatUncategorized).then(result => {
    if (result.errors) {
        console.log(result.errors)
        reject(result.errors)
    }
    createPaginatedPages({
        edges: result.data.allWordpressPost.edges,
        createPage: createPage,
        pageTemplate: "src/templates/category.js",
        pageLength: 2,
        pathPrefix: "uncategorized",
    })
    // END Paginate Categories - Uncategorized
})

反正我可以这样做吗？

.then(() => {
    return graphql(`
      {
        allWordpressCategory(filter: { count: { gt: 0 } }) {
          edges {
            node {
              id
              name
              slug
            }
          }
        }
allWordpressPost(filter: {categories: {elemMatch: {slug: {eq: "uncategorized"}}}}) {
          edges {
          node {
            id
            slug
            title
            categories {
              name
              slug
            }
          }
        }
      }
      }
    `)
})
    .then(result => {
        if (result.errors) {
            result.errors.forEach(e => console.error(e.toString()))
            return Promise.reject(result.errors)
        }

        const categoriesTemplate = path.resolve(`./src/templates/category.js`)

        // Create a Gatsby page for each WordPress Category
        _.each(result.data.allWordpressCategory.edges, ({ node: cat }) => {
            createPaginatedPages({
                edges: result.data.allWordpressPost.edges,
                createPage: createPage,
                pageTemplate: categoriesTemplate,
                pageLength: 2,
                pathPrefix: `/category/${cat.slug}`
            })
        })
    })

问题在于，

这只会返回未分类类别下的帖子。

allWordpressPost(filter: {categories: {elemMatch: {slug: {eq: "uncategorized"}}}}) {

删除过滤器将显示所有帖子。

allWordpressPost {

这行不通

allWordpressPost(filter: {categories: {elemMatch: {slug: {eq: "$slug"}}}}) {

几天前我刚开始学习 Gatsby，我完全是 JavaScript 和 React 的菜鸟，所以请放轻松。

提前致谢。

Answer 1

如果不推断架构并使其适应您的需求，您就无法直接使用 GraphQL。在 GraphQL 之外，您可以做的一件简单的事情是使用 JavaScript 过滤并创建一个有效对象，以便与 createPaginatedPages 一起使用。

您已经列出了allWordpressCategory.edges.node.slug 中的所有类别，所以：

let allCategories=[];

allWordpressPost.edges.map(post=> {
    post.category && allCategories.push(post.category);

    return new Set (allCategories);
});

基本上，遍历所有帖子并填充类别数组 (allCategories)，并返回 new Set（以避免重复结果）将创建一个有效的类别数组，您可以循环创建类别页面.

这行不通

allWordpressPost(filter: {categories: {elemMatch: {slug: {eq: "$slug"}}}}) {}

正如我所说，在不更改 GraphQL 架构的情况下，将数据传递给 GraphQL 查询的唯一方法是使用context，而不是嵌套查询。使用上下文将允许您将数据传递给模板查询，但在这种情况下，由于您在创建页面之前需要数据，因此它不适用于您的用例。