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 { 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",
|
||||||
|
|
|
@ -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;
|
||||||
|
|
Loading…
Reference in a new issue