Question

我知道关于这个问题有很多问题，但是老实说我无法理解任何答案。

我了解的是，所有事情都在构建时发生，而我的代码支持这一点。

我想要的是访问一个与我的数据字段“ slug”同名的文件夹。我在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},
        })
    })

  }

我在上下文中发送数据。

现在在我的组件中，我希望在查询中使用该数据以获取该页面的特定文件夹：

列表包含数据，并且在过滤器中：{relativeDirectory：{eq：我要使用它；

我已经尝试过：$ {listing.slug}，但是graphql不允许它在等式内。

我该怎么做？

查询仅从指定文件夹中获取所有文件

const Listing2 = ({listing}) => {

  const { casape } = useStaticQuery(
    graphql`
      query {
        allFile(
          sort: { fields: name, order: DESC }
          filter: { relativeDirectory: { eq: "casape" } }
        ) {
          edges {
            node {
              id
              name
              childImageSharp {
                fluid(maxWidth: 1000) {
                  ...GatsbyImageSharpFluid_withWebp_tracedSVG
                }
              }
            }
          }
        }
      }
    `
  )

然后我使用返回的那些图像来创建画廊。

我尝试过的事情：

const Listing2 = ({listing}) => {

  const query = `
  query {
    allFile(
      sort: { fields: name, order: DESC }
      filter: { relativeDirectory: { eq: "casape" } }
    ) {
      edges {
        node {
          id
          name
          childImageSharp {
            fluid(maxWidth: 1000) {
              ...GatsbyImageSharpFluid_withWebp_tracedSVG
            }
          }
        }
      }
    }
  }
  `
  query.replace("casape", listing.slug)

  const { allPhotos } = useStaticQuery(graphql`${query}`)

GraphQL传入变量进行查询

0 个答案: