⚡️ Relay integration for Next.js apps
MIT License
fetchPolicy
to store-or-network
.Published by rrdelaney about 1 year ago
fetchPolicy
configuration option.queryOptionsFromContext
configuration as a replacement. This new configuration option mirrors variablesFromContext
and allows programmatically setting the options
argument to useLazyLoadQuery
.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' })
Published by rrdelaney over 1 year ago
Configuration API's from v1 have been restored! The following options are once again available:
fetchPolicy
serverSidePostQuery
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
.
relay-nextjs
in _document.tsx
.getInitialPreloadedQuery
and getRelayProps
with useRelayNextjs
: const { env, ...relayProps } = useRelayNextjs(pageProps, {
createClientEnvironment: () => getClientEnvironment()!,
});
hydrateRelayEnvironment
and withHydrateDatetime
. These API's are no longer needed.Published by rrdelaney over 1 year ago
query
does not have a default
property by @robertt in https://github.com/RevereCRE/relay-nextjs/pull/82
Full Changelog: https://github.com/RevereCRE/relay-nextjs/compare/v1.0.1...v1.0.2
Published by rrdelaney almost 2 years ago
Full Changelog: https://github.com/RevereCRE/relay-nextjs/compare/v1.0.0...v1.0.1
Published by rrdelaney almost 2 years ago
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 scriptThe 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
Published by rrdelaney about 2 years ago
Full Changelog: https://github.com/RevereCRE/relay-nextjs/compare/v0.9.0...v0.10.0
Published by rrdelaney about 2 years ago
ErrorComponent
configuration option, prefer using a custom error boundary at the root level of your app (in _app.ts
).Full Changelog: https://github.com/RevereCRE/relay-nextjs/compare/v0.8.0...v0.9.0
Published by rrdelaney over 2 years ago
Full Changelog: https://github.com/RevereCRE/relay-nextjs/compare/v0.7.0...v0.8.0
Published by rrdelaney over 2 years ago
Full Changelog: https://github.com/RevereCRE/relay-nextjs/compare/v0.6.0...v0.7.0
Published by rrdelaney almost 3 years ago
ErrorComponent
optionPublished by rrdelaney almost 3 years ago
Full Changelog: https://github.com/RevereCRE/relay-nextjs/compare/v0.4.1...v0.5.0
Published by rrdelaney about 3 years ago
Full Changelog: https://github.com/RevereCRE/relay-nextjs/compare/v0.4.0...v0.4.1
Published by rrdelaney over 3 years ago
variablesFromContext
variablesFromContext
Published by rrdelaney over 3 years ago
variablesFromContext
configuration to the component API, defaults to returning ctx.query
Published by rrdelaney over 3 years ago
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.