时间戳

首页 > 解决方案 > 具有单个 JSON 文件的 Gatsby createPages 不会刷新数据更改

reactjs - 具有单个 JSON 文件的 Gatsby createPages 不会刷新数据更改

问题描述

我正在尝试使用 Gatsby 从单个 JSON 文件动态创建页面，而不使用 GraphQL。

该works.json文件如下所示：

[
  {
    "title": "Client Name",
    "slug": "client-name",
    "abstract": "some description in here",
    "src": "img01",
    ...
  },
  {
    "title": "Client Name 2",
    "slug": "client-name-2",
    "abstract": "some description in here",
    "src": "img02",
    ...
  },
  ...
]

然后我像这样创建了正确的操作gatsby-node.js：

exports.createPages = ({ actions: { createPage } }) => {
  const projects = require("./src/data/works.json")
  projects.forEach(project => {
    createPage({
      path: `/project/${project.id}`,
      component: require.resolve("./src/templates/project.js"),
      context: project,
    })
  })
}

一切运行良好，所有数据都根据我设计模板的方式显示，除非我更改任何字符串works.json，显示页面上没有任何变化。

要查看我必须杀死的更改gatsby development server，清除.cachewithgatsby clean并重新启动gatsby develop。

有什么我做错了吗？对我来说似乎很奇怪，createPages因为 Gatsby 检测到更改并自行刷新，所以当数据更改时无法动态工作......

我在用着gatsby: 2.25.3

标签： reactjsgatsby

解决方案

Gatsby 将在您使用 GraphQL 时刷新更改，因为它可以跟踪您所做的更改。这是 Gatsby 的预期用途，很少有理由不使用 GraphQL。

通过您project的context用户将下载project页面访问中的所有数据，即使您可能只使用其中的一部分。

您可以在此处阅读有关缺点的更多信息：https ://www.gatsbyjs.com/docs/creating-and-modifying-pages#trade-offs-of-querying-for-all-fields-in-the-context-object -of-gatsby-nodejs

推荐阅读