ember-fetch + fastboot + ember-data sadness

fastboot and fetch share the same extension point in ember-data, and today they do not work together.

Long-term, I suspect fastboot should provide a XMLHTTPRequest global, and a fetch global. That way it doesn’t interfere in high level code, and would also “just work” with things like pretender/mirage.

[Duder-onomy]

@ehubbell Totally.

The latest ember-simple-auth has deprecated authorizers… So I had to change some things a few weeks ago. Now that ajaxOptions hook I pasted above looks a little different.

Because we are using basic auth to protect our staging environment, and we are using fastboot, and simple auth uses the ‘Authorization’ header, and fastboot will not let us change that default… we had to change the name of our access token key to something that does not use Authorization. We used X-Access-Token and had to subsequently change our authorization code in devise to use a diff key.

Here is my entire application adapter:

import DS from 'ember-data';
import DataAdapterMixin from 'ember-simple-auth/mixins/data-adapter-mixin';
import AdapterFetch from 'ember-fetch/mixins/adapter-fetch';
import { get } from '@ember/object';
import { inject as service } from '@ember/service';
import config from '../config/environment';

const { JSONAPIAdapter } = DS;

export default JSONAPIAdapter.extend(DataAdapterMixin, AdapterFetch, {
  session: service(),

  authorizer: 'authorizer:application',

  coalesceFindRequests: true,

  host: config.APP.apiBase,
  namespace: config.APP.apiNamespace,

  headers: {
    'X-Requested-with': 'XMLHttpRequest',
  },

  ajaxOptions(...args) {
    const options = this._super(...args);
    const accessToken = get(this, 'session.data.authenticated.access_token');

    options.headers['X-Access-Token'] = accessToken;

    options.headers['Content-Type'] = 'application/vnd.api+json';

    return options;
  },
});

Hope that helps.

[Duder-onomy]

I also ran into an nearly identical issue with ember-data ember-fetch ember-cli-fastboot and ember-simple-auth

Ember-fetch’s ajaxOption’s does not call super, which results in any other extensions of your application adapter not having the opportunity to set headers or anything like that. The current implementation of ember-fetch’s ajaxOptions do not allow this to run.

This breaks ember-simple-auth because the ember-simple-auth’s adapter mixin needs to set your auth header.

My workaround is to manually set the headers I need after ember-fetch has run:

  ajaxOptions(...args) {
    const options = this._super(...args);

    get(this, 'session').authorize(get(this, 'authorizer'), (headerName, headerValue) => {
      options.headers[headerName] = headerValue;
    });

    return options;
  },