Demonstrate cache deletion and garbage collection

hwillson · hwillson · commit e2e8d63b611a · 2020-07-20T08:58:59.000-04:00
Remove all user details from the cache when logging out,
using a combination of `cache.modify()` and `cache.gc()`.
diff --git a/final/client/src/cache.ts b/final/client/src/cache.ts
@@ -33,4 +33,3 @@ export const cache: InMemoryCache = new InMemoryCache({
 export const isLoggedInVar =
   cache.makeLocalVar<boolean>(!!localStorage.getItem('token'));
 export const cartItemsVar = cache.makeLocalVar<string[]>([]);
-
diff --git a/final/client/src/containers/logout-button.tsx b/final/client/src/containers/logout-button.tsx
@@ -1,16 +1,38 @@
 import React from 'react';
 import styled from 'react-emotion';
+import { useApolloClient } from '@apollo/client';
 
 import { menuItemClassName } from '../components/menu-item';
 import { isLoggedInVar } from '../cache';
 import { ReactComponent as ExitIcon } from '../assets/icons/exit.svg';
 
 const LogoutButton = () => {
+  const { cache } = useApolloClient();
   return (
     <StyledButton
       data-testid="logout-button"
       onClick={() => {
+        // Since we're logging out, remove all traces of the current user
+        // from the cache. First use `cache.modify()` to remove the stored
+        // `me` reference that was added to the cache by the `GET_MY_TRIPS`
+        // query in `profile.tsx`. Then trigger garbage collection using
+        // `cache.gc()` to remove the cached `User` object that is no longer
+        // reachable.
+        cache.modify(
+          'ROOT_QUERY',
+          {
+            me(_, { DELETE }) {
+              return DELETE;
+            }
+          }
+        );
+        cache.gc();
+
+        // Remove user details from localStorage.
         localStorage.clear();
+
+        // Let other parts of the application that are relying on logged in
+        // state know we're now logged out.
         isLoggedInVar(false);
 
         // TODO: This redirect is temporary. Eventually `makeLocalVar`
