babel-blade docs

babel-blade docs

  • Docs
  • API
  • Help
  • GitHub
  • Roadmap
  • Blog

›Introduction

Introduction

  • What is Babel-Blade?
  • The Double Declaration Problem

Usage/API

  • GraphQL Spec By Example

Getting Started

  • As a babel plugin
  • As a babel macro

The Double Declaration Problem

obligatory note: babel-blade is not yet production ready! Please proceed only if you are an early adopter. Feel free to chat with @swyx or check our issues!

What is the double declaration problem?

Simply, it is the bad developer experience of

  • having to declare what you want to query in the GraphQL template string
  • and then again when you are using the data in your application.
  • Curly braces also have to match up.

When you don't do it just right:

  • Ommissions are confusing to debug and
  • overfetching due to stale queries is also a problem.

2022 Edit:

See other commentary on Double declaration:

  • https://xuorig.medium.com/gqless-or-gqlful-ec36fe588a4b
  • https://wundergraph.com/blog/solving_the_double_quintuple_declaration_problem_in_graphql_applications_how_to_not_repeat_yourself

Problem Statement

Here is a typical graphql query using urql (taken straight from urql's docs):

import { Connect, query } from 'urql';

const QueryString = `
  query Movie($id: String) {
    movie(id: $id) {
      id,
      title,
      description,
      genres,
      poster {
        uri
      }
    }
  }

`;

const Movie = ({ id, onClose }) => (
  <div>
    <Connect
      query={query(QueryString, { id: id })}
      children={({ loaded, data }) => {
        return (
          <div className="modal">
            {loaded === false ? (
              <p>Loading</p>
            ) : (
              <div>
                <h2>{data.movie.title}</h2>
                <p>{data.movie.description}</p>
                <button onClick={onClose}>Close</button>
              </div>
            )}
          </div>
        );
      }}
    />
  </div>
);

You see how title and description are specified twice, while poster and genre aren't even used.

← What is Babel-Blade?GraphQL Spec By Example →
  • What is the double declaration problem?
  • Problem Statement
babel-blade docs
Docs
Getting StartedAPI Reference
Community
Twitter
More
BlogGitHubStar
MIT License. Maintained by @swyx