Hi There!, (If you are challenged with the above function in graphQl’s documentation with your own data structure this article will give some clarity).
I can only imagine how mind bending it can be to include a boolean value in another boolean value in-order to handle a simple nested Array whose initial value is not an Array. Therefor this article will give clarity to any developer challenged by the dataSources part of Apollo GraphQL documentations.
disclaimer:
It expresses my opinion on where Apollo GraphQL went wrong in CONTEXT OF A TUTORIAL and why and how to better understand it.
Array.isArray(response) ? true : or false : ‘apollo-datasource-rest’.
I’ve been trying to do things by the book the way Apollo states in its docs. when working with ‘apollo-datasource-rest’, there are some aspects of their code that I feel is not helpful and even counter-productive in context of a tutorial.
For example:
async getAllLaunches() {
const response = await this.get(‘launches’);
return Array.isArray(response)
? response.map(launch => this.launchReducer(launch))
: [];
}
Speaking for myself, What has been my pain points in the grander understanding of things with relation to this function:
• is the use of brackets : [] as a boolean value, to use brackets in this context, seems to be more aesthetic in terms of how it looks on source code in relevance to data fetching, rather than an informative debugger when an error is thrown.
• In fact the entire statement’s target which is either true or false does not return the reason as to why an error may occur when the value is false for example : a nested array fetch error may say: “response.map(item => is not a function”. However the current referenced function will log an empty array “ :[ ]” or if you change the value of the bracket to “false” it simply returns null when an error occurs, this can be misleading because the real reason for the error is missing. As a developer reading this code in context to data fetching and seeing an empty “: [ ]” can mean a host of speculations.
In this respect Array.isArray(response) ? true : or false can be cumbersome when the data endpoint is not an array for example “ “a” : [ ];” .
“a”: [
0: {},
1: {},
]//the end point to this is not array.as oppose to[
0: {},
1: {},
]//the end point to this is an array.
Array.isArray simply checks if the value is an array or not, if it is it returns true if it isn’t it returns false.
so the function above returns the query if it is true however if it is false simple returns and ambiguous “:[ ]” empty array.
so if the empty array value is logged instead of an error how do you know what the root of the problem is?
In order to debug the following, I had to explicitly pass the same target value in both of the boolean fixes, true : false statements as such:
return Array.isArray(response)
? response.map(launch => this.launchReducer(launch))
: response.map(launch => this.launchReducer(launch));// Which returns the reason of the error:// “response.map(item => is not a function” is the error message.// as oppose to an empty array “: [];”.
In order to solve this problem I simply modified the above code to deal with my data structure by prefixing a boolean operator to Array.isArray, changing it to !Array.isArray in order to retrieve data the nested Array:
the logic behind the prefix is simple the “a : [ ];” is not an array return true and render the data please.
the updated function looks like this :
async getAllLaunches() {
const response = await this.get(‘launches’);
return !Array.isArray(response)
? response.a.map(launch => this.launchReducer(launch))
: [];
}
It seems that Array.isArray(true or false) can be overtly complex especially when a fetch call of this nature is made because of the definition of 2 boolean operators inside of the statement. Therefore having an error message which returns an empty array “: [];” or a false; statement can be difficult to debug when the reasoning is not logged.
Top comments (0)