unjs / unjs/ofetch

ParamSerializer for onRequest (interceptor) destructing string (ufo.withQuery)

Open
#119 6 comments 9 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

upstream
Dominant language
TypeScript
Stars
5.4k
Forks
195
PR merge metrics
No merged PRs in 30d

Description

As Axios does have the paramsSerializer I wanted to recreate this behaviour in combination with qs.
To achieve this I've created an $fetch instance:

export const apiConfig = {
    baseURL: 'https://jsonplaceholder.typicode.com',
    onRequest: ({ options }) => {
        options.params = qs.stringify(options.params, { arrayFormat: 'comma', encode: false  })
    }
}

The request params:

sortBy: "test",
test: {
    foo: "bar",
    arr: [1, 2, 3],
}

After stringify options.params results in:

sortBy=test&test[foo]=bar&test[arr]=1,2,3

The request by ohmyfetch:

https://jsonplaceholder.typicode.com/todos?0=s&1=o&2=r&3=t&4=B&5=y&6==&7=t&8=e&9=s&10=t&11=%26&12=t&13=e&14=s&15=t&16=[&17=f&18=o&19=o&20=]&21==&22=b&23=a&24=r&25=%26&26=t&27=e&28=s&29=t&30=[&31=a&32=r&33=r&34=]&35==&36=1&37=,&38=2&39=,&40=3

As you can see the params are getting destructed by withQuery
https://github.com/unjs/ohmyfetch/blob/main/src/fetch.ts#L109

This issue is similar to: https://github.com/unjs/ohmyfetch/issues/117

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start at the withQuery call in src/fetch.ts around line 109, using the reported onRequest example and serialized string as the reproduction. Verify why the string is treated as iterable query input, then ensure the request URL preserves the serialized parameter string and confirm it with a regression test.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
api
Issue type
Bug
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Stale
Clarity
Clearly specified
Newbie friendliness
48/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.