Comments (16)
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;
},
from ember-fetch.
@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.
from ember-fetch.
@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?
from ember-fetch.
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');
}
from ember-fetch.
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
from ember-fetch.
@0xadada you can get around this issue with these instructions.
from ember-fetch.
@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.
from ember-fetch.
Did you try adding the initializer to override fastboot per the README?
from ember-fetch.
@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!
from ember-fetch.
I just want to mention that we are moving fetch support to Ember Data itself : emberjs/data#5386
from ember-fetch.
@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.
from ember-fetch.
@mdbiscan yes, here is an example
from ember-fetch.
@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.
from ember-fetch.
Solutions!
@stefanpenner
Here is how I've finally solved the problem, i'm also using ember-data
with ember-fetch
running in an ember-cli-fastboot
with ember-simple-auth
and have removed jQuery
as a dependency.
Here is my entire application adapter:
re: ☝️ @Duder-onomy your application adapter uses authorizers, which has since become a deprecated pattern in ember-simple-auth.
Authorizers and the session service's authorize method are deprecated and will be removed from Ember Simple Auth 2.0. The concept seemed like a good idea in the early days of Ember Simple Auth, but proved to provide limited value for the added complexity. To replace authorizers in an application, simply get the session data from the session service and inject it where needed.
When used with ember-fetch
the ajaOptions
doesn't work well, and the authorize
method will not be called. The headers
computed property must be used instead. Here is my application adapter using ember-fetch
:
// app/adapters/application.js
import JSONAPIAdapter from 'ember-data/adapters/json-api';
import AdapterFetchMixin from 'ember-fetch/mixins/adapter-fetch';
import config from 'mir/config/environment';
import { computed } from '@ember/object';
import { inject as service } from '@ember/service';
export default JSONAPIAdapter.extend(AdapterFetchMixin, {
session: service(),
host: config.DS.host,
namespace: config.DS.namespace,
headers: computed('session.data.authenticated.token', function() {
const headers = {};
headers['Content-Type'] = 'application/vnd.api+json';
if (this.session.isAuthenticated) {
const token = this.session.data.authenticated['access_token'];
headers['Authorization'] = `Bearer ${token}`;
}
return headers;
})
});
I also followed the ember-fetch README, to disable the ajax instance initializer on fastboot:
// fastboot/initializers/ajax.js
export default {
name: 'ajax-service',
initialize() {
// noop
// This is to override Fastboot's initializer which prevents ember-fetch from working
// https://github.com/ember-fastboot/ember-cli-fastboot/blob/master/fastboot/initializers/ajax.js
}
}
One of the nice benefits of this approach is that it helps paves the way to removing jQuery, especially with $.ajax
no longer used by ember-data
.
from ember-fetch.
Note on setting ajaxOptions
. I would follow what was recommended in the below . Also, headers
as a computed may be another source of a memory leak. Changing to a static getter e.g. get header
may have fixed leaking an internal part of Ember.
Just sending out a message in a bottle in case anybody picks it up. Your app may be slightly different, so make sure you have a memory leak before changing from a computed to getter
.
Ref - emberjs/data#5061 (comment)
from ember-fetch.
@allthesignals ref issue for container memory leaks
from ember-fetch.
Related Issues (20)
- Version 6.7.2 onwards seems not to transpile to es5 (Caused IE11 Blank screen, with no console errors) HOT 2
- Could not find module `fetch` imported from `prog/instance-initializers/setup-fetch` HOT 2
- Operation outputFileSync is not allowed to use HOT 15
- Where are all the response headers? HOT 2
- Inconsistent Headers objects with preferNative HOT 1
- fetch is not defined - maybe your browser targets are not covering everything you need HOT 31
- v8.0.3 contains `yarn-error.log` file
- Ember 3.27+ issues deprecation for accessing `window.Ember` HOT 1
- Could not find module `rsvp` imported from `fetch` HOT 6
- Version 8.1.0 not released to NPM? HOT 1
- Migration from jquery.ajax $.ajaxSettings.traditional = true. How remove [] from params
- Dropping Node 10, older versions of Ember
- Archive this repo? HOT 16
- Deprecation warning for assign() from ember/polyfills
- Failed to execute 'fetch' on 'Window': Failed to read the 'signal' property from 'RequestInit': Failed to convert value to 'AbortSignal'.
- ember-polyfills.deprecate-assign deprication in Ember 4.4
- ember-fetch `input` type parameter is incorrect
- Upgrade package "node-fetch" to fix
- `Error: cannot find module rsvp imported from fetch`: Ember 4.12 + embroider-optimized scenario HOT 1
- Maintenance, V2, modern `fetch`, etc
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from ember-fetch.