I get the following error on a react component. I thought I had set a unique key when I look in graphQL playground explorer the id I am grabbing is unique for each element. So I am not sure why I am getting this error. I read that the elements inside my also need a key which I thought wasn't the case. Hopefully someone can help.
Error
Warning: Each child in a list should have a unique "key" prop.
GraphQL Query
query MyQuery {
allDatoCmsPricing {
edges {
node {
id //This was orignally there when I posted
details {
id //This was missing that was my error which was answered
task
}
}
}
}
}
GraphQL Result
{
"data": {
"allDatoCmsPricing": {
"edges": [
{
"node": {
"details": [
{
"id": "DatoCmsItem-1919839-en",
"task": "Client Consultation"
},
{
"id": "DatoCmsItem-1919840-en",
"task": "S.M.A.R.T Goal Setting"
},
{
"id": "DatoCmsItem-1919841-en",
"task": "Fitness Assessment"
},
{
"id": "DatoCmsItem-1919842-en",
"task": "Client Centered Exercises"
},
{
"id": "DatoCmsItem-1919843-en",
"task": "1-2 Sessions per week"
}
]
}
},
{
"node": {
"details": [
{
"id": "DatoCmsItem-1927942-en",
"task": "Client Consultation"
},
{
"id": "DatoCmsItem-1927943-en",
"task": "S.M.A.R.T Goal Setting testing breaking line"
},
{
"id": "DatoCmsItem-1927945-en",
"task": "Fitness Assessment"
},
{
"id": "DatoCmsItem-1927946-en",
"task": "Client Centered Exercises"
},
{
"id": "DatoCmsItem-1927947-en",
"task": "Injury Prevention"
},
{
"id": "DatoCmsItem-1927948-en",
"task": "Nutrition Advice"
},
{
"id": "DatoCmsItem-1927949-en",
"task": "Program Design"
},
{
"id": "DatoCmsItem-1927950-en",
"task": "Corrective Exercises"
},
{
"id": "DatoCmsItem-1927951-en",
"task": "3 or more Sessions per week"
}
]
}
},
{
"node": {
"details": [
{
"id": "DatoCmsItem-1927866-en",
"task": "Client Consultation"
},
{
"id": "DatoCmsItem-1927867-en",
"task": "S.M.A.R.T Goal Setting"
},
{
"id": "DatoCmsItem-1927868-en",
"task": "Fitness Assessment"
},
{
"id": "DatoCmsItem-1927869-en",
"task": "Client Centered Exercises"
},
{
"id": "DatoCmsItem-1927870-en",
"task": "Injury Prevention"
},
{
"id": "DatoCmsItem-1927872-en",
"task": "Nutrition Advice"
},
{
"id": "DatoCmsItem-1927873-en",
"task": "2-3 Sessions per week"
}
]
}
}
]
}
}
}
Component
{data.allDatoCmsPricing.edges.map(({ node: pricing }) => (
<div key={pricing.id} >
<ul className="details-list">{pricing.details.map(detailEntry => {
return <ListItem key={detailEntry.id}><span>{detailEntry.task}</span>
</ListItem>
})}</ul>
</div>
...
It looks like pricing.id is undefined. It's represented by node.id in your data, but you only have a details property present. Your graphql query reflects this. Adding id to the query should resolve the error:
query MyQuery {
allDatoCmsPricing {
edges {
node {
id # <--- Added this field
details {
id
task
}
}
}
}
}
Related
I have a types variable that is an array of objects. Each object has 2 properties name and content.
The second property content is an array of object with only one property : name.
When displayed in the template with {{types}} I see this:
[ { "name": "Base", "content": [ { "name": "Base (Lager/Pilsner)" }, { "name": "Base (Pale)" }, { "name": "Base (Pale Ale)" }, { "name": "Base (Wheat)" }, { "name": "Base (Rye" }, { "name": "Base (Wheat)" } ] },
{ "name": "Kilned", "content": [ { "name": "Munich" }, { "name": "Vienna" }, { "name": "Aromatic" }, { "name": "Amber|Biscuit|Victory" }, { "name": "Brown Malt" } ] },
{ "name": "Stewed", "content": [ { "name": "Caramel|Crystal" }, { "name": "Dextrin" }, { "name": "Special Belge" }, { "name": "Honey Malt" } ] },
{ "name": "Roasted/Torrefied", "content": [ { "name": "Pale Chocolate" }, { "name": "Chocolate" }, { "name": "Black Wheat" }, { "name": "Roast Barley" }, null, { "name": "Roast Rye" }, { "name": "BLack Malt" } ] },
{ "name": "Others", "content": [ { "name": "Acidulated" } ] } ]
Here is my template
<div class="h-3/4 overflow-auto">
<div v-for="(group,index) in types">
<FermentableTypeItem
#updateModel="updateModel"
:key="index"
:type_name="group.name"
:group_name="group.name"
:state="group.state"
></FermentableTypeItem>
{{group.content}}
<FermentableTypeItem
v-for=" (t,index) in group.content"
#updateModel="updateModel"
:key="index"
:type_name="t.name"
:group_name="group.name"
></FermentableTypeItem>
</div>
</div>
As you can see I want to add a special [1] FermentableTypeItem for each first level element and then loop on this first level element 's content property to add a list of normal [2] FermentableTypeItem.
Note 1: special means that the group_name and the type_name are
identical
Note 2: normal means the the group_name and the type_name are
different
It works and display the various FermentableTypeItem s but only when I don't use the t variable in the second loop
If I use it, the app crashes saying the t is undefined.
Could somebody help me fixing this error ? May be it's obvious but I cannot see what is wrong.
There is null content object present. So remove null content from response your or check null v-if="t != null" like below.
<div v-for=" (t,index) in group.content" :index="index">
<FermentableTypeItem v-if="t != null"
#updateModel="updateModel"
:key="index"
:type_name="t.name"
:group_name="group.name"
></FermentableTypeItem>
</div>
I am trying to sideload relationship data from one API call. I have a my two models setup like so:
Contest Model (child, belongsTo):
import Model, { attr, belongsTo } from '#ember-data/model';
export default class ContestModel extends Model {
#attr('date') createdAt;
#attr('string') description;
#belongsTo('brand', { inverse: 'contests' }) brand;
}
Brand Model (parent, hasMany):
import Model, { attr, hasMany } from '#ember-data/model';
export default class BrandModel extends Model {
#attr('date') createdAt;
#attr('string') name;
#hasMany('contest') contests;
}
I'm fetching via this line:
this.store.findRecord('contest', params.contest_id, { include: 'brand' });
This is the returned API payload:
{
"data": {
"type": "contest",
"id": 1,
"attributes": {
"body_json": [
{
"question": "what time is it?",
"answers": ["1PM", "2PM", "3PM", "4PM"]
},
{
"question": "which collection is this artwork from?",
"answers": ["botanical garden collection", "ghibli collection", "adventure collection", "swag collection"]
}
],
"created_at": "2021-05-23 18:00:00 -0700",
"description": "a good description goes here"
},
"relationships": {
"brand": {
"links": {
"self": "http://example.com/contests/2/relationships/brand" // not sure what this does
},
"data": { "type": "brand", "id": 2 }
}
},
"links": {
"self": "http://example.com/contests/2" // not sure how this is useful
},
"included": [
{
"id": 2,
"type": "brand",
"attributes": {
"created_at": "2021-05-23 20:00:00 -0700",
"name": "aloha vibe"
}
}
]
}
}
The issue here is that calling myContest.brand returns a Proxy object just like in this SO post.
Is my API payload incorrect or is something misconfigured for my models? Or something else? I'm on Ember 3.25.3
Update from comments: When I add async: false to the Ember Data query, I get an error after this line https://github.com/emberjs/data/blob/v3.25.0/packages/store/addon/-private/system/model/internal-model.ts#L705 due to toReturn.isEmpty being true. Did I not configure my API payload? Not sure what is wrong. It seems neither createdAt nor name is populated.
Found the bug! The data payload needs to be in this format:
{
"data": {
"type": "contest",
"id": 1,
"attributes": {
"body_json": [
{
"question": "what time is it?",
"answers": ["1PM", "2PM", "3PM", "4PM"]
},
{
"question": "which collection is this artwork from?",
"answers": ["botanical garden collection", "ghibli collection", "adventure collection", "swag collection"]
}
],
"created_at": "2021-05-23 18:00:00 -0700",
"description": "a good description goes here"
},
"relationships": {
"brand": {
"links": {
"self": "http://example.com/brands/2"
},
"data": { "type": "brand", "id": 2 }
}
},
"links": {
"self": "http://example.com/contests/2"
}
},
"included": [
{
"id": 2,
"type": "brand",
"attributes": {
"created_at": "2021-05-23 20:00:00 -0700",
"name": "aloha vibe"
}
}
]
}
I had nested the included within the data section but it should be at the top level with the data section. Now things are properly sideloaded and no extra API call is made :)
I have the following array of objects.
I want to search the word Powai (case insensitive). But when I search the word I am not getting the results with the word (Powai) with parenthesis. I have attached the code below the JSON. Please help.
I am using https://github.com/kentcdodds/match-sorter this library along with the <Autocomplete /> component of Material-UI react to filter the results based on the input query.
[
{
"id": 31,
"name": "Powai",
},
{
"id": 3474,
"name": "Powai Chowk Mulund",
},
{
"id": 3475,
"name": "Powai Vihar Complex",
},
{
"id": 2428,
"name": "Forest Club Powai",
},
{
"id": 2635,
"name": "Hiranandani Powai Bus Station",
},
{
"id": 3561,
"name": "Ramda Hotel (Powai)",
},
{
"id": 2244,
"name": "Crisil House (Powai)",
},
{
"id": 2662,
"name": "I.R.B.Complex(Powai)",
},
{
"id": 2890,
"name": "Kingston Sez (Powai)",
},
{
"id": 3972,
"name": "Tatapower Centre (Powai)",
},
{
"id": 2362,
"name": "Dr.Ambedkar Udyan (Powai)",
},
{
"id": 2389,
"name": "E.S.I.S.Local Office Powai",
},
]
match-sorter version: ^4.1.0
node version: 12.14.0
npm (or yarn) version: 6.14.4
Relevant code or config
matchSorter(options, inputValue, {
keys: ["name"],
threshold: rankings.WORD_STARTS_WITH,
keepDiacritics: true,
});
I fixed the issue by changing the threshold value to threshold: rankings.CONTAINS.
That solved my problem.
When using the Facebook Open Graph explorer, I run the following, to get a list of my books read.
/706685881/books.reads?limit=25&offset=0
This returns only 5 results, even though I have more books read than that, and I've explicitly requested up to 25 results. Following the paging link to the (theoretical) more results, shows a page with no more results.
here's my output of the query:
{
"data": [
{
"data": {
"book": {
"id": "452418224806835",
"url": "https://www.facebook.com/pages/Fantastic-Voyage/452418224806835",
"type": "books.book",
"title": "Fantastic Voyage"
}
},
"id": "10151871872740882"
},
{
"data": {
"book": {
"id": "106151566083577",
"url": "https://www.facebook.com/pages/The-Andromeda-Strain/106151566083577",
"type": "books.book",
"title": "The Andromeda Strain"
}
},
"id": "10151870390740882"
},
{
"data": {
"progress": [
{
"timestamp": 1388668020,
"percent_complete": 0
},
{
"timestamp": 1392949225,
"percent_complete": 100
}
],
"book": {
"id": "10150233066083545",
"url": "http://www.goodreads.com/book/show/10664113-a-dance-with-dragons",
"type": "good_reads:book",
"title": "A Dance with Dragons (A Song of Ice and Fire, #5)"
}
},
"id": "10151867499170882"
},
{
"data": {
"progress": [
{
"timestamp": 1391350736,
"percent_complete": 0
},
{
"timestamp": 1392569208,
"percent_complete": 100
}
],
"book": {
"id": "1390736374489290",
"url": "http://www.goodreads.com/book/show/18405477-city-of-the-sun",
"type": "good_reads:book",
"title": "City of the Sun"
}
},
"id": "10151860185710882"
},
{
"data": {
"book": {
"id": "526531387368738",
"url": "http://apps.facebook.com/bookscout/?currworkid=9000000000133742",
"type": "books.book",
"title": "Gates of Fire"
}
},
"id": "10151226827780882"
}
],
"paging": {
"next": "https://graph.facebook.com/706685881/books.reads?fields=data&limit=25&offset=25&__after_id=10151226827780882"
}
}
Anybody seeing what I am doing wrong?
I have a question about the Graph API.
I use Javascript for the API and make a little test website ,where you can log in ,look for new messages and write a new status.
My problem is that I can't get the messages or the thread.
FB.api('/me/inbox',function(response) { alert(response.id); } ); don't work.
Have somebody an example for getting the messages in the inbox??
Thanks
The /me/inbox request requires that you have the read_mailbox permission granted.
Once you've got that, the /me/inbox request will return an array of Thread's, which will look something like this;
{
"data": [
{
"id": "1126884978255",
"from": {
"name": "Someone's Name",
"id": "34723472"
},
"to": {
"data": [
{
"name": "Someone's Name",
"id": "34723472"
},
{
"name": "Matt Lunn",
"id": "560914724"
}
]
},
"message": "Testing the one-ness.",
"updated_time": "2012-01-31T12:13:00+0000",
"unread": 0,
"unseen": 0,
"comments": {
"data": [
{
"id": "1126884978255_6769",
"from": {
"name": "Someone's Name",
"id": "34723472"
},
"message": "£140!?",
"created_time": "2012-01-31T11:33:15+0000"
},
{
"id": "1126884978255_6771",
"from": {
"name": "Matt Lunn",
"id": "560914724"
},
"message": "^^ month in advance as well",
"created_time": "2012-01-31T11:33:26+0000"
}
]
},
"type": "thread"
}
],
"summary": {
"unseen_count": 0,
"unread_count": 21,
"updated_time": "2012-01-31T13:19:31+0000"
}
}
So depending which ID you're after, you'll have to do;
for (var i=0;i<response.data.length;i++) {
var thread = response.data[i];
for (var j=0;j<thread.comments.data.length;j++) {
var comment = thread.comments.data[j];
console.log(comment.message);
}
}
Hopefully you get the idea...