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
- Remove all usages of
relay-nextjs
in_document.tsx
. - Replace
getInitialPreloadedQuery
andgetRelayProps
withuseRelayNextjs
:
const { env, ...relayProps } = useRelayNextjs(pageProps, {
createClientEnvironment: () => getClientEnvironment()!,
});
- Remove usage of
hydrateRelayEnvironment
andwithHydrateDatetime
. These API's are no longer needed.