RelayStorybook

RelayStorybook.tsx

import type { ReactNode } from 'react';
import React, { useEffect, useState } from 'react';
import { RelayEnvironmentProvider } from 'react-relay';
import type { IEnvironment } from 'relay-runtime';
import { createMockEnvironment, MockPayloadGenerator } from 'relay-test-utils';

type RelayStorybookProps = {
  children: ReactNode;
  mockResolvers: Record<string, unknown>;
  suspense: boolean;
};
export const RelayStorybook = ({
  children,
  mockResolvers,
  suspense = false,
}: RelayStorybookProps): ReactNode => {
  const [environment] = useState<IEnvironment>(() => createMockEnvironment());

  useEffect(() => {
    try {
      environment.mock.resolveMostRecentOperation((operation) =>
        MockPayloadGenerator.generate(operation, mockResolvers),
      );

      if (suspense) {
        environment.mock.resolveMostRecentOperation((operation) =>
          MockPayloadGenerator.generate(operation, mockResolvers),
        );
      }
    } catch (err) {
      // handle no operation
      // eslint-disable-next-line
      console.log({
        err,
      });
    }
  }, []);

  return (
    <RelayEnvironmentProvider environment={environment}>
      {children}
    </RelayEnvironmentProvider>
  );
};

usage.tsx

import type { ReactNode } from 'react';
import React, { useEffect, useState } from 'react';
import { RelayEnvironmentProvider } from 'react-relay';
import type { IEnvironment } from 'relay-runtime';
import { createMockEnvironment, MockPayloadGenerator } from 'relay-test-utils';

type RelayStorybookProps = {
  children: ReactNode;
  mockResolvers: Record<string, unknown>;
  suspense: boolean;
};
export const RelayStorybook = ({
  children,
  mockResolvers,
  suspense = false,
}: RelayStorybookProps): ReactNode => {
  const [environment] = useState<IEnvironment>(() => createMockEnvironment());

  useEffect(() => {
    try {
      environment.mock.resolveMostRecentOperation((operation) =>
        MockPayloadGenerator.generate(operation, mockResolvers),
      );

      if (suspense) {
        environment.mock.resolveMostRecentOperation((operation) =>
          MockPayloadGenerator.generate(operation, mockResolvers),
        );
      }
    } catch (err) {
      // handle no operation
      // eslint-disable-next-line
      console.log({
        err,
      });
    }
  }, []);

  return (
    <RelayEnvironmentProvider environment={environment}>
      {children}
    </RelayEnvironmentProvider>
  );
};