ember-fetch + fastboot + ember-data sadness

[stefanpenner]

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.

[0xadada]

I'm running into this exact problem now. My app uses fastboot, ember-data, ember-fetch, and I'm in the process of removing jquery and everything is working, except fastboot fetches with the following error:

Error while processing route: index Cannot read property 'catch' of undefined TypeError: Cannot read property 'catch' of undefined
    at Class.ajax (/Users/ron/mirai-audio/mir/tmp/broccoli_merge_trees-output_path-IEMm2qLU.tmp/assets/addon-tree-output/ember-fetch/mixins/adapter-fetch.js:200:1)
    at Class.findAll (/Users/ron/mirai-audio/mir/tmp/broccoli_merge_trees-output_path-IEMm2qLU.tmp/assets/addon-tree-output/modules/ember-data/adapters/rest.js:473:1)
    at _findAll (/Users/ron/mirai-audio/mir/tmp/broccoli_merge_trees-output_path-IEMm2qLU.tmp/assets/addon-tree-output/modules/ember-data/-private.js:8501:1)
    at Class._fetchAll (/Users/ron/mirai-audio/mir/tmp/broccoli_merge_trees-output_path-IEMm2qLU.tmp/assets/addon-tree-output/modules/ember-data/-private.js:10967:1)
    at Class.findAll (/Users/ron/mirai-audio/mir/tmp/broccoli_merge_trees-output_path-IEMm2qLU.tmp/assets/addon-tree-output/modules/ember-data/-private.js:10938:1)
    at Class.model (/Users/ron/mirai-audio/mir/tmp/broccoli_merge_trees-output_path-IEMm2qLU.tmp/assets/mir/routes/index.js:23:1)
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:188:7)

this line: 192

ember-fetch/addon/mixins/adapter-fetch.js

Lines 183 to 194 in fc5167b

	ajax(url, type, options) {
	const requestData = {
	url,
	method: type,
	};
	const hash = this.ajaxOptions(url, type, options);
	return this._ajaxRequest(hash)
	.catch((error, response, requestData) => {
	throw this.ajaxError(this, response, null, requestData, error);
	})

[nlfurniss]

@0xadada you can get around this issue with these instructions.

[0xadada]

@nlfurniss unfortunately not because I've also removed jQuery in my app as a dependency, and the then().catch() semantics of ember fetch don't yet align with fastboot expectations.

[nlfurniss]

Did you try adding the initializer to override fastboot per the README?

[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;
  },

[0xadada]

@nlfurniss that worked! I hadn't taken that step, because it wasn't in the README back when i first switched to ember-fetch. Thanks!

[tchak]

I just want to mention that we are moving fetch support to Ember Data itself : emberjs/data#5386

[ehubbell]

@Duder-onomy I'm running into the same issue (using the same libraries) as you explain above. Curious, would you mind elaborating on where and how you manually set those headers?

[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.

[ehubbell]

@Duder-onomy Thanks for the help! Turns out I had my fastboot directory inside my app directory hence the issues my ajax service. Once I fixed that and installed something similar to your code above, everything's working.

[nlfurniss]

@mdbiscan yes, here is an example

[mdbiscan]

@nlfurniss sorry, hit delete by accident. Thanks for responding. Looks like it's the right track. I have another error to get past, but its related to a DRF adapter mixin.

[mdbiscan]

One of my issues is needing to pass HTTPOnly cookies. In my adapter headers property, I had to add this:

if(fastboot.isFastBoot) {
  headers['Cookie'] = fastboot.get('request.headers.cookie');
}