В теге 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},
        })
    })

  }

Я отправляю данныев контексте.

Теперь в моем компоненте я хочу, чтобы эти данные использовались в запросе для получения конкретной папки для этой страницы:

список содержит данныеи в filter: {lativeDirectory: {eq: я хочу его использовать;

я пробовал: $ {list.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
                }
              }
            }
          }
        }
      }
    `
  )

Затем я использую эти возвращенные изображения для создания галереиway.

Что я пробовал:

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 (запрос, параметры: {slug: перечисление.slug}}

и сделал

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

Но я получаю неопределенность.