0.6.0: reduced bundle size and "nonce" support
This release reduces the bundle size by changing an import from graphql
. (#161)
It also adds support for a "nonce"
in the script tags created by this package, by introducing a new extraScriptProps
option. (#160)
Usage example:
<ApolloNextAppProvider
makeClient={makeClient}
extraScriptProps={{
nonce: actualNonce,
}}
>{...}</ApolloNextAppProvider>
As you should not pass a sensitive value like a nonce
or a token
as props from a Server Component into a Client Component, you can use the ssr-only-secrets we published for that purpose.
Generate a jwk-formatted AES-CBC key (see details in the linked package) and set it as an environment variable, e.g. "SECRET_KEY_VAR"
In a Server Component:
import { cloakSSROnlySecret } from "ssr-only-secrets";
const MyServerComponent = () => {
const nonce = headers().get('x-nonce')
return <ApolloWrapper nonce={cloakSSROnlySecret(nonce, "SECRET_KEY_VAR")} />
}
In your ApolloWrapper:
export function ApolloWrapper({
children,
nonce,
}: React.PropsWithChildren<{ nonce?: string }>) {
// other code, e.g. `makeClient`
const actualNonce = useSSROnlySecret(nonce, "SECRET_KEY_VAR");
return (
<ApolloNextAppProvider
makeClient={makeClient}
extraScriptProps={{
nonce: actualNonce,
}}
>
{children}
</ApolloNextAppProvider>
);
}