Gatsby & GraphCMS, Sittin in a Recursive Tree

Michael Lukaszczyk
Michael Lukaszczyk
Fabian Beliza
Fabian Beliza

December 6, 2017

Recursive data with Gatsby and GraphCMS

This is a guest post by Gatsby experts (Gatsperts): Angel Piscola – @redmega, Hugo Meissner – @hmeissner, Ricky de Laveaga - @rdela and Rafael Cordones - @rafacm

GraphQL is a query language and execution engine tied to any backend service.

This tale tells of a time before now, when Gatsby.js (a static site generator that combines React and GraphQL) was only using GraphQL internally. Gatsby could fetch data from static files, contentful APIs, Wordpress databases, and mongoDB, but it never fetched the seed data with GraphQL. Angel, the original plugin author and project leader, looked into static site generators for his personal website remake. He thought to himself, “Well, that doesn’t make much sense, does it?” And the idea was born.

Angel settled on GraphCMS because he liked the UI and features they provided, as well as their free tier usage limits. Theoretically, this plugin will work with any GraphQL endpoint. We are all big fans of the entire GraphQL community, and hope to make using other GraphQL data sources like Apollo Launchpad with Gatsby even easier. We are blown away daily by the number of amazing developer and learning resources starting to bloom.

One of the most attractive aspects of GraphCMS is how it preserves the operator ease of use of traditional CMS interfaces while harnessing the power and flexibility of (the underlying service) and GraphQL itself.

Angel had an open PR on the Gatsby repo from 20 August, and Rafael got involved and landed some commits on a new PR on 13 October. Angel had been an active and extremely helpful contributor on the Gatsby channel on the Reactiflux Discord (where people kept asking about the status of the plugin) and the GraphCMS Slack for months, and Ricky had become interested in the plugin and started chatting with Angel in late September.

The GraphCMS staff have been incredibly supportive all along, the Slack is very welcoming and we had all been chatting with Michael, Fabian, Daniel, and Jonas. Jonas created the Gatsby channel in the Slack on the same day Rafael opened his PR, as interest in the plugin began to swell. Hugo and Ricky made fast friends there and work began to snowball. There is something innately compelling about putting the two GraphQL sides together, which remains a work in progress we would love your help with. There are some really interesting ideas on the radar. The plugin is not without it’s limitations and you still have to provide your own query to get the data you want from your GraphCMS project. Hugo is working hard to make sure those things are soon to be resolved in upcoming versions as soon as possible!

In the end both PRs would be closed and the plugin would find its home at last inside the GraphCMS GitHub organization, thanks again to the entire GraphCMS team making themselves available throughout the process and some Git sorcery from Rafael. That said, this plugin was outside the scope of their roadmap, so is a true community effort from 4 non-employees, and they did everything right to urge us on and allow the collaboration to happen. Also if you checked out the plugin already, using it just got way easier since Angel published 0.0.1 to npm and we have already updated the example.

In other sunny news from Gatsby-land, Shannon Soper is orchestrating a big research and data gathering mission to improve usability and the overall Gatsby experience. As part of that work a new searchable plugin index is coming. Kyle’s comment on Rafael’s PR is the beginning of great things for Gatsby. Decoupling new plugin development from the Gatsby monorepo is a great idea, and we think lesser used plugins already in the monorepo should be moved to their own repos. Maybe all source plugins like ours should live in their own repos, since by default everyone will not need all of them, and typically just one. This is part of what slowed us down, and switching to an isolated repo for testing was a crucial pivot point for us. Ricky spoke with Shannon and is very excited about the future of Gatsby and the plugin. If you care about the future of Gatsby, schedule some time with Shannon, then give our Gatsby plugin and GraphCMS a try and let us know how it could be better.

If you got all the way to the bottom and are still wondering, ‘What about that title?’ we have a present for you.

It's Easy To Get Started

GraphCMS plans are flexibly suited to accommodate your growth. Get started for free, or reach out to our sales team to discuss larger projects with more complex needs