node.js - How can I properly create redirects from an array in Gatsby

Question

I am working with Gatsby and WordPress. I am trying to redirect some URLs using the Gatsby redirect API. I write the query to get an Object and then I use the Map method to create an array of the items we need from that object. I then run a for Each method to get the individual data from that array but it fails on running the development server.

What is the Right way to do this?

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
      })
    ))
  ))
  

question from:https://stackoverflow.com/questions/65835848/how-can-i-properly-create-redirects-from-an-array-in-gatsby

Answer 1

The createRedirect API needs to recieve a structure like:

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
}

In your case, you are not entering to the correct fetched data. Assuming that the loops are properly done, you must do:

 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)
  })

Instead of:

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

Notice the .data addition in the nested object.

In addition, keep in mind that the createRedirect API will only work only when having a hosting infrastructure behind, like AWS or Netlify, both have plugins integration with Gatsby. This will generate meta redirect HTML files for redirecting on any static file host.