React Server Component Relay Example

example-usage.ts

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} />,
          clientManifest
      );
      pipe(res);
  });

}

relayAsyncLocalStorage.ts

import { Environment } from 'relay-runtime';
import { AsyncLocalStorage } from 'node:async_hooks';

export const relayLocalStorage = new AsyncLocalStorage<Environment>();

rscFetchQuery.ts

import { fetchQuery, OperationType, GraphQLTaggedNode } from 'relay-runtime';
import { relayLocalStorage } from './relayAsyncLocalStorage';

export function rscFetchQuery<T extends OperationType>(
    taggedNode: GraphQLTaggedNode,
    variables: T['variables']
): Promise<T['response']> {
    const environment = relayLocalStorage.getStore();
    if (!environment) {
        throw new Error('Must be run inside `runWithAsyncLocalStorageRelay` from `dibs-rsc-relay`');
    }

    return fetchQuery(environment, taggedNode, variables).toPromise();
}

rscReadFragment.ts

import {
    getSelector,
    getFragment,
    GraphQLTaggedNode,
    PluralReaderSelector,
    ReaderSelector,
} from 'relay-runtime';
import { relayLocalStorage } from './relayAsyncLocalStorage';
import type {
    KeyType,
    KeyTypeData,
    ArrayKeyType,
    ArrayKeyTypeData,
} from 'react-relay/relay-hooks/helpers';

function readerSelectorIsPlural(selector: ReaderSelector): selector is PluralReaderSelector {
    return selector.kind === 'PluralReaderSelector';
}

function rscReadFragment<TKey extends KeyType>(
    fragmentInput: GraphQLTaggedNode,
    fragmentRef: TKey
): KeyTypeData<TKey>;

function rscReadFragment<TKey extends KeyType>(
    fragmentInput: GraphQLTaggedNode,
    fragmentRef: TKey | null
): KeyTypeData<TKey> | null;

function rscReadFragment<TKey extends ArrayKeyType>(
    fragmentInput: GraphQLTaggedNode,
    fragmentRef: TKey
): ArrayKeyTypeData<TKey>;

function rscReadFragment<TKey extends ArrayKeyType>(
    fragmentInput: GraphQLTaggedNode,
    fragmentRef: TKey | null
): ArrayKeyTypeData<TKey> | null;

function rscReadFragment<TKey extends ArrayKeyType>(
    fragmentInput: GraphQLTaggedNode,
    fragmentRef: TKey | null
): ArrayKeyTypeData<TKey> | null {
    if (!fragmentRef) {
        return null;
    }
    const environment = relayLocalStorage.getStore();
    if (!environment) {
        throw new Error('Must be run inside `runWithAsyncLocalStorageRelay` from `dibs-rsc-relay`');
    }
    const fragmentSelector = getSelector(getFragment(fragmentInput), fragmentRef);
    if (readerSelectorIsPlural(fragmentSelector)) {
        return fragmentSelector.selectors.map(s => environment.lookup(s));
    } else {
        // eslint-disable-next-line @typescript-eslint/no-explicit-any
        return environment.lookup(fragmentSelector as any).data as any;
    }
}

export { rscReadFragment };

runWithAsyncLocalStorageRelay.ts

import { Environment } from 'relay-runtime';
import { relayLocalStorage } from './relayAsyncLocalStorage';

export function runWithAsyncLocalStorageRelay(environment: Environment, cb: () => void): void {
    relayLocalStorage.run(environment, cb);
}

This allows fetching data and reading fragments with Relay in React Server Components. It does not attempt to allow passing fragment references between server and client components.