有没有办法将Gatsby页面查询或静态查询与React上下文API一起使用？

Question

我需要为一个电子商务网站创建购物车，所以所有的页面都需要有权访问购物车信息，因此需要的上下文API。问题是Gatsby只会获取呈现的页面或组件的信息，我似乎找不到任何方法来从未呈现的上下文组件中查询我满意的数据。我尝试了很多东西，搜索了互联网的每一个角落。

有没有办法做到这一点？或者有没有一种方法可以在没有上下文API的情况下创建购物车？请记住，我没有后端经验，因此无法创建服务器来处理这一问题。

另外，当我在Context API中使用一个简单的fetch方法时，我最终成功了，但是当我在Contentful上构建项目时，它会导致环境变量的问题，所以唯一的解决方案是向世界公开API键，让世界看到??，这是一个非常糟糕的解决方案。

Answer 1

您需要一个Static Query，它允许您查询所有产品数据，使其在客户端可用。与其使用React上下文，我建议使用一个自定义的React Hook，它将允许您在需要的地方导入数据，并让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>
  )
}