Month: February 2020

Hello Comments!

For this weeks weekend project I decided to dive a bit deeper into Google Firebase and built a commenting system for this Gridsome-based blog from scratch. It was definitely not worth the time in the sense of adding commenting possibility to a blog but as a learning journey I’d say this was a fun little project.

Gridsome is a JAMstack tool which means that features like commenting need to be implemented either as a third-party solution or by using a separate backend functionality be it serverless functions, a traditional REST backend or something similar. Firebase is an interesting app development platform startup that was aquired by Google in 2014. What makes Firebase intresting for this kind of applications is its realtime database and hosted pluggable authentication system. Google offers a fairly generous free tier for the services so testing it out for a personal project like this is costs you only your time.

I’ll write more in depth about technical details later but for now, I’m happy to get this thing published. The biggest lesson learned here was that as with any tehcnologies, even though the 2 minute demo seems really clean and easy, most real worl implementations need to focus on details that are hard to get right if you care about user experience and security.

(Obviously, this first implementation is very unpolished and not feature-complete, but it should work, that’s the most important thing for now.)

Better GraphQL Explorer for Gridsome

Gridsome data layer is built on GraphQL and the development server comes bundled with a graphical UI for studying the schema building queries. This UI, however, is not very useful if you don’t already know GraphQL. I recently found out that there is a much better tool called graphiql-explorer that allows you to build GraphQL queries graphically and that it can be very easily used with Gridsome as a VS Code plugin.

GraphiQL Explorer inside VS Code

(Note: if you happen to use some other editor, you should be able to install graphiql-explorer by adding it in the dev server config with configureServer-hook.)

The 1-minute install

  1. Install the vscode-graphiql-explorer-extension.
  2. In your repository root, while your development server is running, generate a GraphQL schema for the plugin with following command: npx get-graphql-schema http://localhost:8080/___graphql > schema.graphql (the first part of the URL should be your development server URL). You might want to add schema.graphql to gitignore as well.
  3. Profit!11

You can now use the GraphiQL explorer inside your VS Code. Run Explore schema with GraphiQL command to see it in action.

Notes

  • The two other commands added by this extension don’t currently work with the custom Gridsome GraphQL blocks inside -vue files. What you can do is either copy the code in an open explorer window or open it in a new file and then run the explore-command. I opened a ticket for fixing this, it seems that it might be fixed quite soon.
  • graphiql-explorer is bundled with Gatsby and according to Gridsome developers, they might switch to using it in Gridsome as well. There’s actually an old ticket about this, too.
  • Shout-out to @eunjae_lee for leading me into this rabbit hole 🙂