Mark Allen TSMMark

2015-01-29 Unofficial Relay FAQ

Compilation of questions and answers about Relay from React.js Conf.

Disclaimer: I work on Relay at Facebook. Relay is a complex system on which we're iterating aggressively. I'll do my best here to provide accurate, useful answers, but the details are subject to change. I may also be wrong. Feedback and additional questions are welcome.

What is Relay?

Relay is a new framework from Facebook that provides data-fetching functionality for React applications. It was announced at React.js Conf (January 2015).

Edit — February 2019

This gist had a far larger impact than I imagined it would, and apparently people are still finding it, so a quick update:

TC39 is currently moving forward with a slightly different version of TLA, referred to as 'variant B', in which a module with TLA doesn't block sibling execution. This vastly reduces the danger of parallelizable work happening in serial and thereby delaying startup, which was the concern that motivated me to write this gist
In the wild, we're seeing (async main(){...}()) as a substitute for TLA. This completely eliminates the blocking problem (yay!) but it's less powerful, and harder to statically analyse (boo). In other words the lack of TLA is causing real problems
Therefore, a version of TLA that solves the original issue is a valuable addition to the language, and I'm in full support of the current proposal, which you can read here.

I'll leave the rest of this document unedited, for archaeological

	var gulp = require('gulp');
	var sourcemaps = require('gulp-sourcemaps');
	var source = require('vinyl-source-stream');
	var buffer = require('vinyl-buffer');
	var browserify = require('browserify');
	var watchify = require('watchify');
	var babel = require('babelify');

	function compile(watch) {
	var bundler = watchify(browserify('./src/index.js', { debug: true }).transform(babel));

	var gulp = require('gulp')

	var browserify = require('browserify')
	var watchify = require('watchify')
	var babelify = require('babelify')

	var source = require('vinyl-source-stream')
	var buffer = require('vinyl-buffer')
	var merge = require('utils-merge')

	# I am pasting that into setup steps
	# binary provided by the amazing Codeship.io support
	PHANTOMJS_URL="https://s3.amazonaws.com/codeship.io/checkbot/binaries/phantomjs_2.0.1"
	set -e
	rm -rf ~/.phantomjs
	wget --continue "${PHANTOMJS_URL}" -O "${HOME}/cache/phantomjs"
	ln -s "${HOME}/cache/phantomjs" "${HOME}/bin/"
	chmod +x "${HOME}/bin/phantomjs"

	namespace :codecov do
	desc 'Uploads the latest simplecov result set to codecov.io'
	task upload: :environment do
	require 'simplecov'
	require 'codecov'

	formatter = SimpleCov::Formatter::Codecov.new
	formatter.format(SimpleCov::ResultMerger.merged_result)
	end
	end

	# Customize BASH PS1 prompt to show current GIT repository and branch.
	# by Mike Stewart - http://MediaDoneRight.com

	# SETUP CONSTANTS
	# Bunch-o-predefined colors. Makes reading code easier than escape sequences.
	# I don't remember where I found this. o_O

	# Reset
	Color_Off="\[\033[0m\]" # Text Reset

	# Monkey Patch Knapsack to merge reports instead of overwrite
	begin
	class Knapsack::Report
	alias_method :save_without_leading_existing_report, :save
	def save
	Knapsack::Presenter.existing_report = open
	save_without_leading_existing_report
	end
	end

	import React from "react";
	import ReactDOM from "react-dom";

	import configureStore from "./store/configureStore";


	const store = configureStore();


	const rootEl = document.getElementById("root");