Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Possible error in data deserialization on CartForm #2581

Open
porrodv opened this issue Oct 1, 2024 · 1 comment
Open

Possible error in data deserialization on CartForm #2581

porrodv opened this issue Oct 1, 2024 · 1 comment

Comments

@porrodv
Copy link

porrodv commented Oct 1, 2024

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
Copy link
Contributor

Hey @porrodv

Try something like this:

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants