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

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

  •  1
  • 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 年前
        1
  •  4
  •   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
            }
          }
        }
      }
    }
    
        2
  •  3
  •   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;