CODEWITHSUNDEEP
ember.jsember-cli-mirage
AJP
AJP

Reputation: 545

Fetching content from file and Ember CLI Mirage

I have a component in my Ember app which returns data from a static markdown file.

  didInsertElement() {
    fetch('markdown/faqs-content.md').then(response => {
      response.text().then(result => {
        this.set('markdown', result);
      });
    });
  }

When the app runs, the request goes to http://localhost:4200/markdown/faqs-content.md and everything works fine.

However, in mirage, I get this error:

Mirage: Your app tried to GET '/markdown/faqs-content.md', but there was no route defined to handle this request. Define a route for this endpoint in your routes() config. Did you forget to define a namespace?

The above happens, even though the following is included in mirage/config.js:

this.passthrough();

Presumably, this is because the API namespace is not included in the request URL.

The problem can be solved by adding the full URL to passthrough:

this.passthrough('https://localhost:4201/markdown/faqs-content.md');

Doing this has two issues:

  1. I don't always know the port that the app is served on, and
  2. I don't want to lose the functionality of using this.passThrough(), which automatically invokes pass through for any API requests where there is no corresponding route in mirage/config.js.

I thus have 2 questions.

  1. In config.js, is there any way of getting port that Ember server is running on, to allow something like https://localhost:${port}/markdown/faqs-content.md?

  2. Is there a way that I can configure Mirage to pass through for the request to https://localhost:4201/markdown/faqs-content.md, and still allow it to pass through for any other requests that don't have a corresponding route defined?

Upvotes: 0

Views: 2656

Answers (2)

Sam Selikoff
Sam Selikoff

Reputation: 12694

Passthrough (and the routing API in general) has some unfortunate strange behavior based on how it was coded + the underlying library it uses to intercept requests. We need to update the guides because others have run into this.

If you put

this.namespace = 'api'
this.passthrough()

then Mirage will let all requests to /api/* passthrough, but if you move the call to passthrough before, or "reset" the namespace to the empty string, it should handle all requests to the current domain.

I'd need to test but I would try both 

this.namespace = ''
this.passthrough()

and 

this.passthrough('/**')

and see if they work. (We really need to add a nested routing DSL to Mirage! It would remove all these awkward APIs.)

Upvotes: 1

AJP
AJP

Reputation: 545

In terms of the second question, it seems that the following solves it:

  this.passthrough('https://localhost:4201/markdown/faqs-content.md');
  this.passthrough();

Upvotes: 0

Related Questions