如何使用“all”集合与Gatsby.js中的文件系统路由应用编程接口一起使用？

{
  resolve: "gatsby-source-filesystem",
  options: {
    name: "data",
    path: `${__dirname}/src/data/`,
  },
},

import React from "react"

const ProductTemplate = ({ pageContext }) => {
  const { product } = pageContext

  return (
    <div>
      <h1>{product.name}</h1>
      <p>{product.description}</p>
    </div>
  )
}

export default ProductTemplate

import React from "react"
import { graphql, Link } from "gatsby"

const CollectionPage = ({ data }) => {
  const { allCollectionName } = data

  return (
    <div>
      <h1>Collection Page</h1>
      <ul>
        {allCollectionName.edges.map(({ node }) => (
          <li key={node.id}>
            <Link to={`/${node.slug}`}>{node.name}</Link>
          </li>
        ))}
      </ul>
    </div>
  )
}

export const query = graphql`
  query {
    allCollectionName {
      edges {
        node {
          id
          name
          slug
        }
      }
    }
  }
`

export default CollectionPage

exports.createPages = async ({ graphql, actions }) => {
  const { createPage } = actions

  const result = await graphql(`
    query {
      allCollectionName {
        edges {
          node {
            id
            slug
          }
        }
      }
    }
  `)

  result.data.allCollectionName.edges.forEach(({ node }) => {
    createPage({
      path: `/${node.slug}`,
      component: require.resolve("./src/templates/product.js"),
      context: {
        productId: node.id,
      },
    })
  })
}