graphql 标签中不允许使用 GraphQL 字符串插值

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 不允许它在 eq 中。

我怎样才能做到这一点？

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

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 { 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
                }
              }
            }
          }
        }
      }
    `
  )

我也尝试使用方法 graphQl(query, parameters: {slug : listing.slug}}

并且做了

query Name($id = String!){
    allFile(
      sort: { fields: name, order: DESC }
      filter: { relativeDirectory: { eq: $id
 } }

但我不确定。