【问题标题】:How do I work with the 'all' collections to use with the File System Route API in Gatsby.js?如何使用“所有”集合以与 Gatsby.js 中的文件系统路由 API 一起使用?
【发布时间】:2021-04-23 07:43:43
【问题描述】:

我希望与 Gatsby.js 的 File System Route API 合作,从私有 GraphQL API 中的集合生成页面。似乎文件系统路由 API 总是使用“全部”收集请求来生成这些(allFileallSiteallPost 等)。

因为我的数据来自单独的 API,所以 Gatsby 的架构中没有等效的“全部”集合,而且我的数据也在 gatsby-source-graphql 插件的字段内命名空间。

是否可以定义我自己的“所有”集合供 Gatsby 使用?我想将allFacilities 别名为my-remote-api { facilities },但我不确定这是否可行。

如果没有,还有其他方法吗?

【问题讨论】:

    标签: javascript graphql gatsby


    【解决方案1】:

    文件系统路由 API 是由 Gatsby (^2.26.0) 开发的新品牌,用于动态创建页面,删除了 gatsby-node.js 的 GraphQL 查询并在 /pages 文件夹中使用语法符号 ({}, []() 等)。

    根据您的用例,您需要通过添加前缀“all”关键字来推断和修改架构(可能使用来自gatsby-node-helpers packagecreateNodeFactorycreateNodeHelpers,在不确切知道您的数据架构和结构的情况下很难猜一个示例代码),但想法是:

      const nodeHelpers = createNodeHelpers({
        typePrefix: 'Shopify',
        createNodeId,
        createContentDigest,
      })
    }
    

    默认情况下,这将作为“all”关键字的前缀,创建一个allShopify 节点,可供文件系统路由 API 查询和使用。

    另一方面,有一种“旧”方式:在 gatsby-node.js 中使用 GraphQL,使用 createPage API 动态创建页面,使用上下文传递数据(通常是唯一标识符),并且在模板,使用另一个按该唯一值过滤的查询来获取您的数据(即:在gatsby-node.js 文件中,您查询所有帖子并使用 slug 值为每个帖子动态创建页面(使用createPage API)。然后,您使用上下文传递一个标识符(slug 或标题),并在您的模板中(不是 /pages 作为文件系统路由 API)通过此唯一值创建过滤查询以获取您的帖子数据)。

    如果您无法使用帮助程序自定义节点,则第二种方法可能符合您的要求。在这里你有一个guide provided by Gatsby docs about that part

    【讨论】:

      猜你喜欢
      • 2013-06-09
      • 2021-07-07
      • 1970-01-01
      • 2019-12-22
      • 2021-04-22
      • 2010-12-14
      • 2017-09-20
      • 1970-01-01
      • 2016-09-14
      相关资源
      最近更新 更多