Invalid value error from Storefront API

[ason-dev]

I'm building a Hydrogen store. I'm running into a storefront api error attempting to update a product's quantity with Remix's useFetcher. My code looks like this:

import {useState} from 'react';
import {Listbox} from '@headlessui/react';
import {CartForm} from '@shopify/hydrogen';
import {useFetcher} from '@remix-run/react';

export default function QuantityPicker({line}) {
  if (!line || typeof line?.quantity === 'undefined') return null;

  const fetcher = useFetcher();

  const {id: lineId, quantity, attributes, merchandise} = line;
  const {id: merchId} = merchandise;

  const [selected, setSelected] = useState(quantity);

  const buildFormInput = (qty) => ({
    action: CartForm.ACTIONS.LinesUpdate,
    inputs: [
      {
        id: lineId,
        merchandiseId: merchId,
        quantity: qty,
        attributes: attributes,
      },
    ],
  });

  return (
    <Listbox
      value={selected}
      onChange={(qty) => {
        if (qty === selected) {
          return;
        }
        fetcher.submit(
          {
            [CartForm.INPUT_NAME]: JSON.stringify(buildFormInput(qty)),
          },
          {method: 'POST', action: '/cart'},
        );
        setSelected(qty);
      }}
    >
      {/* listbox component options */}
    </Listbox>
  );
}

And this is the error I'm getting:

[h2:error:storefront.mutation] Variable $lines of type [CartLineUpdateInput!]! was provided invalid value - Request ID: 50a9b037-4794-4489-9b90-53981xxxxxxx

Can anyone tell what I might be getting wrong? I've gotten this to work in GraphiQL, but struggling to get it working in my store code.

Thanks for any suggestions

[SBD_]

Hey @ason-dev 

What do you see when you log this piece?

{
    action: CartForm.ACTIONS.LinesUpdate,
    inputs: [
      {
        id: lineId,
        merchandiseId: merchId,
        quantity: qty,
        attributes: attributes,
      },
    ],
}

Are you able to provide a full request ID? I can take a look at the request in the logs.

[ason-dev]

Hi Scott, here's the output of logging that:

{
  "action":"LinesUpdate",
  "inputs":[{
    "id":"gid://shopify/CartLine/525cb323-9429-4094-8ec0-2d54ef1481d0?cart=c1-24d8df314b88afecf86410da54b9f9ce",
    "merchandiseId":"gid://shopify/ProductVariant/46243164225840",
    "quantity":2,
    "attributes":[{"key":"Case engraving","value":"John Doe"}]
  }]
}

And here's a full error message with a request ID:

[h2:error:storefront.mutation] Variable $lines of type [CartLineUpdateInput!]! was provided invalid value - Request ID: af30a7d0-4bb4-472e-a65c-5e9198f2daec

Thanks for looking into this!

[SBD_]

Thanks @ason-dev - looking ok so far. Can I trouble you for one more request ID please? Our log retention period is only three days and I've just come back to this. Sorry and thanks!

[ason-dev]

No problem, here's a fresh one.

[h2:error:storefront.mutation] Variable $lines of type [CartLineUpdateInput!]! was provided invalid value - Request ID: ec2d588f-b621-40c8-b065-69ebda63aea2

[SBD_]

Thanks @ason-dev! On our end, the mutation/variables look like this:

mutation cartLinesUpdate(
  $cartId: ID!
  $lines: [CartLineUpdateInput!]!
  $language: LanguageCode
  $country: CountryCode
) @inContext(country: null, language: null) {
  cartLinesUpdate(cartId: null, lines: null) {
    cart {
      ...CartApiMutation
    }
    errors: userErrors {
      ...CartApiError
    }
  }
}
fragment CartApiMutation on Cart {
  id
  totalQuantity
}
fragment CartApiError on CartUserError {
  message
  field
  code
}

// Variables:
{
  cartId: "gid://shopify/Cart/c1-24d8df314b88afecf86410da54b9f9ce",
  country: "US",
  language: "EN",
}

Note the `lines` variable is missing.

Hope this helps you debug. If you get stuck I'm happy to take a look at your application code.

[ason-dev · Accepted solution]

Thanks for the nudge in the right direction Scott, I'm new to GraphQL and though it seems obvious now, it hadn't occurred to me that the CartLinesUpdate mutation was sort of spelling out the shape of the inputs it needed. 

mutation cartLinesUpdate(
  $cartId: ID!
  $lines: [CartLineUpdateInput!]!
  $language: LanguageCode
  $country: CountryCode
) @inContext(country: null, language: null) {
  ...
}

I updated the shape of the inputs object that I am passing, and it's working now. Here's what it looks like now:

import {useState} from 'react';
import {Listbox} from '@headlessui/react';
import {CartForm} from '@shopify/hydrogen';
import {useFetcher} from '@remix-run/react';

export default function QuantityPicker({line}) {
  if (!line || typeof line?.quantity === 'undefined') return null;

  const fetcher = useFetcher();

  const {id: lineId, quantity, attributes, merchandise} = line;
  const {id: merchId} = merchandise;

  const [selected, setSelected] = useState(quantity);

  const buildFormInput = (qty) => ({
    action: CartForm.ACTIONS.LinesUpdate,
    inputs: {
      lines: [
        {
          attributes: attributes,
          id: lineId,
          merchandiseId: merchId,
          quantity: qty,
        },
      ],
    },
  });

  return (
    <Listbox
      value={selected}
      onChange={(qty) => {
        if (qty === selected) {
          return;
        }
        fetcher.submit(
          {
            [CartForm.INPUT_NAME]: JSON.stringify(buildFormInput(qty)),
          },
          {method: 'POST', action: '/cart'},
        );
        setSelected(qty);
      }}
    >
        {/* rest of listbox component */}
    </Listbox>
  );
}