Question

我需要为电子商务网站创建购物车，因此所有页面都需要访问购物车信息，因此需要Context API。问题在于，盖茨比只会获取已渲染页面或组件的信息，我似乎找不到任何方法可以从未渲染的Context组件查询我的内容数据。我尝试了很多事情，并搜索了互联网的每个角落。

有没有办法做到这一点？还是有一种不用Context API来创建购物车的方法？请记住，我没有后端经验，因此无法创建服务器来处理该问题。

P.S。当我在Context API中使用简单的访存方法时，我最终成功了，但是当我在Contentful上构建项目时，它会导致环境变量出现问题，因此，唯一的解决方案是公开API密钥，让世界看到这是一个可怕的解决方案。

Answer 1

您想要一个Static Query，它将允许您查询所有产品数据，使其在客户端可用。我建议您使用自定义的React Hook，而不是使用React Context，它可以让您将数据导入所需的位置，并让Webpack处理分块和加载。

这是一个带有伪造模式的示例：

import { useStaticQuery, graphql } from "gatsby"

const useProductData = (id) => {
  const { data: { products } } = useStaticQuery(graphql`
    {
      data: allContentfulProduct {
        products: nodes {
          id
          name
          price
        }
      }
    }
  `)

  // Wee little usage nicety here to only return the relevant product
  // if an id is passed into the hook arguments.
  return id ? products.find(product => product.id === id) : products
}

const CartProduct = ({ productId }) => {
  const product = useProductData(productId)
  return (
    <div>
      {name} ${price.toFixed(2)}
    </div>
  )
}

是否可以通过React Context API使用Gatsby页面查询或静态查询？

1 个答案: