I'm trying to fetch items from GraphQL and receiving (looked at 'Network' tab):
But when I do
console.log(data)
I receive same Object as first a lot of times.
For example, not [0,1,2,3,4,5,6], but [0,0,0,0,0,0].
What's wrong?
Your API is returning null as the value for each item's id property. Apollo's InMemoryCache is normalized and uses the id and __typename of each object is stores as the key. Since the id for each item are the same, they are getting overwritten in the cache.
The easiest solution is to fix your server so it correctly returns the id for each item -- that will fix the unexpected caching behavior. If for some reason you don't have a unique identifier for each item, you'll need to implement your own dataIdFromObject function and pass it in to InMemoryCache's configuration. See here for additional details in the docs.
Related
I'm having trouble understanding a weird behaviour when using Apollo Client.
Here is a little bit of context, maybe I missed something:
I have an app that displays lists of items.
Thanks to routing, each list has its own route :
/list/:listId
Each list has its own settings, and these settings are used to know which item details are displayed (per se, on one list I can decode to show the price of my item, and hide it on another list)
Now, the problematic part: I'm using the apollo client useQuery hook to fetch my list. the listId is obtained through the react-router-dom useParams hook, and then passed as a variable to useQuery, and that's my whole point:
useQuery(ITEM_LIST, {
variables: {
listId,
}
})
Even when passing a new listId by navigating from a list to another, apollo still fetches the settings from my previous list, for a very short moment, resulting in a glitchy user experience (details that should not be displayed are displayed for a moment, then immediately disappear)
I read a few articles regarding apollo caching issues, such as this one, but still, didn't manage to find the source of this problem. Here are the things I've tried so far:
alias the id field in my query
make sure my server returned a response with a unique ID
Has anyone seen this before?
I am trying to access information with-in localStorage from one component to another, specifically the name of the user on their profile. I am able to access up to the object holding all of the profile information like name, email, address etc. However when I try to extract just the name I am unsure of how to do so, or if its even possible.
right now im trying...
console.log(localStorage.document)
this gets me the an object holding all the data in localStorage...
{"name":"John Doe","email":"johndoe#aol.com","phone":"0000000000","address1":"123","address2":"123","addresscitystate":"Seattle, WA","addresszip":"00000"}
yet I cant seem to access any further then that. I attempted to just do [0] at the end to get the index but im getting just the letter back for that specific index not the actual object I want.
Any advise is appreciated!
May be you can try this one, For extracting the specific property from localStorage you can do this:
let item = localStorage.getItem("name")
The way to do this is.
First you need to extract the localStorage item
let savedItem = localStorage.getItem("username")
"Username" is the name of the item that is save in you localstorage.
The Complete guide for the localstorage usage is as follow.
https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage
I recently started using Node-Restful and I am seeing that an array is being returned when I hit a GET request.
What I want
{"_id":"56","name":"something"}
What I am getting
[{"_id":"56","name":"something"}]
How does Node-restful handle GET requests? And how do I override this? Is there anyway that Node-restful takes care of this?
I think that default implementation for get request is to return an array of requested data. if you want just one of them, you should send id of object in database.
GET /resources -> returns array of objects in database
GET /resources/:id -> returns just one object with given id
I'm using AngularFire and have an ng-repeat list with items that contain data specific to the "author" of that item (multiple users can add to the list), such as name, location, etc. I'm not writing that data into the array being iterated over by ng-repeat since it could change in the future. Instead, that author-specific data is store in a different location so the goal is that if the author changes their information, all of it is reflected in the list.
For a contrived example, imagine I'm iterating over a list of books from different authors. That list will contain the book-specific data (such as title, publish date, etc.) but I will also want to display the author's information in the list. Instead of including the author's information directly within the book data, I want to simply reference that author ID, and pull in whatever data is in their profile so if they change their name, it'll reflect the changes in all of their book listings.
That means I'm left to make async calls to Firebase to retrieve that information for each list item via a template function, such as {{getAuthorName(authorId)}}. The only problem is that they're async calls and the template function evaluates before the data is available.
I've looked into how to accomplish but have yet to find a solution that accommodates what I need. The answers here seem close, but they appear to no longer work in Angular >= 1.2.0 and they don't account for having to return different data for each template function call.
Update
Here is a JSFiddle with what I have now. I've made some progress, but all that's being returned now is the promise object as expected. I'm not sure how to implement .then in this scenario to get the actual value.
Any help would be great.
You can make use of $firebaseObject and then store that in an object to make sure it doesn't get hit again. like so:
var authors = {};
$scope.getAuthorName = function(authorId){
if(!authors[authorId]){
var authorRef = new Firebase(fburl + "/authors/" + authorId);
authors[authorId] = $firebaseObject(authorRef);
}
return authors[authorId];
};
You can see the working fiddle here: http://jsfiddle.net/0rcdpq47/
Datasource: Array source (Open source code)
I have a __getTable method that loads the data from a configuration file to an array that looks like this:
I created a method that takes in data in this form and creates a table out of it. The table creates a column in the row for every field present in the given data array except for id. id is a hidden field and the code generated by the input function looks like this:
but shows up like this when inspecting the code in firebug:
Ignore all except for what is in the control-group division.
Since im using the array source, i create my own update method and have to call updateAll() in my controller to call the method. All the data i need is in the request data except for the id! why, and how can i fix this? It looks like this:
The rest of the information on here might not be necessary but ill post it just in case.
I found the problem. Most of it was unique to my code though. There was a bug where i call the $this->Widget->input function. I use index rather than the id and that screws up my tabs. each data array passed in to the function had indexs from 0-~11 and so the values were overriding each other since the submit was for multiple tabs. Also i have a function 'open' that opens a table and the rows were specified to have 4 columns rather than 5 and id was the 5th column.