Gatsby createPage 操作与 {page.slug}.js

Question

在 Gatsby 中使用 createPage 创建静态页面与使用 {page.slug}.js 创建静态页面的主要区别是什么。我找不到任何关于此的文档，所以除了鼓励使用 {page.slug}.js 格式的文档之外，我不确定要搜索什么。

Answer 1

简短回答：使用 gatsby-node.js 和文件系统路由 API ({page.slug}.js) 之间没有任何区别，它们是实现相同结果的不同方式：动态路由。

TL;DR

File System Route API 增加了在大多数情况下使用 gatsby-node.js 创建动态页面所缺乏的简单性。对于简单的用例，我会说最好使用文件系统路由 API 但是，由于一些已知的限制，对于某些复杂的场景，最好使用 gatsby-node.js （也许它是唯一的方法）。

文件系统路由 API 始终按 id 过滤，如您在 docs:

中所见

allProduct {
  nodes {
    id # Gatsby always queries for id
    fields {
      sku
    }
  }
}

它可能适用于您的场景，但如果您需要更复杂的过滤，文件系统路由 API 可能不适合。

例如，如果您正在写博客，您可能会认为文件系统路由 API 适合您，而且它可能是。但是，如果在某些时候您想根据复杂的自定义值过滤页面创建一些 posts（即：检查 post 的日期是否为典型的 isFuture 字段过去或现在，它是根据 GraphQL 模式创建的），您会发现文件系统路由的“局限性”API。

最终还是要看自己选择哪种填充物更适合自己。

总结（很多）...

文件系统路由API

简单：你摆脱了gatsby-node.js和相关的代码
限制：
- 始终查询 id
- 无法将自定义属性传递给 view/template
- 根据先前查询的结果创建动态路径段的潜在问题
相同属性的路径创建有点复杂（即：slug）：在这种情况下，您需要为每个属性（docs)

`gatsby-node.js`

“复杂性”：您总是有一个包含所有查询的 gatsby-node.js 文件
易于操作页面创建 (createPage) 并使用 pageContext 向下钻取任何对象或变量，这为您提供了很大的灵活性。
基于任何期望值的路径创建很容易实现。

Gatsby createPage 操作与 {page.slug}.js

Gatsby createPage actions vs {page.slug}.js

reactjs

gatsby

TL;DR

总结（很多）...

文件系统路由API

`gatsby-node.js`