One of the downsides of GraphQL is that you cannot write recursive queries. The article Pain Points of GraphQL by Bruno Soares has an excellent discussion of this subject, along with some other interesting observations about GraphQL.
But why would you want to write a recursive query in the first place? Well, taking blog software as an example, the post categories may well be a tree structure, and if you want to get all of the categories from your database to populate a Material Design treeview component, for example, you'll need each category to have a "children" field, which in turn contains a sub-tree containing all the sub-categories.
So, what can you do? One possible solution is to get all of the category records out of the database using GraphQL, and then process them to get them into your required tree structure.
When I tried to do exactly that for a previous version of this blog, which used the Vue.js framework along with VueApollo for the GraphQL queries, I ran up against another, and quite unexpected, problem; when trying to add the children field to my returned category objects, I got a JavaScript error message saying that the object was not extensible.
Qantas 94 Heavy's answer to Creating new objects from frozen parent objects suggested a solution to this; I ended up making an extensible copy of the original data structure using the following code. From there, it was a simple exercise to go on to create the nested tree structure that was required for the treeview component.
let allCategoriesExt = []
this.allCategories.forEach(function (item) {
let eItem = Object.create(item)
Object.defineProperty(eItem, 'children', { value: [], enumerable: true, configurable: true, writable: true })
allCategoriesExt.push(eItem)
})
I hope that this article is helpful and interesting. And, you never know, it may save someone an hour or two!