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 🙂

Use The Tools, Luke!

I’m sometimes amazed how little people pay attention to the tools they’re using. This applies to many aspects of life, but especially well for IT-work.

I switched to Macs couple years ago. I did it mainly because I noticed that my productivity kept deteriorating with Windows. Fairly soon after the switch I felt the joy of workin again — thanks to the new (and right) tools. After that I’ve been actively monitoring my work habbits and trying to shake off any old and worn ones that might need some re-thinking.

For example, Macromedia Dreamweaver was one of my most precious tools for basic Web publishing for a long time. And I mean a long time. Everything worked quite nicely with it so I just got used to fixing its not so good code and to its other annoyances after a while. Eventually I bumped into TextMate and asked myself “why couldn’t I just use TM and some small ssh/ftp-client instead of DW?”. Well, turns out I did. I sold my DW license (which is hundreds of euros) and bought a TM license for 39 euros. I’ve been happy ever since.

So what’s the lesson here? Go and buy a Mac and live happily ever after? No. The lesson is that you should always use the right tools for the job in hand. You should also be aware what is happening elsewhere. Don’t get stuck with that familiar environment. Explore and experiment! 🙂 By using right tools you’ll be more happy and more productive. It’s Good Karma.

PS. TextMate really is an awesome text editor. This post was inspired by this recent screencast. No wonder why almost every Rails and Django screencasts have so familiar looking editors.