Open meesvandongen opened 1 year ago
Thanks @meesvandongen for opening this issue, which is also a problem we have encountered. PooyaJaan @pi0 please let us know what is the best and efficient temporary solution to solve this problem until it is resolved? Should we use the createFetch
function?
For anyone coming here, I found a hacky but functional way to workaround this for now using the Proxy
constructor
function createMyFetch() {
const newFetch = createFetch({
fetch: globalThis.fetch,
Headers: globalThis.Headers,
});
return newFetch.create({
// ...default options
});
}
const original = createMyFetch();
export const http = new Proxy(original, {
apply(_, thisArg, argumentsList) {
return Reflect.apply(createMyFetch(), thisArg, argumentsList);
},
});
// Then in other file calling `http` will be intercepted but maintaining the same usage
http('https://jsonplaceholder.typicode.com/todos/1')
This will work with msw@2.0.8 and node@18.18.0. You can merge the arguments instead of creating a new stance every time, or creating one only on the first call, etc
Running into this issue as well, a fix or workaround for usage with msw
would be greatly appreciated.
Running into this issue as well, a fix or workaround for usage with
msw
would be greatly appreciated.
Same here, not working with Nuxt in my case for MSW serverside outgoing calls EDIT:
After more debuggin in nuxtJS i found out above issue is main issue mocking in server/api is not working (calls to third parties
export default defineEventHandler(async (event) => {
const data = await createFetch()(
'https://jsonplaceholder.typicode.com/todos/1',
{
method: 'GET',
headers: {
'Content-Type': 'application/json',
},
},
)
console.log(JSON.stringify(data))
return {
hello: 'world',
}
})
Right now i fixed it by using the createFetch insteda of $fetch from nuxt.
Just adding on here, this is also apparently a problem when using Sentry in the Browser - any requests made via ofetch will not be captured by the monkey-patched fetch
that Sentry relies on to capture network requests, sadly.
I think this same problem (even if not strictly an issue with ofetch) happens with Datadog RUM: https://github.com/unjs/ofetch/issues/339
I might have found a possible, non-breaking solution to this problem and submitted a PR, but I wonder whether it is effective in all scenarios.
Any update on this ?
Here is a possible workaround for me with useFetch hook in Nuxt.
useFetch(url, {
$fetch: createFetch({
fetch: globalThis.fetch,
Headers: globalThis.Headers,
}),
...options,
});
Maybe this could be better supported in Nuxt.
I'm too humbly awaiting the solution, thank you, guys, for your time! Tried to overcome the issue by myself, but for now don't see any available options.
For someone who stuck in Nuxt + ofetch, I have created a Nuxt module nuxt-msw, which integrate msw with Nuxt.
This issue was a deciding factor against using ofetch
when migrating an app that was using request
even though the ofetch
api is really nice :disappointed:
Next version of ofetch will use patched fetch.
Environment
Node
Reproduction
https://codesandbox.io/p/sandbox/stoic-https-6gjdtz?file=/index.js:14,16
Describe the bug
When other tools patch fetch, the global instance of ofetch will have the original
fetch
instance. This will cause tools such as msw to not be able to intercept requests with ofetch. A workaround could be to only get the globalThis.fetch at request time if no other fetch is specified.Additional context
Users can work around this at this time by using the
createFetch
helper function.Logs
No response