Unleash content with Strapi and GraphQL in the feature request system in GSOC’20
You definitely received exactly what you wanted and you enjoyed using it. Now you just want to know how this actually works under the hood. Is it real magic? Did god just shaped it according to your needs and sent it down from heaven? Come with me and I’ll answer all your
What did I do this week?
It took me some time to realize that
GraphQL is not another programming language. It is a specification or a technical standard. This mean it can have several implementations and variations.
Strapi implemented a fully customizable
GraphQL plugin which creates a new endpoint
/graphql and the GraphiQL interface. The plugin adds a new layer to easily request the API using
GraphQL, without breaking the existing endpoints.
GraphQL secures all queries by default and the plugin plays well with the users and permissions plugin. When we are making a query with
GraphQL we are hitting the same controller’s actions as we were doing with the
I utilized the introspection system of
GraphQL to fetch all categories available to our user while making a new story.
I also used a mutation to create a new user story which takes in all data entered by the user as parameter. I pass all my
GraphQL queries through a set of custom policies before they hit my custom authentication controllers in the customized
Strapi back end. This completed the feature to create a new user story.
On the server side I created a new model for the comments on the stories which contains 3 fields. The first is a rich text field to write the comment and the remaining two are relation fields with user and feature requests models. This means I also had to add a relation field to the feature request model to connect it with my comments model.
The next big feature of the week was to add functionality to display all stories on the home page according to their current status. The shadow CRUD feature of
GraphQL plugin automatically generates the type definition, queries, mutations and resolvers based on our models. The feature also lets us make complex query with many arguments such as
where. This helped me to implement a
GraphQL query to fetch the required details of all user stories and sort them according to the highest number of votes and most recently created stories. I used the query response to display the title, description and the no. of votes and comments for all stories on the home page.
All these features for the week helped me to catch up with
GraphQL really fast. It was completely new to me and I was feeling stuck just a week before. Now by the end of the week I am happy that I am able to understand how it works so efficiently deep down the layers.
What is coming up next?
I will work on displaying all information about each user story on a separate page. This requires a query to fetch all story details by the story id. The date of publishing and author details will be available on this page as well.
The system needs an edit feature which may allow our beloved users to add information to their story. They will not be allowed to edit the existing description though.
Did I get stuck anywhere?
Sometimes rare bugs can be difficult to catch and you may feel stuck while trying to solve them. This week I came across something strange.
All my code and functionality was running successfully on my development environment. After getting merged, the Gitlab CI deployed it to our staging servers and the whole application crashed, both the client and server side.
I finally solved all bugs and got to learn that
Strapi stores all the roles and permissions that we assign to our users in the database. In this case our development and staging servers are using different database. Simple :)
We just exported all our models data from the testing database to the one used by our staging server.
Another bug was to specify the exact
cors origin which can access our server as I used
withCredentials : true in my
Axios configuration to store the cookies in the browser and send them back in future requests.
This ended the week with the first evaluations in which I received an awesome feedback from my mentors and passed with flying colors. I thanked them for all their support and guidance. Looking forward to a great journey ahead :)