CODEWITHSUNDEEP
graphqlgatsbycontentful
Sergei Klinov
Sergei Klinov

Reputation: 798

Gatsby - making a dynamic query to Contentful

I'm working on a simple e-commerce based on Gatsby and Contentful. One of my pages is CartPage. So I'm trying to make a query to Contenful to get the necessary info about my products, so I want to pass a list of product ids that are in the user's cart.

Here's my component and query:

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
        }
      }
    }
  }
`;

Now all I get on a console.log(data) is undefined.

If I do the same query but with useStaticQuery with all the data hardcoded - I get the desired data. But useStaticQuery doesn't accept variables.

Am I doing something wrong here? How can I pass variables to the query and put my data to the props?

Upvotes: 0

Views: 843

Answers (1)

Sergei Klinov
Sergei Klinov

Reputation: 798

Gatsby uses GraphQL at build-time and not for live sites. as said here So it's not intended for making GraphQL queries on the go.

Upvotes: 1

Related Questions