Question

我正在使用React和GatsbyJS构建一个简单的Web应用程序，并使用NetlifyCMS来管理内容。使用gatsby-transformer-remark我使用gatsby-transformer-sharp加载包含我要加载的图片路径的数据。

所以，我已经创建了一个Image组件来接收其道具的路径：

<Image path={post.frontmatter.thumbnail} />

我希望此组件获取路径，请求使用GraphQL的gatsby-transformer-sharp节点，然后使用gatsby-img组件中返回的数据。

我对React和GatsbyJS都很陌生，所以显然我的解决方案不起作用。

import React from 'react';
import Img from 'gatsby-image';

export default class Image extends React.Component {
  render() {
    return(
      <Img
        sizes={this.props.file.childImageSharp.sizes}
      />
    );
  }
}

export const getSizesQuery = graphql`
  query GatsbyImageSampleQuery($path: this.props.path) {
      file(relativePath: { eq: $path }) {
        childImageSharp {
          sizes {
            base64
            tracedSVG
            aspectRatio
            src
            srcSet
            srcWebp
            srcSetWebp
            sizes
            originalImg
            originalName
          }
        }
      }
    }
`;

正确的方法是什么？

Answer 1

虽然我不能用你的GraphQL类型或你的apollo？安装（我建议运行查询来测试如何使用graphiql或Apollo客户端开发工具获取数据，或者首先看看你的数据是如何从graphql中解析的），但你的代码应该是这样的......

import React from 'react';
import Img from 'gatsby-image';
import { gql, graphql } from 'react-apollo'; //Apollo client

class Image extends React.Component {
  render() {
    return(
      <Img 
       // get access to the graphql data with this.props.data
        sizes={this.props.data.file.childImageSharp.sizes} 

      />
    );
  }
}

   const getSizesQuery = gql`
    query GatsbyImageSampleQuery($path: ID!) {
      file(relativePath: $path) {
        childImageSharp {
          sizes {
            base64
            tracedSVG
            aspectRatio
            src
            srcSet
            srcWebp
            srcSetWebp
            sizes
            originalImg
            originalName
          }
        }
      }
    }
`;

const ImageWithData =  graphql(getSizesQuery , {
  name : 'selectCustomer',
  options: (ownProps) => ({
    variables: {
      path: ownProps.path // set your path like this
    }
  })
})(Image);

export default ImageWithData

Answer 2

Gatsby将您的所有数据提取到其内部节点系统中，然后通过布局或页面中的查询将数据推送到仅组件中。

这个单一的输入源确保Gatsby可以将您的所有数据编译为静态JSON。 @ toufek-khoury提供的方法将向您的组件提供数据，但它将绕过Gatsby缓存。几乎在所有情况下，你都希望缓存你的数据，这就是让盖茨比如此快速难以置信的原因。

解决方案是在pageQuery。

中获取页面所需的所有数据

组件支持GraphQL

2 个答案: