graphql - 如何根据PageQuery的结果获取Gatsby Images？

Question

我想做类似以下的事情，这样我就可以动态获取 Gatsby 图片:

const image = 'gastby-astronaut.png';

export const imageQuery = graphql`
  { allImageSharp (
    filter: {
      fluid: {
        originalName: {
          regex: "/${image}/"
        }
      }
    }
  ){
  edges { 
    node {
      fluid {
        originalName
      }
    }
  }
}
}
`;

但是，我无法弄清楚如何将此查询连接到将获取“gatsby-astronaut.png”的初始查询，或从具有 .当我尝试此操作时出现此错误:

Error: BabelPluginRemoveGraphQL: String interpolations are not allowed 
in graphql fragments. Included fragments should be referenced as
 `...MyModule_foo`.

关于动态返回 Gatsby 图像的正确方法有什么建议吗？

Answer 1

啊，是的，Gatsby 通过静态分析从您的页面中提取 GraphQL 查询:它们将文件作为文本加载、解析并提取查询，所有这些都在实际文件执行之前进行。这意味着典型的标记模板文字功能不存在。

过滤的唯一方法是通过从 gatsby-node.js 调用 createPage 时提供的上下文。 IE。如果你这样做:

exports.createPages = ({ graphql, actions }) =>
  graphql(`some query here`).then(result => {
    actions.createPage({
      path: "/output-path/",
      component: path.resolve(`./src/templates/your_template.jsx`),
      context: { image: result.data.yourImage },
    })
  })

然后您可以在页面查询中执行此操作:

query SomePage($image: String!) {
  allImageSharp (
    filter: {
      fluid: {
        originalName: {
          regex: $image
        }
      }
    }
  ){
    edges { 
      node {
        fluid {
          originalName
        }
      }
    }
  }
}