Remove unused initialCacheState code from wardrobe-2020

In the impress-2020 app, we use this to prepopulate certain GraphQL
data into the Apollo cache when SSR'ing a page. We don't do that here,
so, goodbye!
This commit is contained in:
Emi Matchu 2023-11-03 18:16:57 -07:00
parent a18ffb22a7
commit 57e262a884
2 changed files with 14 additions and 64 deletions

View file

@ -7,7 +7,7 @@ import { BrowserRouter } from "react-router-dom";
import { Global } from "@emotion/react";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import buildApolloClient from "./apolloClient";
import apolloClient from "./apolloClient";
const reactQueryClient = new QueryClient();
@ -17,65 +17,16 @@ export default function AppProvider({ children }) {
return (
<BrowserRouter>
<QueryClientProvider client={reactQueryClient}>
<DTIApolloProvider>
<ApolloProvider client={apolloClient}>
<ChakraProvider resetCSS={false}>
<ScopedCSSReset>{children}</ScopedCSSReset>
</ChakraProvider>
</DTIApolloProvider>
</ApolloProvider>
</QueryClientProvider>
</BrowserRouter>
);
}
function DTIApolloProvider({ children, additionalCacheState = {} }) {
// Save the first `additionalCacheState` we get as our `initialCacheState`,
// which we'll use to initialize the client without having to wait a tick.
const [initialCacheState, unusedSetInitialCacheState] =
React.useState(additionalCacheState);
const client = React.useMemo(
() => buildApolloClient({ initialCacheState }),
[initialCacheState],
);
// When we get a new `additionalCacheState` object, merge it into the cache:
// copy the previous cache state, merge the new cache state's entries in,
// and "restore" the new merged cache state.
//
// HACK: Using `useMemo` for this is a dastardly trick!! What we want is the
// semantics of `useEffect` kinda, but we need to ensure it happens
// *before* all the children below get rendered, so they don't fire off
// unnecessary network requests. Using `useMemo` but throwing away the
// result kinda does that. It's evil! It's nasty! It's... perfect?
// (This operation is safe to run multiple times too, in case memo
// re-runs it. It's just, y'know, a performance loss. Maybe it's
// actually kinda perfect lol)
//
// I feel like there's probably a better way to do this... like, I want
// the semantic of replacing this client with an updated client - but I
// don't want to actually replace the client, because that'll break
// other kinds of state, like requests loading in the shared layout.
// Idk! I'll see how it goes!
React.useMemo(() => {
const previousCacheState = client.cache.extract();
const mergedCacheState = { ...previousCacheState };
for (const key of Object.keys(additionalCacheState)) {
mergedCacheState[key] = {
...mergedCacheState[key],
...additionalCacheState[key],
};
}
console.debug(
"Merging Apollo cache:",
additionalCacheState,
mergedCacheState,
);
client.cache.restore(mergedCacheState);
}, [client, additionalCacheState]);
return <ApolloProvider client={client}>{children}</ApolloProvider>;
}
function setupLogging() {
Sentry.init({
dsn: "https://c55875c3b0904264a1a99e5b741a221e@o506079.ingest.sentry.io/5595379",

View file

@ -156,25 +156,24 @@ const typePolicies = {
},
};
const cache = new InMemoryCache({ typePolicies });
const httpLink = createHttpLink({
uri: "https://impress-2020.openneo.net/api/graphql",
});
const buildLink = () =>
createPersistedQueryLink({
const link = createPersistedQueryLink({
useGETForHashedQueries: true,
}).concat(httpLink);
}).concat(httpLink);
/**
* apolloClient is the global Apollo Client instance we use for GraphQL
* queries. This is how we communicate with the server!
*/
const buildClient = ({ initialCacheState }) => {
return new ApolloClient({
link: buildLink(),
cache: new InMemoryCache({ typePolicies }).restore(initialCacheState),
const apolloClient = new ApolloClient({
link,
cache,
connectToDevTools: true,
});
};
});
export default buildClient;
export default apolloClient;