What Changed

• Updated default fetchPolicy to store-or-network.
• Fixed bug when determining default variables from context.

What's Changed

• Removed fetchPolicy configuration option.
• Added queryOptionsFromContext configuration as a replacement. This new configuration option mirrors variablesFromContext and allows programmatically setting the options argument to useLazyLoadQuery.

Migration

This section is only relevant if using the fetchPolicy API. queryOptionsFromContext has replaced this API, allowing for more configuration options when making the GraphQL request as well as modifying the options based on the query itself. A simple migration looks like:

- fetchPolicy: 'store-or-network',
+ queryOptionsFromContext: () => ({ fetchPolicy: 'store-or-network' }) 

What's Changed

Configuration API's from v1 have been restored! The following options are once again available:

• fetchPolicy
• serverSidePostQuery

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.

What's Changed

• Devx improvements by @GioLogist in https://github.com/RevereCRE/relay-nextjs/pull/78
• Handle case were query does not have a default property by @robertt in https://github.com/RevereCRE/relay-nextjs/pull/82

New Contributors

• @robertt made their first contribution in https://github.com/RevereCRE/relay-nextjs/pull/82

Full Changelog: https://github.com/RevereCRE/relay-nextjs/compare/v1.0.1...v1.0.2

What's Changed

• Support async getClientInitialProps w backwards compabitible typing by @GioLogist in https://github.com/RevereCRE/relay-nextjs/pull/77

New Contributors

• @GioLogist made their first contribution in https://github.com/RevereCRE/relay-nextjs/pull/77

Full Changelog: https://github.com/RevereCRE/relay-nextjs/compare/v1.0.0...v1.0.1

Breaking changes

hydrateRelayEnvironment

Removed public export of getRelaySerializedState in favor of new API: hydrateRelayEnvironment. To migrate remove all calls to getRelaySerializedState during the creation of Environment on the client and call the new API directly after instantiation:

clientEnv = new Environment({
  network: createClientNetwork(),
  store: new Store(new RecordSource()),
  isServer: false,
});

hydrateRelayEnvironment(clientEnv);

We don't expect this migration to be difficult, however it is necessary. The old export has been removed so you will get a type error upon upgrading. For more details please see the new API docs and example migration.

__wired__ serialized script

The data serialized into the __wired__ script tag was changed. Previously the entire Relay store was extracted from the server and then rehydrated. The new serialized data shape reduces the amount of bytes transferred over the wire by onlyserializing the initial GraphQL API response. This is rehydrated into the Relay store on the client using commitPayload. We don't expect this change to impact anyone, if it does please open a new issue or discussion. Note that this change unblocks using Relay resolvers in relay-nextjs apps.

Full Changelog: https://github.com/RevereCRE/relay-nextjs/compare/v0.10.1...v1.0.0

What's Changed

• Add serverSidePostQuery hook to access query data + NextContext during SSR by @FINDarkside in https://github.com/RevereCRE/relay-nextjs/pull/74

Full Changelog: https://github.com/RevereCRE/relay-nextjs/compare/v0.9.0...v0.10.0

Breaking Changes

• Removed ErrorComponent configuration option, prefer using a custom error boundary at the root level of your app (in _app.ts).
• Changed logic for detecting if query variables have changed, this should prevent unintended re-renderings.

Full Changelog: https://github.com/RevereCRE/relay-nextjs/compare/v0.8.0...v0.9.0

What's Changed

• Upgrade next.js and relay in example by @supaspoida in https://github.com/RevereCRE/relay-nextjs/pull/50
• Pass error to ErrorComponent by @gio-work in https://github.com/RevereCRE/relay-nextjs/pull/49

New Contributors

• @supaspoida made their first contribution in https://github.com/RevereCRE/relay-nextjs/pull/50
• @gio-work made their first contribution in https://github.com/RevereCRE/relay-nextjs/pull/49

Full Changelog: https://github.com/RevereCRE/relay-nextjs/compare/v0.7.0...v0.8.0

What's Changed

• docs: Add artifactDirectory configuration description by @ErgoFriend in https://github.com/RevereCRE/relay-nextjs/pull/44
• Make fetch policy configurable by @FINDarkside in https://github.com/RevereCRE/relay-nextjs/pull/46

New Contributors

• @ErgoFriend made their first contribution in https://github.com/RevereCRE/relay-nextjs/pull/44

Full Changelog: https://github.com/RevereCRE/relay-nextjs/compare/v0.6.0...v0.7.0

• Fixes #41
• Adds better types to the ErrorComponent option

What's Changed

• Update ignore plugin params for Next 11 by @httpsOmkar in https://github.com/RevereCRE/relay-nextjs/pull/31
• Client-side props are now passed to page components

Full Changelog: https://github.com/RevereCRE/relay-nextjs/compare/v0.4.1...v0.5.0

What's Changed

• feat: you can now pass props to the script. by @httpsOmkar in https://github.com/RevereCRE/relay-nextjs/pull/24
• Allow user to use custom error boundry component by @monoppa in https://github.com/RevereCRE/relay-nextjs/pull/23
• improve doc by @alailsonko in https://github.com/RevereCRE/relay-nextjs/pull/29
• fix: typo fix by @alailsonko in https://github.com/RevereCRE/relay-nextjs/pull/28

New Contributors

• @httpsOmkar made their first contribution in https://github.com/RevereCRE/relay-nextjs/pull/24
• @monoppa made their first contribution in https://github.com/RevereCRE/relay-nextjs/pull/23
• @alailsonko made their first contribution in https://github.com/RevereCRE/relay-nextjs/pull/29

Full Changelog: https://github.com/RevereCRE/relay-nextjs/compare/v0.4.0...v0.4.1

Bug Fixes

• Fixed a bug where changing router params didn't use the configured variablesFromContext

Breaking Changes

• Tightened up typings around variablesFromContext

Added

• Added new variablesFromContext configuration to the component API, defaults to returning ctx.query

Breaking Changes

• Queries are now reloaded when query variables change

Breaking Changes

• Removed the error configuration, handling 404's and errors during rendering should now be handled by the application. Previously this relied on a specific error message being reported by the GraphQL server.