Gatsby - 对 Contentful 进行动态查询

Question

我正在研究一个基于Gatsby和Contentful的简单电子商务。 我的一个页面是CartPage。 因此，我正在尝试进行查询以Contenful以获取有关我的产品的必要信息，因此我想传递用户购物车中的产品ID列表。

这是我的组件和查询：

export interface CartPageProps {
data: {
products: GQL.ContentfulProductConnection;
};
}
const CartPage = ({ data }: CartPageProps) => {
const mockCart = [1, 2];
console.log(data);
return (
<IndexLayout>
<Page>
//
// Layout goes here
//
</Page>
</IndexLayout>
)
}
export default CartPage;
const pageQuery = graphql`
query ProductsInCart($mockCart: [Int], $lang: String) {
products: allContentfulProduct(filter: { idProduct: { in: [1, 2] }, node_locale: { eq: "en" } }) {
edges {
node {
id
idProduct
price
title
quantity
photo {
resize(height: 200, width: 200) {
src
}
}
slug
}
}
}
}
`;

现在我console.log(data)得到的只是undefined.

如果我执行相同的查询，但使用硬编码的所有数据useStaticQuery- 我会得到所需的数据。但useStaticQuery不接受变量。

我在这里做错了什么吗？如何将变量传递给查询并将我的数据放入 props？

Answer 1

Gatsby 在构建时使用 GraphQL，而不是用于实时站点。 正如这里所说 因此，它不是为了随时随地进行 GraphQL 查询而设计的。