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:
parent
a18ffb22a7
commit
57e262a884
2 changed files with 14 additions and 64 deletions
|
@ -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",
|
||||
|
|
|
@ -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({
|
||||
useGETForHashedQueries: true,
|
||||
}).concat(httpLink);
|
||||
const link = createPersistedQueryLink({
|
||||
useGETForHashedQueries: true,
|
||||
}).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),
|
||||
connectToDevTools: true,
|
||||
});
|
||||
};
|
||||
const apolloClient = new ApolloClient({
|
||||
link,
|
||||
cache,
|
||||
connectToDevTools: true,
|
||||
});
|
||||
|
||||
export default buildClient;
|
||||
export default apolloClient;
|
||||
|
|
Loading…
Reference in a new issue