如何从 Gatsby 中的数组正确创建重定向

Question

我正在使用 Gatsby 和 WordPress。我正在尝试使用 Gatsby 重定向 API 重定向一些 URL。我编写查询以获取对象，然后使用 Map 方法从该对象创建我们需要的项目数组。然后我运行一个 for Each 方法从该数组中获取单个数据，但它在运行开发服务器时失败。

这样做的正确方法是什么？

const { createRedirect } = actions;
  
  const yoastRedirects = graphql(`
  {
    wp {
      seo {
        redirects {
          format
          origin
          target
          type
        }
      }
    }
  }
  `)
  const redirectOriginUrls = yoastRedirects.wp.seo.redirects.map(redirect=>(redirect.origin))
  const redirectTargetUrls = yoastRedirects.wp.seo.redirects.map(redirect=>(
    redirect.target
  ))
  
  redirectOriginUrls.forEach(redirectOriginUrl=>(
    redirectTargetUrls.forEach(redirectTargetUrl=>(
      createRedirect({
        fromPath: `/${redirectOriginUrl}`, 
        toPath: `/${redirectTargetUrl}`, 
        isPermanent: true
      })
    ))
  ))
  

Answer 1

createRedirect API 需要接收如下结构：

exports.createPages = ({ graphql, actions }) => {
  const { createRedirect } = actions
  createRedirect({ fromPath: '/old-url', toPath: '/new-url', isPermanent: true })
  createRedirect({ fromPath: '/url', toPath: '/zn-CH/url', Language: 'zn' })
  createRedirect({ fromPath: '/not_so-pretty_url', toPath: '/pretty/url', statusCode: 200 })

  // Create pages
}

在您的情况下，您没有输入正确的获取数据。假设循环已正确完成，您必须这样做：

 let redirectOriginUrls=[];
 let redirectTargetUrls=[];

  yoastRedirects.data.wp.seo.redirects.map(redirect=>{
    return redirectOriginUrls.push(redirect.origin)
  });

  yoastRedirects.data.wp.seo.redirects.map(redirect=>{
    return redirectTargetUrls.push(redirect.target)
  })

代替：

  const redirectOriginUrls = yoastRedirects.wp.seo.redirects.map(redirect=>(redirect.origin))
  const redirectTargetUrls = yoastRedirects.wp.seo.redirects.map(redirect=>(
    redirect.target
  ))

注意嵌套对象中添加的.data。

此外，请记住，createRedirect API 仅在具有托管基础设施（如 AWS 或 Netlify）的情况下才能工作，它们都具有与 Gatsby 的插件集成。这将生成用于在任何静态文件主机上重定向的元重定向 HTML 文件。