如何根据 PageQuery 的结果获取 Gatsby 图片？

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
        }
      }
    }
  }
}

Answer 2

这是我想出的一个解决方案...相当笨拙，但它有效：

import PropTypes from 'prop-types';
import React from 'react';
import Img from 'gatsby-image';
import { useStaticQuery, graphql } from 'gatsby';


const Image = ({ imageYouWant }) => {
  const data = useStaticQuery(
    graphql`
      query allTheImagesQuery{
        allImageSharp {
          edges {
            node {
              fluid(maxWidth:1000) {
                ...GatsbyImageSharpFluid
                originalName
              }
            }
          }
        }
      }`,
  );

  const TheImageYouWant = data.allImageSharp.edges
    .filter(edge => edge.node.fluid.originalName === imageYouWant)
    .map(myImage => <Img fluid={myImage.node.fluid} />);

  return (
    <>
      { TheImageYouWant }
    </>
  );
};


Image.propTypes = {
  imageYouWant: PropTypes.string,
};

Image.defaultProps = {
  imageYouWant: '',
};

export default Image;