Apollo, AppSync, Warning about missing field - apollo

I'm getting this warning:
backend.js:6 Missing field getCurrentConfigurations in [
{
"id": "135631",
"zone": {
"id": 2,
"name": "ZONA 1",
"color": "#ba9b
It's a warning but my entire app has sometimes some weird behaviours. So I wonder how could fix those warnings. Apparently, the app works ok when I trigger a function that send that warning on chrome console, but I don't know why is happening.
I had to deal with an error about writing to cache some data, the solution in that case was adding an id value to each object and also a __typename
About the error and some solutions: https://github.com/apollographql/apollo-client/issues/2510
About the same but with _typename: https://github.com/apollographql/apollo-client/issues/1826
...but that's another story, anyway, that error occurs like 1 fro 20 times that I use the same function... it's all weird and random, but now I want to know if some one has a clue about the warning.
This is part of the code that shows what I'm using from Apollo
import AWSAppSyncClient, { createAppSyncLink, AUTH_TYPE } from 'aws-appsync';
import { setContext } from "apollo-link-context";
import { ApolloLink } from "apollo-link";
import { createHttpLink } from "apollo-link-http";
const client = new AWSAppSyncClient(AppSyncConfig, {
link: createAppSyncLink({ ...AppSyncConfig,
resultsFetcherLink: ApolloLink.from([
setContext((request, previousContext) => ({
headers: { ...previousContext.headers,
Authorization: localStorage.getItem('token') ? localStorage.getItem('token') : ''
}
})),
createHttpLink({
uri: AppSyncConfig.url
})
])
})
});

Related

Ember JS: Assertion Failed: `AdapterError` expects json-api formatted errors array

I am making my first Ember/Phoenix app using JSONAPIAdapter. When doing a post request Ember responds with Assertion Failed: AdapterError expects json-api formatted errors array.
Below is the relevant code:
adapter/application.js
import DS from 'ember-data';
import DataAdapterMixin from 'ember-simple-auth/mixins/data-adapter-mixin';
import config from '../config/environment';
export default DS.JSONAPIAdapter.extend(DataAdapterMixin, {
});
serializers/application.js
import DS from 'ember-data';
export default DS.JSONAPISerializer.extend({
});
request payload:
{
"data": {
"attributes": {
"name": ""
},
"relationships": {
"user": {
"data": {
"type": "users",
"id": "1"
}
}
},
"type": "listings"
}
}
response payload:
{"errors":{"name":["can't be blank"]}}
Why does Ember keeps giving me this error?
Your response payload is not correct. You are using json-api. So your payloads have to follow the json-api specification. Your request-payload looks correct. But check out how errors have to be serialized.
A json-api error response must contain a root key "errors" holding an array of error-objects. Regarding the documenation an error may contain several members, but the two most important are detail and source.
Here's an example:
{
"errors":[
{
"detail": "can't be blank",
"source": {
"pointer": "data/attributes/name"
}
}
]
}
The source-key contains a json-object holding a json-api-pointer. With the help of this pointer information ember's JSONAPI-Adapter adds the errors to the corresponding attributes of your record. Note that your backend needs to send a 422 HTTP status code (Unprocessable Entity).
If that works you can do something like that at client:
{{#each model.errors.name as |error|}}
<div class="error">
{{error.message}}
</div>
{{/each}}
How do you serialize your errors at backend? Are you using ja_serializer? If not, I would recommend it, because ja_serializer can serialize json-api-errors by default.
The documentation already linked by wuarmin clearly states (capitals theirs, italics mine):
Error objects MUST be returned as an array keyed by errors
Your API response' errors key has a single object as value, not an array.

Ionic2: Property 'present' does not exist on type 'NavController'

I am using Ionic 2 rc4. I am following the advise here and am trying to do the following:
import { NavController } from 'ionic-angular';
...
this.nav.present(this.loading).then(() => {
However, to me it looks like the NavController does not have a present function, because I get:
[ts] Property 'present' does not exist on type 'NavController'.
any
Am I correct, or am I doing something wrong? How do they get to access this "phantom" function?
Any advise appreciated.
UPDATE
Here is my code that results in the following error (on this.loading.present().then(() => {):
"Cannot read property 'nativeElement' of null"
It presents loading the first time. but after the alert is presented if submit() is run again, it gets this error.
submit() {
this.loading.present().then(() => {
let alert = this.alertCtrl.create({
title: 'Verify Email',
subTitle: 'Please verify your email address before you log in.',
message: 'Check your Spam folder if you cannot find the email.',
buttons: [
{
text: 'Resend',
handler: data => {
firebaseUser.sendEmailVerification().then((data) => {
this.doAlert('Verify Email', 'Verification Email Sent.').then((data) => {
//navCtrl.setRoot(navCtrl.getActive());
});
});
}
},
{
text: 'Okay',
handler: data => {
//navCtrl.setRoot(navCtrl.getActive());
}
}
]
});
alert.present();
this.loading.dismiss();
});
}
Looking at this changelog for Beta 11
They have removed present function from Navcontroller.
You need to refactor your code and use some other function based on your requirement.
this.loading.present()
For the error, check the Loading controller docs.
Note that after the component is dismissed, it will not be usable
anymore and another one must be created. This can be avoided by
wrapping the creation and presentation of the component in a reusable
function
Just do :
this.loading = this.loadingCtrl.create({
//loading properties
});
inside submit() before this.loading.present()

findRecord Rejects with successful network request

I am doing a simple find record. Getting an odd error.
store.findRecord('icon', id) // id = "UUID-ABC"
.then((result) => {
//do stuff
})
.catch((e) => {
console.log(e)
})
This fires off a network request and returns an object similar to ember docs. As seen in network dev tools:
{
"icon": {
"data": "string",
"id": "UUID-ABC",
"location": "string"
}
}
Rejects with EmberError:
"Assertion Failed: Passing classes to store methods has been removed. Please pass a dasherized string instead of undefined"
But I don't understand what is undefined. The id is most definitely defined, as seen in the network return.
I'm the using standard DS.RESTAdapter. With very little other changes. I use a few other actions that return an array of icons model, and they work fine.No errors are reported.

Error returning promise from Ember Data

I am working on my first Ember app and got it to display the way I wanted with the route returning a static JSON object from model():
element: {
name: "First Element",
divisions: [{
name: "First Division",
sets: [{name: "Set 1"},{name: "Set 2"},{name: "Set 3"}]
}, {
name: "Second Division",
sets: [{name: "Set 1"},{name: "Set 2"},{name: "Set 3"}]
}]
}
Now I am trying to refactor to use Ember Data + Mirage and having an awful time.
Here’s my index.js route
export default Ember.Route.extend({
model() {
return this.store.find('element', 1);
},
If I set up my Mirage config.js like this:
this.get('/elements', function() {
return {
elements: [
{
id: 1,
name: 'First Element',
divisions: [1, 2]
}
]
}
});
then I get this error:
Your Ember app tried to GET '/elements/1', but there was no route defined to handle this request.
If I set up my Mirage config.js like this:
this.get('/elements/1', function() {
return {
id: 1,
name: 'First Element',
divisions: [1, 2]
}
});
then I get this error:
22:46:40.883 "Error while processing route: index" "Assertion Failed: normalizeResponse must return a valid JSON API document:
* One or more of the following keys must be present: "data", "errors", "meta"." "EmberError#http://localhost:4200/assets/vendor.js:25582:15
EDIT:
So this isn't a solution to the problem as stated but it got me past this. I gave up on Pretender and started again creating an actual Rails server according to this excellent tutorial: http://emberigniter.com/modern-bridge-ember-and-rails-5-with-json-api/
I was able to do everything I wanted this way and if I ever want to make this a production app, I'm a lot closer.
So the issue is that you aren't actually adhering to the JSON API specification. You can solve this by reading Mirage's page on how to conform.
Essentially you need to either be returning an object at the top level of your JSON response in the case of a GET /foo/1 call. You'll also need to change your "elements" attribute to "data" for GET /foo and that should do the trick. Right now there isn't a simple, re-usable way to do this Mirage out of the box. The best bet right now for both issues is to use the solution presented in this issue.
ember error normalizeResponse must return a valid JSON API document
can be fixed in three ways
return a valid JSONAPI response
see your error message:
normalizeResponse must return a valid JSON API document:
* One or more of the following keys must be present: "data", "errors", "meta".
this.get('/elements/1', function() {
return {
data: {
id: 1,
name: 'First Element',
divisions: [1, 2]
}
}
});
see also https://jsonapi.org/examples/
normalize all responses
// app/serializers/application.js
import EmberData from "ember-data";
export default EmberData.JSONAPISerializer.extend({
normalizeResponse() {
return {
data: this._super(...arguments),
};
},
//normalize(){},
//serialize(){},
// ...
});
problem: error handling
by wrapping all responses in { data: ... }, they never return errors
on errors, the response should be
this.get('/elements/1', function() {
return {
errors: [
{
id: 12345,
title: 'title for error #12345'
}
]
}
});
see also https://jsonapi.org/format/#error-objects
replace JSONAPI with REST
sed -i 's/JSONAPISerializer/RESTSerializer/g' app/serializers/*.js
sed -i 's/JSONAPIAdapter/RESTAdapter/g' app/adapters/*.js
ember docs: adapters and serializers
duplicate: How can ember application be integrated to use with json-server?

Ember save() throws JSON.parse error: "unexpected end of data at line 1 column 1 of the JSON data"

I have a model record created and being saved through a route and controller. When I save the record through the controller (via a savePlace action), I am seeing this error in the JS console:
SyntaxError: JSON.parse: unexpected end of data at line 1 column 1 of the JSON data
I've tried not setting anything on the model as well as setting dummy data on the model, but I get the same error. I am also user ember-cli http-mocks as a test backend to handle JSON responses. I realize it may be the response, but I'm not sure how else to configure the response.
Here's the relevant code:
routes/places/new.js:
import Ember from 'ember';
export default Ember.Route.extend({
model: function() {
return this.store.createRecord('place');
},
});
controllers/places/new.js:
import Ember from 'ember';
export default Ember.Controller.extend({
actions: {
saveGeom(geom) {
this.get('model').set('geometry', geom);
},
savePlace(data) {
this.get('model').set('name', this.get('name')).set('description', this.get('description'));
this.get('model').save().then(function() {
alert("SUCCESS");
}, function(error) {
console.log(error);
});
}
}
});
server/mocks/place.js:
placeRouter.post('/places', function(req, res) {
res.setHeader('Access-Control-Allow-Methods', 'POST');
res.send({
"places": {
id: 1,
name: "Triangle",
description: "Ryan Christiani",
geometry: {
"type": "Polygon",
"coordinates": [
[
[-84.32281494140625,34.9895035675793],
[-81.73690795898438,36.41354670392876],
[-83.616943359375, 34.99850370014629],
[-84.05639648437499,34.985003130171066],
[-84.22119140625, 34.985003130171066],
[-84.32281494140625,34.9895035675793]
]
]
}
}
});
});
Thanks!
I think you are using the wrong brackets in the wrong places in your JSON Object.
Check out this page
http://www.tutorialspoint.com/json/json_syntax.htm
The http-mocks configuration is wrong. It should be this the code snippet below. The server was instead responded with an array of objects (the response for 'GET /'). Not sure why that would trigger a JSON.parse error, but this is the correct configuration.
placeRouter.post('/', function(req, res) {
res.setHeader('Access-Control-Allow-Methods', 'POST');
res.send({
'places': [
{
id: 1,
name: "Using Ember CLI to create a Fixture Adapter.",
description: "Ryan Christiani",
geometry: {
"type": "Polygon",
"coordinates": [
[
[-84.32281494140625,34.9895035675793],
[-81.73690795898438,36.41354670392876],
[-83.616943359375, 34.99850370014629],
[-84.05639648437499,34.985003130171066],
[-84.22119140625, 34.985003130171066],
[-84.32281494140625,34.9895035675793]
]
]
}
}]});
});