useFetcher can't send array

[Klinopra]

Hi, i can't send data to my routes from within components. It converts my array to a string. This is my code:

in my component "ProductDetails.tsx":

 const {submit, data} = useFetcher();
  const path = usePrefixPathWithLocale(`/api/product-hotspots`);

  useEffect(() => {
    submit(
      {productGids: productGids, productVariantGids: productVariantGids}, // **Variant ids is an array here: [gid://355, gid://354"]**
      {method: 'post', action: path},
    );
  }, [submit]);

and inside my route "api/product-hotspots:

export const action: ActionFunction = async ({
  request,
  context: {storefront},
}) => {
  const formData = await request.formData();

  const ids = formData.getAll('productGids');
  const variantIds = formData.get('productVariantGids');

  console.log(variantIds); // "gid://355,gid://354", **now its no longer an array.**

[davidhousedev]

I think submit can accept a FormData object, which will let you add the data I to it such that it can be returned as an array by getAll. Maybe that helps?

[lawcommerce]

[davidhousedev]

Hmmm. Have you considered using fetcher.Form and hidden inputs instead of calling submit via JavaScript?