Gatsby+Strapi预览跳转错误：指向单页而非列表页求助

使用Gatsby搭配Strapi，通过@strapi/plugin-gatsby-preview插件实现预览功能时，某集合类型的预览按钮点击后跳转到错误页面——本该指向对应的dynamic page set列表页，实际却跳转到单个programme页面。

查阅官方文档得知：当内容关联多个页面时，若预览跳转不符合预期，可通过createPage API的ownerNodeId指定页面归属的节点，该ID需与页面GraphQL查询对应的Gatsby node.id一致。

尝试在创建dynamic page set列表页及单个programme页面时，给嵌套循环内的createPage传入ownerNodeId，但问题仍未解决，代码如下：

data.allStrapiDynamicPageSet.edges.forEach(({ node: { id, strapi_id, pageSlug, location, programmes } }) => {
  actions.createPage({
    path: `dynamic-page-set/${strapi_id}`,
    component: path.resolve("./src/templates/dynamic-page-sets-listing.js"),
    context: {
      id: id,
    },
  });
  programmes.forEach((prog) => {
    actions.createPage({
      path: `i/${prog.progSlug}/${pageSlug}`,
      component: path.resolve("./src/templates/dynamic-page-set.js"),
      ownerNodeId: id,
      context: {
        id: id,
        progId: prog.id,
        type: "DYNAMIC_PAGE_SET",
        ProgrammeName: pageSlug,
        degreeId: prog?.degree_level?.id,
        locationId: location?.id,
      },
    });
  });
});

你的问题出在没有给dynamic page set列表页设置ownerNodeId，反而只给单个programme页面加了这个属性。

@strapi/plugin-gatsby-preview会根据Strapi内容节点关联的Gatsby页面匹配跳转目标，当一个Strapi节点对应多个Gatsby页面时，插件会优先选择带有ownerNodeId且匹配的页面，或按页面创建顺序判断。你现在只给子页面（programme）设置了ownerNodeId，导致插件认为子页面是该Strapi节点的默认预览页面，所以跳转错误。

修正方法：给dynamic page set列表页的createPage也加上ownerNodeId，同时调整子页面的ownerNodeId绑定到自身节点ID，修正后的代码如下：

data.allStrapiDynamicPageSet.edges.forEach(({ node: { id, strapi_id, pageSlug, location, programmes } }) => {
  // 给列表页添加ownerNodeId，绑定到对应的Strapi节点
  actions.createPage({
    path: `dynamic-page-set/${strapi_id}`,
    component: path.resolve("./src/templates/dynamic-page-sets-listing.js"),
    ownerNodeId: id, // 关键：给列表页设置ownerNodeId
    context: {
      id: id,
    },
  });
  programmes.forEach((prog) => {
    actions.createPage({
      path: `i/${prog.progSlug}/${pageSlug}`,
      component: path.resolve("./src/templates/dynamic-page-set.js"),
      ownerNodeId: prog.id, // 绑定到programme自身的Gatsby节点ID
      context: {
        id: id,
        progId: prog.id,
        type: "DYNAMIC_PAGE_SET",
        ProgrammeName: pageSlug,
        degreeId: prog?.degree_level?.id,
        locationId: location?.id,
      },
    });
  });
});

这样设置后，预览dynamic page set内容时会跳转到列表页，预览单个programme内容时会跳转到对应的子页面，实现正确的预览分流。

内容的提问来源于stack exchange，提问作者Marko