robrichard

import { renderToPipeableStream } from 'react-server-dom-webpack/server.node';
import { runWithAsyncLocalStorageRelay } from './runWithAsyncLocalStorageRelay';

function handler(req, res, next) {
  const relayEnvironment = createRelayEnvironment(req, res);
  const { Component, props } = getComponent(req);

  runWithAsyncLocalStorageRelay(relayEnvironment, () => {
      const { pipe } = renderToPipeableStream(
          <Component {...props} />,

robrichard

Summary of the latest "no-overlapping-branches" proposal by @benjie & @robrichard

Features

• No overlapping branching.
• No duplicate delivery of any fields
• Reduces the risk of response amplification
• No complex WeakMap/similar caching shenanigans.
• No query rewriting.
• No look-ahead.

robrichard

query HeroFriendsQuery {
  human(id: "1000") {
    friends @stream(initialCount: 2, label: "HumanFriends") {
      id
      ...NameFragment @defer(label: "DeferName")
    }
  }
}

fragment NameFragment on Character {

robrichard

Using @defer under an array field will return multiple patches. Patches are unique combinations of label and path

{
  items {
    id
    ...frag @defer(label: "my-label")
  }
}

robrichard

const express = require('express');
const bodyParser = require('body-parser');
const graphqlHTTP = require('express-graphql');

const app = express();
app.use(bodyParser.json());

async function getPersistedQueryMiddleware(req, res, next) {
  if (!req.body.id) {
    next();

robrichard

import React from 'react';
import PropTypes from 'prop-types';
const relayMock = jest.genMockFromModule('react-relay');

const relayChildContextTypes = {
    relay: PropTypes.object
};

const relayEnvironment = {
    lookup: jest.fn()

robrichard

class MyForm extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            input: {
                email: "",
                name: ""
            },
            blurred: {
                email: false,

robrichard

class MyForm extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            input: {
                email: "",
                name: ""
            }
        };
    }

robrichard

class MyForm extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            input: {
                email: "",
                name: ""
            }
        };
    }

robrichard

class MyForm extends React.Component {
    render() {
        return (
            <form onSubmit={() => /* save your form here */}>
                <div>
                    <input name="email" placeholder="email"/>
                </div>
                <div>
                    <input name="name" placeholder="name"/>
                </div>