Skip to content

0.6.0: reduced bundle size and "nonce" support

Compare
Choose a tag to compare
@phryneas phryneas released this 05 Jan 10:59
· 170 commits to main since this release
452ebc4

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>
  );
}