title: Gatsby - making a dynamic query to Contentful
body: <p>I'm working on a simple e-commerce based on <code>Gatsby</code> and <code>Contentful</code>.
  One of my pages is <code>CartPage</code>.
  So I'm trying to make a query to <code>Contenful</code> 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.</p>
  
  <p>Here's my component and query:</p>
  
  <pre><code>export interface CartPageProps {
    data: {
      products: GQL.ContentfulProductConnection;
    };
  }
  
  const CartPage = ({ data }: CartPageProps) =&gt; {
  
    const mockCart = [1, 2];
    console.log(data);
  
     return (
      &lt;IndexLayout&gt;
        &lt;Page&gt;
        //
        // Layout goes here
        //
        &lt;/Page&gt;
      &lt;/IndexLayout&gt;
      )
  }
  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
          }
        }
      }
    }
  `;
  
  </code></pre>
  
  <p>Now all I get on a <code>console.log(data)</code> is <code>undefined</code>.</p>
  
  <p>If I do the same query but with <code>useStaticQuery</code> with all the data hardcoded - I get the desired data. But <code>useStaticQuery</code> doesn't accept variables.</p>
  
  <p>Am I doing something wrong here? How can I pass variables to the query and put my data to the props?</p>