Question

我们有一个用户平台项目。每个用户都有一个个人资料详细信息页面（/ {id}}，我们在创建过程中使用createPages（）创建。当登录的用户对其个人资料进行更改时，他们将保留在数据库中，但更改对他而言不可见直到再次触发构建为止。用户可能会认为自己的更改丢失并且可能会感到沮丧。我们的理想解决方案是显示动态登录的用户的个人资料。

是否可以用同一URL上的动态页面覆盖静态创建的页面？我们希望网址保持相同（/ {id}），因为该用户将与其他用户共享其链接。

// Generation of static pages
exports.createPages = async function ({ actions, graphql }) {
  const { data } = await graphql(`
    query {
      apollo {
        allProfiles {
          email
          id
        }
      }
    }
  `)
  data.apollo.allProfiles.forEach((profile) => {
    const email = profile.email
    const id = profile.id
    actions.createPage({
      path: id,
      component: require.resolve(`./src/templates/profile-detail.js`),
      context: { email: email },
    })
  })
}

Answer 1

我认为盖茨比的运作方式存在误解。就内容而言，您的页面是静态的，而就JavaScript和React的逻辑而言，它是动态的。

您的页面当前是静态的，因为您是在构建时填充组件/页面的，但是，您需要向端点发出API请求（例如，通过axios）以获取数据库中的更改，并且在JavaScript逻辑而不是服务器本身中填充React状态并显示/隐藏组件。

您的/{id}将保持不变，因为它是在createPage期间创建的，但是您将根据用户的操作添加逻辑。

Gatsby用动态页面覆盖静态页面（createPages）？

1 个答案: