Passthrough external requests with wildcard

[sakhisheikh]

Currently I am having a problem. I have a few of external services I am using mirage to stub api responses for one service and I want to passthrough the rest of services with wildcard. But when I add a regex it passes through even the requests that has a matched pattern in routes()

This is what I am doing:
this.passthrough((request) => request.url.match(/.*/s));

If I just do this.passthrough() it doesn't work for external apis on a different origin and I don't want to out each url manually.

Thanks

[samselikoff]

Sorry about the delayed response! I'm behind on issues a bit due to some consulting/training work.

Yes – this.passthrough() only works for the current domain, and due to limitations in one of our dependencies it's not possible to do something like this.passthrough('*') to pass through all domains.

But it looks like you found the function version of passthrough() which is exactly what I was going to recommend. Is that working? If so, that's public API and you should be all set using it 👍

(FYI we are planning on adding a simple option to Mirage to let it passthrough all requests that haven't been explicitly mocked out. The passthrough API trips up a lot of folks and I think this will help.)

[ar-to]

is there any movement on this feature @samselikoff ? Was not sure if I should create a similar issue since I found this one. My use case is: I'm actually using miragejs to power the demo portion of the app mocking certain routes but I need it to pass all others. On the docs you shared, there is a line that says:

If you want all requests on the current domain to pass through, simply invoke the method with no argument

The key is the current domain part. I don't want to have to figure out how to dynamically add external urls when my app will change this from the BE and there is no easy way to do this without major refactoring. The easiest solution is for miragejs to let me pass all traffic but those specifically set in the routes like this issue initially posted.

I could not figure out how to use the passthrough method to do that.

[ar-to]

update for anyone else coming across this requirement and until a clearer solution within miragejs is added.

my miragejs server setup. Some imports and custom method missing but the important stuff is here.

export default function makeServer({
  environment = 'test',
  url = undefined,
}: {
  environment: string
  url?: string
}) {
  const server = createServer({
    environment,

    models: {
      business: Model,
    },

    // @see https://miragejs.com/docs/main-concepts/route-handlers/
    routes() {
      if (typeof url != 'undefined') {
        console.log('set passthrough url to new request', url)
        this.passthrough(url)
      }

      this.namespace = 'api'

      this.get('/businesses', handleGet)

      this.passthrough()
    },
  })
  return server
}

/**
 *
 * @param environment
 * @param url e.g. 'https://api.trello.com/1/**'
 * @returns
 */
export const runDemoServer = (environment = 'demo', url = undefined) => {
  const server = makeServer({ environment, url })
  server.db.loadData({
    businesses: businessesData,
  })
  return server
}

A few things to note from the snippet above:

• the url (e.g. https://api.trello.com/1/** is the domain with a wildcard which needs to be dynamically crafted to then pass into the runDemoServer method
• I'm not showing how I crafted the url because it can be different depending on the needs but if anyone needs it let me know.
• implemented the dynamic url update via redux using this action. Not showing redux because that can change per project as well. The url in this example was https://api.trello.com/1

setPassThroughUrl(`${url}/**`)

• the miragejs server needs to be shutdown and restarted to take effect. This could be improved like I said. In my case, I added it to the App.js file at the root where I have access to the redux store and passed the url from redux as a dependency to its own useEffect to avoid it restarting and creating multiple mock servers. I notice this still happens sometimes with live reload using react dev server but a refresh solves that and I have not found it intrusive just yet.

  useEffect(() => {
    let server
    if (typeof server != 'undefined') {
      console.log('shutdown miragejs server')
      server.shutdown()
    }
    server = runDemoServer('demo', props.passThroughUrl)
    console.log('passThroughUrl<>', props.passThroughUrl, '\n server', server)
  }, [props.passThroughUrl])

I do hope to move away from this patch to a clearer solution but hopefully my solution helps someone and the miragejs maintainers come up with a better solution.

Thanks.

[samselikoff]

Glad you figured it out, I haven't been actively working on mirage in a while but happy to help others if they want to work on a middleware api or improvements to passthrough!