babel-blade docs

babel-blade docs

  • Docs
  • API
  • Help
  • Blog

›Introduction

Introduction

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

Getting Started

  • As a babel plugin
  • As a babel macro

Usage/API

  • GraphQL Spec By Example

The Double Declaration Problem

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.

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?As a babel plugin →
  • What is the double declaration problem?
  • Problem Statement
babel-blade docs
Docs
Getting Started (or other categories)Guides (or other categories)API Reference (or other categories)
Community
User ShowcaseStack OverflowProject ChatTwitter
More
BlogGitHubStar
Facebook Open Source
Copyright © 2018 Your Name or Your Company Name