Проблема с созданием страниц из данных программно Gatsby с GraphQL - PullRequest
Новая
       11

Проблема с созданием страниц из данных программно Gatsby с GraphQL

0 голосов
/ 26 октября 2019

Я создаю страницы на основе некоторых данных.

Я пытаюсь выполнить запрос, как показано в Гэтсби создает страницы из данных

Я передаю свои данные из Гэтсби-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 из своего контекста в качестве аргумента, который гарантирует, что вы возвращаете только те данные, которые соответствуют этой конкретной странице.

Точночто я сделал ниже: странно то, что слаг показывает как неиспользуемый в файле, когда я извлекаю их из контекста, я не знаю, что думать

  • Затем я отправляю результаты этого запросак некоторым из моих компонентов.

перечисление-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 не определено

...