Question

我正在基于一些数据创建页面。

进行查询

我从gatsby-node.js文件中传递数据，然后在模板中进行查询：

gatsby-node.js

exports.createPages = ({ actions }) => {
    const data = require("./src/data/data.json")
    const { createPage } = actions
    data.forEach(data => {
        createPage({
            path: `/${data.slug}/`,
            component: require.resolve('./src/templates/listing-template.js'),
            context:{data,
            slug: data.slug}, // slug is the folder name of images, same as the path slug
        })
    })

  }

如以上链接所述：

请注意，您可以使用上下文中的$ slug值作为参数进行查询，以确保您仅返回与该特定页面匹配的数据。

我在下面所做的正是：奇怪的是，当我从上下文中提取文件时，该文件显示该文件为未使用，

然后我将该查询结果发送到我的某些组件。

listing-template.js

import React from "react"
import Listing2 from "../components/listing2"
import Slick from "../components/slickgallery"
export default ({ pageContext: { data, slug } }) => (

    <div>
   <p>{data.name}</p>
   <p>{data.slug}</p>
    <Slick data = {query.allFile}/>
    <Listing2 listing = {data} />
   </div>
)
export const { query } = 
    graphql`
      query QueryImages($slug: String!) {
        allFile(
          sort: { fields: name, order: DESC }
          filter: { relativeDirectory: { eq: $slug } }
        ) {
          edges {
            node {
              id
              name
              childImageSharp {
                fluid(maxWidth: 350, maxHeight: 250) {
                  ...GatsbyImageSharpFluid
                }
              }
            }
          }
        }
      }
    `

问题是查询不返回任何内容。错误是：allFile未定义

使用GraphQL从数据Gatsby以编程方式创建页面的问题

0 个答案: