We Keep Coding

Why GraphQL is not detecting a new field in a JSON object

I'm new in Gatsby Development, in my website I'm using a community theme and modifying it in some things.
My problem started when I modified a JSON file called 'settings.json', where I added a field in the siteConfiguration object, the original file was this:
{"siteConfiguration": {
"logo": { "text": "chrisley"},
"navigation": {
"header": [
{ "label": "About", "url": "/#about" },
{ "label": "Blog", "url": "/blog" },
{ "label": "Features", "url": "/#features" },
{ "label": "Github", "url": "/#github" }
],
"ctaButton": {
"openNewTab": true,
"label": "Resume",
"url": "/resume.pdf"
},
"footer": [
{ "label": "Privacy", "url": "/privacy" },
{ "label": "Imprint", "url": "/imprint" }
]
},
"featureToggles": {
"useDarkModeAsDefault": false,
"useDarkModeBasedOnUsersPreference": true,
"useCookieBar": false
}
}
}
And the one where I added the field 'img' inside "logo" is the following:
{"siteConfiguration": {
"logo": { "text": "chrisley","img":"/content/images/logo-dark.png"},
"navigation": {
"header": [
{ "label": "About", "url": "/#about" },
{ "label": "Blog", "url": "/blog" },
{ "label": "Features", "url": "/#features" },
{ "label": "Github", "url": "/#github" }
],
"ctaButton": {
"openNewTab": true,
"label": "Resume",
"url": "/resume.pdf"
},
"footer": [
{ "label": "Privacy", "url": "/privacy" },
{ "label": "Imprint", "url": "/imprint" }
]
},
"featureToggles": {
"useDarkModeAsDefault": false,
"useDarkModeBasedOnUsersPreference": true,
"useCookieBar": false
}
}
}
And when I trying to get the img field in GraphQL with this Query:
query SiteConfiguration {
allSettingsJson: allContentJson {
settings: nodes {
siteConfiguration {
logo {
text
img
}
}
}
}
}
I get the next error:
{
"errors": [
{
"message": "Cannot query field \"img\" on type \"Logo\".",
"locations": [
{
"line": 7,
"column": 11
}
],
"extensions": {
"stack": [
"GraphQLError: Cannot query field \"img\" on type \"Logo\".",
" at Object.Field (/Users/chrisley/Documents/Development/Gatsby/chrisley_dev_website/node_modules/graphql/validation/rules/FieldsOnCorrectTypeRule.js:48:31)",
" at Object.enter (/Users/chrisley/Documents/Development/Gatsby/chrisley_dev_website/node_modules/graphql/language/visitor.js:323:29)",
" at Object.enter (/Users/chrisley/Documents/Development/Gatsby/chrisley_dev_website/node_modules/graphql/utilities/TypeInfo.js:370:25)",
" at visit (/Users/chrisley/Documents/Development/Gatsby/chrisley_dev_website/node_modules/graphql/language/visitor.js:243:26)",
" at validate (/Users/chrisley/Documents/Development/Gatsby/chrisley_dev_website/node_modules/graphql/validation/validate.js:69:24)",
" at graphqlMiddleware (/Users/chrisley/Documents/Development/Gatsby/chrisley_dev_website/node_modules/express-graphql/index.js:98:38)",
" at processTicksAndRejections (node:internal/process/task_queues:95:5)"
]
}
}
]
}
Hope you can help me guys, as always haha 😅

I'll be answering myself because I found the problem hahaha.
The problem was that I was missing updating the Schema of the theme, in particular of this theme was the file gastby/node/createSchemaCustomization.js
So.. after updating the file with this lines:
module.exports = ({ actions }) => {
actions.createTypes(`
...
type Logo {
text: String
img: String
}
...
`);
};
GraphQL detected my new field 'img' of the 'logo' object.

After some research I'm assuming you are using the following starter: https://github.com/konstantinmuenster/gatsby-theme-portfolio-minimal/tree/main/gatsby-theme-portfolio-minimal
Have you tried stopping your development process and cleaning Gatsby cache by:
gatsby clean
Or manually deleting the .cache folder.

ChaiJS jsonSchema check for multiple types

In my Chai-Test (using it for PostMan) I want to validate my API-response-design. For that I have written a Chai-Test:
pm.test("Check response schema", () => {
const schema = {
"type": "object",
"properties": {
"success": { "type": "boolean" },
"data": { "type": "object" },
"err": { "type": "object" },
"info": { "type": "string" }
},
"required": ["success", "data", "err", "info"]
}
pm.response.to.have.jsonSchema(schema)
})
My problem now is, that either the data or the err object is defined based on whether the request to the API was successful or not. I wanted to accomplish that by using two types for the data and the err: object AND null. So, how can I check for two types with the jsonSchema? Or is there an other and better way to do this?

You can do that:
"data": { "type": ["object", "null"] },
"err": { "type": ["object", "null"] }

Nested forEach issue

I have two arrays of object, the first array (printers, around 80 elements) is made of the following type of objects:
[{
printerBrand: 'Mutoh',
printerModel: 'VJ 1204G',
headsBrand: 'Epson',
headType: '',
compatibilty: [
'EDX',
'DT8',
'DT8-Pro',
'ECH',
],
cartridges: [],
},
....
]
The second array (cardridges, around 500 elements) is made of the following type of objects:
[
{
"customData": {
"brand": {
"value": {
"type": "string",
"content": "ECH"
},
"key": "brand"
},
"printer": {
"value": {
"type": "string",
"content": "c4280"
},
"key": "printer"
}
},
"name": "DT8 XLXL",
"image": {
"id": "zLaDHrgbarhFSnXAK",
"url": "https://xxxxxxx.net/images/xxxxxx.jpg"
},
"brandId": "xxxxx",
"companyId": "xxxx",
"createdAt": "2018-03-26T14:39:47.326Z",
"updatedAt": "2018-04-09T14:31:38.169Z",
"points": 60,
"id": "dq2Zezwm4nHr8FhEN"
},
...
]
What I want to do first is to is to iterate through the first array and and then iterate for all the cardridge available: if a the value customData.brand.value of a cardridge is included inside the array 'compatibility' of a printer, then I have to add this cardridge object inside the cardridges array of this printer. I have tried but somehow the iteration doesn't take place correctly. This is what I tried:
printers.forEach((printerItem) => {
const printer = printerItem;
printer.compatibilty.forEach((compatibilityItem) => {
const compatibility = compatibilityItem;
cardridges.forEach((cartridge) => {
if (compatibility === cartridge.customData.brand.value.content) {
printer.cartridges.push(cartridge);
}
});
});
});
What am I doing wrong?

You're accessing the wrong property. It should be cartridge.customData.brandName.value.content, carefully note brandName.value rather than brand.value

Your issue is that you're accessing it by the wrong property - brand and not brandName.
Furthermore, if you're targeting everything but IE, you could simplify your nested for loops to utilize some fancy ES6 array methods.
printers.forEach((p) => {
p.cartridges.push(cartridges.filter((c) => {
const brandName = c.customData.brandName.value.content;
return p.compatibilty.includes(brandName);
}));
});

Attach object to Highcharts click event

Moving from D3 to Highcharts and this is eluding me. I have a fairly complex object that contains a clickthrough object which needs to be accessed in a function on a point click in the series. I'm creating the series array with the data and name just fine with a small conversion, but I need to attach this object to the data points as well. No idea how.
Quick example. original data:
[
{
"key": "Super Cool Thing",
"format": ".2f",
"values": [
{
"label": "01",
"value": 9.5,
"format": ".2f",
"order": 0,
"tooltip": "numerator = 133, denominator = 14",
"clickthrough": {
"output_format": "json",
"metrics": "",
"options": {
"columns": [
{
"order": 1,
"display_as": "Brand",
"format": "{0}",
"name": "brand",
"data_type": "string"
},
{
"order": 2,
"display_as": "Last Submit Time (Month)",
"format": "%m",
"name": "last-submit-time-month",
"data_type": "datetime"
},
{
"order": 3,
"display_as": "Agent Things",
"format": "{0}",
"name": "agent-thing-values",
"data_type": "string"
}
]
},
"cut_y": "brand",
"type": "",
"filter": { },
"cut_x": "last-submit-time-month"
},
"metrics": [
{
"name": "Agent - Feel Appreciated Mean",
"slug": "qcustomersatr4-mean"
}
]
}
]
}
]
run through a (super quick POC) funct:
for(let i = 0; i < data.length; i++){
var values = [];
var xcuts = [];
data[i].values.forEach(val => {
values.push(val.value);
xcuts.push(val.label);
});
chart.addSeries({
name: data[i].key,
data: values
})
chart.xAxis[0].setCategories(xcuts);
}
and this all works fine. But I need the clickthrough object so I can do something like:
plotOptions: {
series: {
allowPointSelect: true,
cursor: 'pointer',
point: {
events: {
click: function (event) {
console.log('CLICKTHROUGH DATA HERE');
console.log(event.point);
}
}
}
},
},
I'm unsure how to format the series data to include additional data that's accessible in an event function later down the line. I currently do this via d3 and it's fine, but am struggling with the Highcharts method to do the same. It seems I can't just add whatever I want to the series or data, so is this possible?

