shopify storefront checkout api

[MartinVod]

Hey, I'm building a front using react and i got to the checkout.

when im fetching to create checkout as the example query everything works just fine: (using a string and not variables).

mutation {
  checkoutCreate(input: {
    lineItems: [{ variantId: "Z2lkOi8vc2hvcGlmeS9Qcm9kdWN0VmFyaWFudC8xMzg3MDQ4MzI3NTc5OA==", quantity: 1 }]
  }) {
    checkout {
       id
       webUrl
       lineItems(first: 5) {
         edges {
           node {
             title
             quantity
           }
         }
       }
    }
  }
}

when i try fethcing with variables (array of objects contain the lineItem Id and quantity) i get an error:

that's my array:

that's my query:

                const query = `mutation checkoutCreate($lineItems: (CheckoutLineItemConnection!)){
                    checkoutCreate(input: {
                        lineItems: $lineItems
                        }) {
                            checkout {
                                id
                                webUrl
                                lineItems(first: 2) {
                                edges {
                                    node {
                                        title
                                        quantity
                                    }
                                }
                            }
                        }
                    }
                }`

I know i have a syntax problem with the query im just not sure where. (my graphql understainding is limited).

any help will be much appriciated.

[MartinVod]

small update: i found the query i need and updated it to: 

                const query = `mutation checkoutCreate($lineItems: [CheckoutLineItemInput!]!){
                    checkoutCreate(input: {
                        lineItems: $lineItems
                        }) {
                            checkout {
                                id
                                webUrl
                                lineItems(first: 9) {
                                edges {
                                    node {
                                        title
                                        quantity
                                    }
                                }
                            }
                        }
                    }
                }`

but i still recieve an error Variable $lineItems of type [CheckoutLineItemInput!]! was provided invalid value

[c10s]

Here's a mutation and variable that should work (you needed a lineItems key in your variable):

mutation checkoutCreate($lineItems: [CheckoutLineItemInput!]) {
  checkoutCreate(input: {
    lineItems: $lineItems
  }) {
    checkout {
      id
      webUrl
      lineItems(first: 9) {
        edges {
          node {
            title
            quantity
          }
        }
      }
    }
  }
}

Your lineItems variable should be shaped like this:

{
  "lineItems": [
    {"variantId": "Z2lkOi8vc2hvcGlmeS9Qcm9kdWN0VmFyaWFudC8zMjUxMjY5NDg0NTU0MA==", "quantity": 1}
  ]
}

I'd personally go with just passing the entire input though, rather than just the line items:

mutation checkoutCreate($input: CheckoutCreateInput!) {
  checkoutCreate(input: $input) {
    checkout {
      id
      webUrl
      lineItems(first: 9) {
        edges {
          node {
            title
            quantity
          }
        }
      }
    }
  }
}

{
  "input": {
    "lineItems": [
      {"variantId": "Z2lkOi8vc2hvcGlmeS9Qcm9kdWN0VmFyaWFudC8zMjUxMjY5NDg0NTU0MA==", "quantity": 1}
    ]
  }
}