Fetch-API requests seem to be skipped and only XMLHttp is being caught

Description

I have implemented a simple mock server:

import { createServer } from 'miragejs'

export function makeServer (environment: string = 'development') {
  console.debug('Starting mock server')
  let server = createServer({
    environment,

    routes: function () {
      this.logging = true
      this.urlPrefix = 'https://my-api.com'
      this.namespace = '/'

      this.passthrough(request => {
        console.debug('passthrough', request.url)
        return request.url.startsWith(`${import.meta.env.VITE_EXTERNAL_API_URL}`) || request.url.startsWith(`${import.meta.env.VITE_OAUTH_PROVIDER}`)
      });

      this.get('company', () => {
        console.debug('Handling GET company')
        const companiesResponse = [{
          address: 'Some address',
          avatar_url: 'https://some-image-server.com/my-company-image.png',
          description: 'The company',
          name: 'Company INC',
          phone: '[phone]',
          id: 1
        }]

        return companiesResponse
      })
    }
  })

  return server
}

My setup is consisting out of the following XHR:

• OIDC requests (e.g. GET https://my-auth-provider.com/realm/master/token) (using oidc-client-ts which is using XMLHttp requests
• API requests (using a custom generated package by the use of swagger-codegen which is using Fetch-API requests

Project is based on:

• Vite 3.1.0
• Vue 3.2.37
• TypeScript 4.6.4
• CORS is active for the used API services - but that shouldn’t matter if the requests are being intercepted correctly by miragejs

Problem

In my console, I only get logged the XMLHttp requests. The Fetch-API requests are not even being caught in the passthrough-function …

Screenshot:

But the network clearly shows that my fetch requests are also being executed:

---

Any ideas?

Note: In the source-code of the miragejs project I could only find TS types for XMLHttp, nothing for fetch. Do we have support for the fetch-API? At least, the documentation says that both should work.

[waldemarennsaed]

Resolved

I was wondering about the following scenario:

Applying a custom, native fetch-request into my application (not using any swagger-codegen generated client-API), resolved in miragejs catching those fetch-requests that I do by just using the native fetch-API.

The fetch-requests from the API-packages, were not caught. Inspecting the client-APIs and their types, they provide the option for passing a fetch API. Further inspection of my API-packages, resolved into the following insights:

• package A was using portable-fetch as a dependency
• package B was using isomorphic-fetch as a dependendy

Solution

Configuring those consumed API-packages A & B to using the globalThis.fetch or window.fetch (or just fetch), resolved the issue. Now those requests of those packages are being intercepted correctly by miragejs.

Thanks for all the support and quick resposes @cah-brian-gantzler !

[waldemarennsaed]

Note: There is also the alpha option of using MSW https://mswjs.io/docs/ instead of pretender with mirage. Let me know if you want to try that out. Assume that would have worked with your previous code as the intercept point is in a different place.

Thanks, just looked into MSWJS and it looks pretty nice. I am sure it should work with my code since it’s intercepting on the outgoing network request on service-worker level.

I will post my results here after trying it out 🚀