GraphQL Blueprint
Open source.

Case study · Open Source · OSLabs · 2021
View on GitHubAll work
Photography — Sean Yalda · Iceland
Credits
Stack
Services
Context

GraphQL is powerful. Its setup is not.

GraphQL is a query and data-manipulation language that lets developers build apps faster than ever — but its setup is still unwieldy. Adding it to a project with a lot of data takes time. We wanted to create an app that generates the repetitive, tedious side of GraphQL effortlessly, while still giving developers the full power of the language. We built it by iterating on GraphQL Designer, whose team open-sourced their code in 2018 — Blueprint wouldn’t exist without them.

The approach

A GUI for production-grade boilerplate.

A graphical schema designer that exports production-level database, server, and client-side code for inclusion in React + Express projects. Developers model multi-database schemas visually and export the files needed to run a GraphQL server and client locally — the boilerplate stops being a tax on starting.

  • Multi-database schema modeling in one project.
  • Generated GraphQL schemas, queries, and mutations, previewed in realtime.
  • NoSQL schemas and SQL build scripts.
  • Export-ready files developers can drop into existing repos.
Wireframe sketch of the MVP flow, with multi-database schema marked as the number-one featureMongoDB, PostgreSQL, and MySQL databases modeled side by side in one GraphQL Blueprint projectTable editor with the Add Field panel: type, required, unique, and relation controlsD3 tree view of a modeled schema, from the GraphQL endpoint down to databases, tables, and typed fieldsRealtime code preview: Mongoose schemas alongside generated GraphQL types, root queries, and mutationsGraphQL Blueprint beta splash screen
MVP priorities, sketched — multi-database schema circled as the #1 feature.
01 / 06
Frontend engineering

Tabbed workflows, schema visualization in D3.

Tabbed windows let developers move quickly between views without losing context. Micro-interactions on every component enabled full CRUD on schemas, fields, and relationships. A tree view powered by D3.js gave users a bird’s-eye view of their schema — critical for catching modeling mistakes early.

  • Tabbed windows for rapid context switching.
  • CRUD micro-interactions on every entity.
  • D3.js tree visualization for whole-schema review.
  • Minimal interface — the schema is the star, not the chrome.
Backend engineering

Parsing algorithms that don't block the thread.

Parsing algorithms dynamically generate deeply nested typed code structures without blocking the main thread. Unit test coverage with Jest. CI/CD to AWS EC2 via CircleCI. The whole thing is built so that the moment a developer hits “export,” they get artifacts ready to run.

  • Non-blocking parsing for deeply nested generated structures.
  • Comprehensive Jest unit coverage on the generators.
  • CI/CD pipeline to AWS EC2 via CircleCI.
  • Strict separation between schema state and generated artifacts.

GraphQL Blueprint has been used by several hundred engineers, approximately half of whom exported generated boilerplate directly into their projects. Built as an OSLabs open-source release, it remains a reference point for developer tooling work — and a reminder that the most valuable thing engineering can do for engineers is delete tedious work.

View on GitHub