Have it. I have to set the y value explicitly and then I can add whatever else which is then avail in the event.
example:
data[i].values.forEach(val => {
values.push({link: val.clickthrough, y:val.value});
xcuts.push(val.label);
});
chart.addSeries({
name: data[i].key,
data: values
})

Why are relations not being added to my loopback.io objects in the models?

I am quite new to Loopback and NodeJS, so please tell me if there is a "Node way" of doing something that I am missing. I decided to write a basic application to try and learn more.
I have two models, 'UserInformation' and 'ClothingArticle'. I have created a 'hasMany' relation from UserInformation to ClothingArticle.
As a basic test, I wanted to add a remote method to UserInformation to get recommendations for ClothingArticles. However, I cannot seem to get access to anything related to ClothingArticles. I added code into the common/models/user-information.js file to try and retrieve information about the relation, but am not sure if this is even the right spot to be putting it.
My code is below, could you help?
common/models/user-information.js:
module.exports = function(UserInformation) {
get_methods = function(obj) {
var result = [];
for(var id in obj) {
try {
if(typeof(obj[id]) == "function") {
result.push(id + " (function): "); //+ obj[id].toString());
}
else
result.push(id + ": "); // + obj[id].toString());
}
catch (err) {
result.push(id + ": inaccessible");
}
}
return result;
}
// This doesn't anything about my new relations?
console.log(get_methods(UserInformation.prototype));
UserInformation.recommendations = function(source, callback) {
var response = "I don't have any recommendations.";
var test_function = UserInformation.findById(3, function(err, instances) {
if(err) return console.log("Errors: " + err);
console.log("Instances: " + String(instances));
// Nothing here either about the relations.
console.log(get_methods(UserInformation));
console.log(UserInformation.app);
/*
instances.clothingArticles.create({
id:92,
colors:['red','blue']
});
*/
console.log("Created a new clothing article.");
});
console.log (response);
callback(null, response);
}
UserInformation.remoteMethod(
'recommendations',
{
accepts: [
{arg: 'source', type: 'string'} // Used to mark the source (closet, generic, etc)
],
http: {path: '/recommendations', verb: 'get'},
returns: {arg: 'recommendations', type: 'string'}
}
);
};
common/models/user-information.json:
{
"name": "UserInformation",
"base": "PersistedModel",
"strict": false,
"idInjection": false,
"properties": {
"birthday": {
"type": "date"
},
"id": {
"type": "number",
"id": true,
"required": true
},
"eye_color": {
"type": "string"
},
"hair_color": {
"type": "string"
},
"weight": {
"type": "string",
"comments": "pounds"
},
"height": {
"type": "number",
"comments": "inches"
}
},
"validations": [],
"relations": {
"clothingArticles": {
"type": "hasMany",
"model": "ClothingArticle",
"foreignKey": "owner_id"
}
},
"acls": [],
"methods": []
}
common/models/clothing-article.json:
{
"name": "ClothingArticle",
"base": "PersistedModel",
"strict": false,
"idInjection": false,
"properties": {
"id": {
"type": "number",
"id": true,
"required": true
},
"colors": {
"type": [
"Color"
],
"required": true
},
"owner_id": {
"type": "number"
}
},
"validations": [],
"relations": {},
"acls": [],
"methods": []
}

I suggest starting with our getting started example and working your way through through the tutorial series here: https://github.com/strongloop/loopback-example
The questions you ask are answered throughout the examples (ie. model relations). To answer your question, if you defined a relation properly, you should be able to access the relation via dot.
...
UserInformation.ClothingArticle...
...
See http://docs.strongloop.com/display/LB/HasMany+relations for more information.