v2.0.0

What's Changed

relay-nextjs has a new API! We no longer require a custom _document.tsx. The only global configuration needed is a single hook in _app.tsx:

// pages/_app.tsx
import { getClientEnvironment } from 'lib/relay_client_environment';
import type { AppProps } from 'next/app';
import { RelayEnvironmentProvider } from 'react-relay/hooks';
import { useRelayNextjs } from 'relay-nextjs/app';
import 'tailwindcss/tailwind.css';

function ExampleApp({ Component, pageProps }: AppProps) {
  const { env, ...relayProps } = useRelayNextjs(pageProps, {
    createClientEnvironment: () => getClientEnvironment()!,
  });

  return (
    <RelayEnvironmentProvider environment={env}>
      <Component {...pageProps} {...relayProps} />
    </RelayEnvironmentProvider>
  );
}

export default ExampleApp;

Please note the page API remains untouched, the only migration needed for v2.0.0 is in _app.tsx.

Migration Steps

Example Migration

1. Remove all usages of relay-nextjs in _document.tsx.
2. Replace getInitialPreloadedQuery and getRelayProps with useRelayNextjs:

  const { env, ...relayProps } = useRelayNextjs(pageProps, {
    createClientEnvironment: () => getClientEnvironment()!,
  });

3. Remove usage of hydrateRelayEnvironment and withHydrateDatetime. These API's are no longer needed.