0

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

因此，我创建了一个 Image 组件来接收其道具的路径：

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

我希望这个组件获取路径，gatsby-transformer-sharp使用 GraphQL 请求一个节点，然后在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
          }
        }
      }
    }
`;

这样做的正确方法是什么？

4

2 回答 2

1

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

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

解决方案是在pageQuery.

于 2018-02-19T15:43:20.413 回答
1

虽然我不能你的 GraphQL 类型或你的阿波罗？设置（我建议运行查询以测试如何使用 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
于 2018-01-29T17:48:41.517 回答