Gatsby, GraphQL and the Missing But Necessary Explanation About Type Definitions
Cannot query field “Title” on type “strapiArticle” was the error that inspired me to write this article, first because it was a specific problem related to a specific technology and second because it was an error I couldn’t find anything about on Google.
GraphQL is an impressive technology that is solving a very specific problem, the problem of querying exactly what you need from an established REST API response and reduce it to basically a “Query Language”. This works perfectly when all the data that has been queried and all your fields are filled with non-empty data, if we have a REST API that returns [ { ‘lastname’: ‘Lovecraft’ } ] we cannot remove the ‘lastname’ or send it empty (e.g. {‘lastname’: ‘’}) whenever we feel like it, because GraphQL would exclude it from the query if not other entry has a value defined on this field, so if you have something like { user { lastname } } as your GraphQL query and the ‘lastname’ field doesn’t have a value on it, you would get a similar error message as the one you read in the first sentence.
The Gatsby-Strapi-GraphQL problem
GatsbyJS helps us to generate static websites based on CMS content, it solves this problem making use of GraphQL to query CMS content data. Some time ago I was working on a system where we have connected GatsbyJS with Strapi as CMS and everything was fine at the beginning but there was something strange on the Strapi Article data type, there was an entry with just dummy data, this was strange, why do we have an article with dummy data in our CMS? I thought, so I delete it since it was something that probably the first person to take the project had created a long time ago. After I deleted that and ran my local server, my console was full or red colored messages, I was getting the error you saw in the first paragraph and surprisingly enough I couldn’t find any solution, I looked everywhere from Stack Overflow to abandoned Chinese websites.
Seemed like solution to this problem was to create that dummy entry, surprisingly enough this problem was throughout the Gatsby GitHub issues section of people having the same problem creating dummy entries on their CMSs to be able to run their website again.
The actual problem and the reason why Gatsby fails when an entry has empty fields is because GraphQL removes the empty fields from the data Gatsby uses to work with, that happens because GraphQL simply cannot infer the type when there is not any value, that is why these weird errors happen, fortunately there is an suitable solution for this, it may not be short but it is necessary.
Type definitions as a solution for the GraphQL type inferring problem
Type definitions can be a little bit tricky but they have a straight forward logic, let’s see an example. What would be the type definition for the next GraphQL query if you want to solve the Cannot query field “Title” on type “strapiArticle” error with a GraphQL query like the following?
According to the the GraphQL documentation you can create a type definition for the “title” field as the following:
That solved the error for that specific field problem, however, the fields “description”, “content” and the “author” section of our articles were optional too, the problem was solved but it would pop up again at any time if no type definitions were created for those fields.
The “author” field from the “strapiArticle” is a reference to other model we have on Strapi called Author, that is why for this specific field I’ve created another type definition encapsulating their own fields and then referencing it as a type on the “strapiArticle” “author” field.
The full implementation on Gatsby would be adding this piece of code to the “sourceNodes” function inside the “gatsby-node.js” file on the root of the project in the following fashion.
Defining your type definitions this way will assign a default “null” value to your properties that can be validated in the logic of your application avoiding to raise exceptions for optional new fields when building your static site.
Conclusions
The error Cannot query field “Title” on type “strapiArticle” was solved at the end and also future errors with that specific type were avoided, this teach us that for certain problems there are several solutions and the nature of the solution depends on your problem solving strategy. We could have fixed this issue adding a dummy entry to the article content type but that will mean that for each new content type we added we would have to do the exact same thing, also if that dummy entry gets deleted by accident the error would appear unexpectedly crashing the whole application. Try to always look for new ways to solve problems and never stop asking the question “Is this the best way to do this?”.
