From 544a158f66c90ec65d3cc7b5fc1e350f4079c00a Mon Sep 17 00:00:00 2001 From: Matchu Date: Thu, 15 Sep 2022 03:16:25 -0700 Subject: [PATCH] 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! --- pages/_app.tsx | 15 +++++++++++---- 1 file changed, 11 insertions(+), 4 deletions(-) diff --git a/pages/_app.tsx b/pages/_app.tsx index 800e180..5f0211b 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -41,6 +41,15 @@ export default function DTIApp({ Component, pageProps }: AppPropsWithLayout) { const renderWithLayout = 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(), []); return ( @@ -61,9 +70,7 @@ export default function DTIApp({ Component, pageProps }: AppPropsWithLayout) { audience="https://impress-2020.openneo.net/api" scope="" > - + {renderWithLayout()} @@ -80,7 +87,7 @@ function renderWithDefaultLayout(children: JSX.Element) { function ApolloProviderWithAuth0({ children, - initialCacheState = {}, + initialCacheState, }: { children: React.ReactNode; initialCacheState: NormalizedCacheObject;