renderer.tsx

const EnvironmentProvider = environment => props => {
  return (
    <ReactRelayContext.Provider
      {...props}
      value={{ environment: environment, variables: {} }}
    />
  );
};

async function createRelayEnvironment(req) {
  const relaySSRMiddleware = new RelayServerSSR();

  relaySSRMiddleware.debug = true;

  const network = new RelayNetworkLayer([
    relaySSRMiddleware.getMiddleware({
      schema: await generateSchema(),
      contextValue: prepareContext(req)
    })
  ]);

  const store = new Store(new RecordSource());
  const environment = new Environment({
    network,
    store
  });

  return {
    store,
    environment,
    relaySSRMiddleware
  };
}

export default async function render(req, res, next) {
  try {
    const {
      environment,
      store,
      relaySSRMiddleware
    } = await createRelayEnvironment(req);

    const helmetContext: FilledContext = { helmet: null };
    const EnvProvider = EnvironmentProvider(environment);

    // Kick off an initial render to start the queries.
    ReactDOMServer.renderToString(
      <EnvProvider>
        <FooApp />
      </EnvProvider>
    );

    // Wait for all the queries to load.
    const relayData = await relaySSRMiddleware.getCache();

    // Inject fully loaded data into another rendering.
    const CompleteEnvProvider = EnvironmentProvider(
      new Environment({
        network: Network.create(() => relayData[0][1]),
        store
      })
    );

    // Re-compile, this time with complete html.
    const html = ReactDOMServer.renderToString(
      <CompleteEnvProvider>
        <FooApp />
      </CompleteEnvProvider>
    );

    res.status(200).send(`... output to be hydrated ...`);
  } catch (error) {
    res.status(500).send(`... Some error handling message ...`);
  }
}