A set of prototyping tools for Relay

[steveluscher]

This PR introduces two new tools for prototyping Relay apps:

1. An instance of GraphiQL that runs against an in-memory schema
2. A code playground that lets you live edit a Relay app and its schema

These tools are intended primarily for use on the Relay homepage and in the next generation of the Relay tutorial (#6).

Getting started with this PR

Install all the things.

  git fetch && git checkout prototyping-tools
  git clean -dfx
  npm install && (cd website; npm install) && (cd website-prototyping-tools; npm install)
  cd website
  npm start

The GraphiQL tool

1. Visit http://localhost:8080/relay/prototyping/graphiql.html

   1. HelloSchema will be loaded; Make the following query:

      query HelloQuery {
        greetings { hello } 
      }
      

2. Add ?query= to the end of the URL with your own URL encoded query text. The GraphiQL browser will load prefilled with that query text.
3. Add ?schema to the end of the URL with your own URL encoded JavaScript schema source code. The GraphiQL browser will eval the supplied JavaScript code as it boots, and will configure GraphiQL to make queries against it.

The prototyping tool

1. Visit http://localhost:8080/relay/prototyping/playground.html
   1. HelloSchema and HelloApp will be loaded and executed; You can make changes to the code.
   2. Try pasting the following schema and app into the editors; https://gist.github.com/steveluscher/3abe6d6f598d70423f76
2. Add ?code= to the end of the URL with your own URL encoded app source code. The playground will boot with your app code prefilled in the editor
3. Add ?schema to the end of the URL with your own URL encoded JavaScript schema source code. The playground will eval the supplied JavaScript code as it boots, will configure the in-browser babel-relay-plugin to transform and validate Relay.QL calls against it, and will configure GraphiQL to make queries against it.

[steveluscher]

cc/ @schrockn @dschafer @leebyron

[wincent]

Woot!