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 { Global } from "@emotion/react";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import buildApolloClient from "./apolloClient"; import apolloClient from "./apolloClient";
const reactQueryClient = new QueryClient(); const reactQueryClient = new QueryClient();
@ -17,65 +17,16 @@ export default function AppProvider({ children }) {
return ( return (
<BrowserRouter> <BrowserRouter>
<QueryClientProvider client={reactQueryClient}> <QueryClientProvider client={reactQueryClient}>
<DTIApolloProvider> <ApolloProvider client={apolloClient}>
<ChakraProvider resetCSS={false}> <ChakraProvider resetCSS={false}>
<ScopedCSSReset>{children}</ScopedCSSReset> <ScopedCSSReset>{children}</ScopedCSSReset>
</ChakraProvider> </ChakraProvider>
</DTIApolloProvider> </ApolloProvider>
</QueryClientProvider> </QueryClientProvider>
</BrowserRouter> </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() { function setupLogging() {
Sentry.init({ Sentry.init({
dsn: "https://c55875c3b0904264a1a99e5b741a221e@o506079.ingest.sentry.io/5595379", dsn: "https://c55875c3b0904264a1a99e5b741a221e@o506079.ingest.sentry.io/5595379",

View file

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