Possible error in data deserialization on CartForm

[porrodv]

What is the location of your example repository?

No response

Which package or tool is having this issue?

Hydrogen

What version of that package or tool are you using?

2024.1.1

What version of Remix are you using?

2.4.1

Steps to Reproduce

For example, I have a button in a component that uses useFetcher() for send data to locale cart route

<button
  type='submit'
  onClick={(e) => {
    fetcher.submit(
      {
        action: 'ActionTest',
        inputs: {
          test: ['test1', 'test2'],
        },
      },
      {
        action: '/cart',
        method: 'POST',
      },
    );
  }}
>
  <span className='cart-btn-text'>Send data</span>
</button>;

in ($locale).cart.tsx i have this action

export async function action({ request, context }: ActionFunctionArgs) {
  const { cart } = context;

  const formData = await request.formData();

  const { action, inputs } = CartForm.getFormInput(formData);
  console.log('inputs', inputs);
  console.log('action', action);

  invariant(action, 'No cartAction defined');

  // ....
 // code to update the shopify cart component (not important)
 // ....

  return json(
    ....
  );
}

The logs are this:

inputs Object {
  action: ActionTest,
  inputs: [object Object]
}
action undefined

I think it may be an error in how CartForm.getFormInput() handles the data.

This is just an example but the problem does not allow me integrate useFetcher with Shopify Hydrogen Cart.

I see the official documentation but the result is the same

https://shopify.dev/docs/api/hydrogen/2023-07/components/cartform#example-cartform-with-fetcher

Expected Behavior

Logs

inputs Object {
  lines: Array(2),
}
action LinesAdd

This is how data arrives using component

Actual Behavior

Logs

inputs Object {
  action: ActionTest,
  inputs: [object Object]
}
action undefined

[scottdixon]

Hey @porrodv

Try something like this:

fetcher.submit(
  {
    cartFormInput: JSON.stringify({
      action: 'ActionTest',
      inputs: {
        test: ['test1', 'test2'],
      },
    }),
  },
  {method: 'POST', action: '/cart'},
);