diff --git a/app/javascript/wardrobe-2020/AppProvider.js b/app/javascript/wardrobe-2020/AppProvider.js index 90d48f4c..ddbe5fa2 100644 --- a/app/javascript/wardrobe-2020/AppProvider.js +++ b/app/javascript/wardrobe-2020/AppProvider.js @@ -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 ( - + {children} - + ); } -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 {children}; -} - function setupLogging() { Sentry.init({ dsn: "https://c55875c3b0904264a1a99e5b741a221e@o506079.ingest.sentry.io/5595379", diff --git a/app/javascript/wardrobe-2020/apolloClient.js b/app/javascript/wardrobe-2020/apolloClient.js index 8559a3ce..d53aa033 100644 --- a/app/javascript/wardrobe-2020/apolloClient.js +++ b/app/javascript/wardrobe-2020/apolloClient.js @@ -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;