React Relay Provider

(optional) install react-error-boundary

pnpm add react-error-boundary

import { Suspense } from 'react'
import { RelayEnvironmentProvider } from 'react-relay'
import { relayEnvironment } from './relayEnvironment'
import { ErrorBoundary, FallbackProps } from 'react-error-boundary'

type RelayProviderProps = {
  children: React.ReactNode
}

export const RelayProvider: React.FC<RelayProviderProps> = ({ children }) => {
  return (
    <RelayEnvironmentProvider environment={relayEnvironment}>
      <ErrorBoundary FallbackComponent={AppErrorFallback}>
        <Suspense fallback={<AppLoading />}>
        {children}
        </Suspense>
      </ErrorBoundary>
    </RelayEnvironmentProvider>
  )
}

const AppLoading = () => (
  <>
    Loading...
  </>
)

const AppErrorFallback: React.FC<FallbackProps> = ({ error, resetErrorBoundary }) => {
  return (
    <div role='alert'>
      <p>Something went wrong:</p>
      <pre>{error.message}</pre>
      <button onClick={resetErrorBoundary}>Try again</button>
    </div>
  )
}

then wrap that around App in main.tsx

// main.tsx
import { createRoot } from 'react-dom/client'

import { RelayProvider } from './providers/RelayProvider'

import App from './App'

createRoot(document.getElementById('root') as HTMLElement).render(
  <RelayProvider>
    <App />
  </RelayProvider>
)