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.
(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
- Install the
vscode-graphiql-explorer-extension. - 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 addschema.graphqlto gitignore as well. - 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 🙂
