Get Array of All Existing Page Routes in Gatsby

user_13059144 0
Viewed 558

I'm making a 404 page in Gatsby and I want to give the user a suggestion for a similar path name based on the path they have gone to (which doesn't exist). How do I get an array of all the existing pages in my website?

gatsby server-side-rendering reactjs html javascript
1 Answers

Gatsby exposes information about every page you tell it about (either via the pages folder or the createPage API) as a GraphQL field called allSitePage. I tend to create a hook like this on most of my projects so it's easy to get at this information:

import { graphql, useStaticQuery } from "gatsby"

const useInternalPaths = () => {
  const {
    pages: { nodes },
  } = useStaticQuery(graphql`
    {
      pages: allSitePage {
        nodes {
          path
        }
      }
    }
  `)

  return nodes.map(node => node.path)
}
user_2031300
Related