如何在类组件的 gatsby 中使用 useStaticQuery？答案

【问题标题】：How can I use useStaticQuery in gatsby in Class Component?如何在类组件的 gatsby 中使用 useStaticQuery？
【发布时间】：2019-07-08 14:58:57
【问题描述】：

我正在尝试在 gatsby 中集成 Slick 滑块，并通过自定义代码触发 slick 方法。

我尝试编写类组件，但在如何从 shiopify 获取 GraphQL 产品列表和创建产品滑块时遇到问题。任何帮助，将不胜感激。

我正在使用 gatsby-shopify-starter 开发一个电子商务项目

//import statements

export default class ProductSimilar extends Component {
  constructor(props) {
    super(props);
    this.next = this.next.bind(this);
    this.previous = this.previous.bind(this);
  }


  next() {
    this.slider.slickNext();
  }
  previous() {
    this.slider.slickPrev();
  }
  render() {
    const data = useStaticQuery(
        graphql`
          query {
            allShopifyProduct(
              limit: 10,
              sort: {
                fields: [createdAt]
                order: DESC
              }
            ) {
              edges {
                node {
                  id
                  title
                  handle
                  createdAt
                  images {
                    id
                    originalSrc
                    localFile {
                      childImageSharp {
                        fluid(maxWidth: 910) {
                          ...GatsbyImageSharpFluid_withWebp_tracedSVG
                        }
                      }
                    }
                  }
                  variants {
                    price
                  }
                }
              }
            }
          }
        `
      )

    var settings = {
        dots: false,
        infinite: true,
        speed: 500,
        slidesToShow: 4,
        slidesToScroll: 4
      };
    return (
        <div class="section fbt four-product-slider">
        <div class="ol-container">
            <div class="top">
                <div class="titles">
                    <div class="section-title underline">You May Also Like</div>
                </div>
                <div class="pagination slider-1">
                    <div class="arrow left prev-slide-ftb" id="slider1prev" onClick={this.previous}><a class="bx-prev" href=""><i></i></a></div>
                    <div class="text"><span class="current-idx">1</span> / <span class="total-slides">4</span></div>
                    <div class="arrow right next-slide-ftb" id="slider1next" onClick={this.next}><a class="bx-next" href=""><i></i></a></div>
                </div>
            </div>

            <div class="bx-wrapper slider-1">
                <div class="bx-viewport" aria-live="polite">
                    <div class="slider-container slider-1">
                        <div class="slide bx-clone" aria-hidden="true">
                            <Slider ref={c => (this.slider = c)} {...settings}>
                                {data.allShopifyProduct.edges.map(x => (
                                    <div>Each product data</div>
                                ))}
                            </Slider>
                        </div>
                    </div>
                </div>
                <div class="bx-controls"></div>
            </div>
        </div>
    </div>
    );
  }
}

我想使用 GraphQL 获取数据

【问题讨论】：

标签： reactjs gatsby slick.js

【解决方案1】：

useStaticQuery 只能在功能组件内部使用。您需要使用StaticQuery 组件，如

export default class ProductSimilar extends Component {
  constructor(props) {
    super(props);
    this.next = this.next.bind(this);
    this.previous = this.previous.bind(this);
  }


  next() {
    this.slider.slickNext();
  }
  previous() {
    this.slider.slickPrev();
  }
  render() {
    var settings = {
        dots: false,
        infinite: true,
        speed: 500,
        slidesToShow: 4,
        slidesToScroll: 4
      };
    return (
        <div class="section fbt four-product-slider">
        <div class="ol-container">
            <div class="top">
                <div class="titles">
                    <div class="section-title underline">You May Also Like</div>
                </div>
                <div class="pagination slider-1">
                    <div class="arrow left prev-slide-ftb" id="slider1prev" onClick={this.previous}><a class="bx-prev" href=""><i></i></a></div>
                    <div class="text"><span class="current-idx">1</span> / <span class="total-slides">4</span></div>
                    <div class="arrow right next-slide-ftb" id="slider1next" onClick={this.next}><a class="bx-next" href=""><i></i></a></div>
                </div>
            </div>

            <div class="bx-wrapper slider-1">
                <div class="bx-viewport" aria-live="polite">
                    <div class="slider-container slider-1">
                        <div class="slide bx-clone" aria-hidden="true">
                            <StaticQuery
                              query={graphql`
                                query {
                                  allShopifyProduct(
                                    limit: 10,
                                    sort: {
                                      fields: [createdAt]
                                      order: DESC
                                    }
                                  ) {
                                    edges {
                                      node {
                                        id
                                        title
                                        handle
                                        createdAt
                                        images {
                                          id
                                          originalSrc
                                          localFile {
                                            childImageSharp {
                                              fluid(maxWidth: 910) {
                                                ...GatsbyImageSharpFluid_withWebp_tracedSVG
                                              }
                                            }
                                          }
                                        }
                                        variants {
                                          price
                                        }
                                      }
                                    }
                                  }
                                }
                              `}
                              render={data => (
                                 <Slider ref={c => (this.slider = c)} {...settings}>
                                    {data.allShopifyProduct.edges.map(x => (
                                        <div>Each product data</div>
                                    ))}
                                </Slider>
                              )}
                            />

                        </div>
                    </div>
                </div>
                <div class="bx-controls"></div>
            </div>
        </div>
    </div>
    );
  }
}

【讨论】：