代码之家 › 专栏 › 技术社区 › Eric Johnson

如何根据PageQuery的结果获取盖茨比图像?

gatsby

Eric Johnson · 技术社区 · 6 年前

我想做如下事情,这样我就可以动态地获得盖茨比的图像:

const image = 'gastby-astronaut.png';

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

然而,我不知道如何将这个查询连接到一个初始查询,从而得到“盖茨比宇航员”。png',或从具有。当我尝试此操作时,会出现以下错误:

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

关于动态返回盖茨比图像的正确方法有什么建议吗?

1 回复 | 直到 6 年前

coreyward 5 年前

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

过滤的唯一方法是在需要时通过上下文提供 createPage 是从 gatsby-node.js .即,如果您这样做:

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

Eric Johnson 6 年前

我想出了一个解决办法。。。很简陋,但它很管用:

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;