Oops, stop clobbering the Apollo client on nav
Ahhh right, a new `initialCacheState` value comes in on every navigation, so if our memoized Apollo client depends on that value, then it's gonna keep getting reset, and thereby dumping everything out of its cache. Rude. This solution is clearly incomplete, the ideal would be to merge the SSR'd data into the cache each time. But it should be fine in practice I think, we already have good coverage of preloading stuff via GraphQL anyway!
This commit is contained in:
parent
c5bd2695f6
commit
544a158f66
1 changed files with 11 additions and 4 deletions
|
@ -41,6 +41,15 @@ export default function DTIApp({ Component, pageProps }: AppPropsWithLayout) {
|
||||||
const renderWithLayout =
|
const renderWithLayout =
|
||||||
Component.renderWithLayout ?? renderWithDefaultLayout;
|
Component.renderWithLayout ?? renderWithDefaultLayout;
|
||||||
|
|
||||||
|
// Store the *first* value of initialCacheState we get into our cache,
|
||||||
|
// because we don't want to rebuild our client and flush out everything else
|
||||||
|
// when the page changes. We set it in state here then never touch it again!
|
||||||
|
// TODO: Is there a clever way to *add* to our cache each time? The Apollo
|
||||||
|
// API suggests not really, but maybe there's a clever option...
|
||||||
|
const [initialCacheState, unusedSetInitialCacheState] = React.useState(
|
||||||
|
pageProps.graphqlState ?? {}
|
||||||
|
);
|
||||||
|
|
||||||
React.useEffect(() => setupLogging(), []);
|
React.useEffect(() => setupLogging(), []);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
@ -61,9 +70,7 @@ export default function DTIApp({ Component, pageProps }: AppPropsWithLayout) {
|
||||||
audience="https://impress-2020.openneo.net/api"
|
audience="https://impress-2020.openneo.net/api"
|
||||||
scope=""
|
scope=""
|
||||||
>
|
>
|
||||||
<ApolloProviderWithAuth0
|
<ApolloProviderWithAuth0 initialCacheState={initialCacheState}>
|
||||||
initialCacheState={pageProps.graphqlState ?? {}}
|
|
||||||
>
|
|
||||||
<ChakraProvider theme={theme}>
|
<ChakraProvider theme={theme}>
|
||||||
<CSSReset />
|
<CSSReset />
|
||||||
{renderWithLayout(<Component {...pageProps} />)}
|
{renderWithLayout(<Component {...pageProps} />)}
|
||||||
|
@ -80,7 +87,7 @@ function renderWithDefaultLayout(children: JSX.Element) {
|
||||||
|
|
||||||
function ApolloProviderWithAuth0({
|
function ApolloProviderWithAuth0({
|
||||||
children,
|
children,
|
||||||
initialCacheState = {},
|
initialCacheState,
|
||||||
}: {
|
}: {
|
||||||
children: React.ReactNode;
|
children: React.ReactNode;
|
||||||
initialCacheState: NormalizedCacheObject;
|
initialCacheState: NormalizedCacheObject;
|
||||||
|
|
Loading…
Reference in a new issue