posva / mande

<700 bytes convenient and modern wrapper around fetch with smart extensible defaults
https://mande.esm.is
MIT License
1.2k stars 42 forks source link

Adding a query key to the request body inserts thousands of query params to the URL #387

Open Eben-Hafkamp opened 1 year ago

Eben-Hafkamp commented 1 year ago

I'm passing a graphql query to mande like so:

import { print } from 'graphql';
import { mande, defaults } from 'mande';

// Auth headers code ...

const gql = mande(BASE_URL + API_VER);

export default (query = '', variables = {}) =>
  gql
    .post({
      query: print(query),
      variables,
    })
    .then((res) => res)
    .catch((error) => error);

However for some reason the request that is sent has thousands of parameters added to the url. Is this a conflict in naming? I can't change the convention because the request is consumed by Shopify.

This causes a preflight 414 error code, because the query params are far too long and then there is a resultant CORS issue which I think is a strange side affect error message which will be fixed once the params issue is sorted.

EDIT: I believe the issue is caused by this helper: https://posva.net/mande/mande.options.html. Can you please make it a less generic key, like queryString perhaps.

posva commented 1 year ago

This is a small bug that reuses the body as options: https://github.com/posva/mande/blob/main/src/index.ts#L263-L266

An easy workaround is to pass an empty first argument post('', { ... })

Eben-Hafkamp commented 1 year ago

Thanks @posva for the workaround suggestion, closing issue.