App-bridge action code does not execute after calling useSubmit

Retired Boards Appdev Functions
1

When I call useSubmit, I expect the code in my action function to execute, but it does not. This is the action:

export async function action({ request }){
  await authenticate.admin(request);
  let formData = await request.formData();
  return json(await saveStockTake(formData));
}

These are the functions/components used to trigger it:


This is within the body of the component that the above code is a return statement of:

```javascript
const submit = useSubmit();

    function handleSubmit(){
      const stockTakeToSerialize = scaffoldStockTake(stockTake, resourceListItems)
      submit(stockTakeToSerialize, {method: "post"})
    }

(After calling submit, the only message I have in the console (VS code terminal that is, there’s nothing in my browser) is simply that the admin has been authenticated. BUT this is not to do with the action code of me authenticating the admin, as the terminal still shows this message without this line of code in action, so nothing is being executed)

I wouldn’t say the following is strictly relevant, but who knows, maybe there’s something I’ve missed:

function removeCircularReferences(stockTake){
  const filteredVariants = stockTake.stockTakeVariants.map(variant => {
      let filteredVariant = {
        id: variant.id, 
        stockTakeId: variant.stockTakeId, 
        quantity: variant.newInventoryQuantity
      }
      return filteredVariant;
    }
  )
  let filteredStockTake = stockTake;
  filteredStockTake.stockTakeVariants = filteredVariants;
}

function scaffoldStockTake(stockTake, resourceListItems){
  return removeCircularReferences({
    stockTakeId: stockTake.id,
    stockTakeVariants: resourceListItems
  })
}

That’s all the related code. I’m comparing this to the example project Shopify has (the QR code one), and can’t see what I’m doing differently on a fundamental level. This is their action for reference:

export async function action({ request, params }) {
  const { session } = await authenticate.admin(request);
  const { shop } = session;

  /**  {any} */
  const data = {
    ...Object.fromEntries(await request.formData()),
    shop,
  };

  if (data.action === "delete") {
    await db.qRCode.delete({ where: { id: Number(params.id) } });
    return redirect("/app");
  }

  const errors = validateQRCode(data);

  if (errors) {
    return json({ errors }, { status: 422 });
  }

  const qrCode =
    params.id === "new"
      ? await db.qRCode.create({ data })
      : await db.qRCode.update({ where: { id: Number(params.id) }, data });

  return redirect(`/app/qrcodes/${qrCode.id}`);
}

Apologies if I’ve put too much code in here, but I can’t seem to, as I’ve said, discern what I’m doing wrong here that the example project is doing correctly. I cannot find anything in the Remix or Polaris or App-Bridge documentation, nor on forums that provides an example as to what’s going on. Help would be very much appreciated. Thanks a lot!

2

Okay, so I figured it out. It was all because of how I was submitting my object.

Instead of doing this:

submit(stockTakeToSerialize, {method: "post"})

I had to create an object to encapsulate the object I wanted to pass in:

submit({stockTake: stockTakeToSerialize}, {method: "post"})

Doing this worked