Introducing the Sanity source plugin for Gridsome

Written by Knut Melvær, Espen Hovlandsdal, Victoria Bergquist

With Sanity’s new source plugin for Gridsome, you can now build fast by default websites using structured content with the Vue.js based static site generator. It gives you fast and frugal builds, and watchMode gives you low latency real-time content preview while you develop, without having to save or publish. Using Sanity’s GraphQL schema definitons, the plugins prevents builds from breaking even though there's no content for certain types. With Portable Text you can provide a intuitive rich text editor while using Vue-components to render all aspects of your rich text and block content. No more v-html!

Gridsome is a static site generator for Vue.js. It lets you create highly performing websites with prerendered markup, which is good for SEO and the overall user experience. Building with Gridsome gives you a lot of convenient easy-to-configure features such as taxonomy pages and effortless pagination.

We retrofitted Gridsome’s offical blog starter and put it on sanity.io/create. You'll be up and running in minutes with all the code in your GitHub and with Sanity Studio and the Gridsome frontend deployed on Netlify.

If you already have a Gridsome project, you install the plugin from npm ($ npm i gridsome-source-sanity), add your Sanity project’s ID with the name of the dataset where your content is, make sure that you have deployed your project’s GraphQL API ($ sanity graphql deploy) and that’s it. Your content from Sanity.io will now be available via Gridsome's templating GraphQL API.

Watch the video from our online meetup where we had Gridsome’s co-founder Tommy Vedvik on. We also did a live demo of the real-time watch mode.

How the plugin works

While most source plugins either connect to a REST or GraphQL endpoint, potentially firing a lot of requests on each build, Sanity’s source plugin for Gridsome will do primarily two things:

1. Fetch a GraphQL SDL schema in order to map types correctly.
2. Stream all your available documents from the export API point in one go.

In order words, building a Gridsome site of any size with Sanity takes two API requests and is therefore very fast - certainly among the fastest ways to build with an API-based CMS. We fetch the GraphQL schema to avoid the type inference that may struggle with polymorphic arrays (read: block content with many different types), and to prevent type inference to break your site if some content is suddenly missing. This is also why you need to redeploy Sanity’s GraphQL API when you change your content schemas in the studio.

If you enable watchMode and overlayDrafts in development mode, we'll actually do a third request to set up a listener. This will now subscribe to updates done within your Sanity dataset and update the internal nodes in the Gridsome API. This means that you'll get low latency level real-time updates in your frontend while you're building without having to publish content.

This is really convenient, and, let us be honest, we think it's really cool.

We would also like to show our gratitude to the Gridsome creators and founders Tommy and Hans-Jørgen Vedvik who have been excellent in taking feedback, fixing bugs, and providing what we needed to make this happen.