Invalidate Store (#278)

* chore: revert pull-request #255, and use invalidateStore instead

* move config to logout.mutation

Co-authored-by: Seyyed Morteza Moosavi <smmoosavi@users.noreply.github.com>

src/App.tsx

@@ -3,16 +3,17 @@ import { ConfirmProvider } from 'src/shared/confirm-provider';
 import { CssBaseline, ThemeProvider } from '@material-ui/core';
 import { GlobalStyles } from 'src/core/styles/GlobalStyles';
 import { MDXProvider } from 'src/shared/mdx-provider/MDXProvider';
+import { RelayEnvironmentProvider } from 'react-relay/hooks';
 import { RtlSupportProvider } from 'src/core/rtl/RtlSupportProvider';
 import { SnackbarProvider } from 'src/core/snackbar';
 import { rtlTheme } from 'src/core/theme';
 
 import { AppRouter } from './AppRouter';
-import { RelayEnvironmnetContextProvider } from './relay/RelayEnvironmentContext';
+import { environment } from './relay';
 
 const App: React.FC = () => {
   return (
-    <RelayEnvironmnetContextProvider>
+    <RelayEnvironmentProvider environment={environment}>
       <RtlSupportProvider>
         <ThemeProvider theme={rtlTheme}>
           <GlobalStyles />
@@ -26,7 +27,7 @@ const App: React.FC = () => {
           </SnackbarProvider>
         </ThemeProvider>
       </RtlSupportProvider>
-    </RelayEnvironmnetContextProvider>
+    </RelayEnvironmentProvider>
   );
 };
 

src/containers/main/NavbarUser.tsx

@@ -6,7 +6,6 @@ import { IconButton, Theme, Typography, makeStyles } from '@material-ui/core';
 import { Styles } from 'src/shared/types/Styles';
 import { getUserLabel } from 'src/shared/utils/getUserLabel';
 import { useAuthGuardUser } from 'src/core/auth';
-import { useRelayEnvironmentReset } from 'src/relay';
 
 import { useLogoutMutation } from './logout.mutation';
 
@@ -18,13 +17,10 @@ export function NavbarUser(props: Props) {
   const classes = useStyles(props);
 
   const logoutMutation = useLogoutMutation();
-  const resetEnvironment = useRelayEnvironmentReset();
 
   const handleLogout = useCallback(() => {
-    return logoutMutation({ input: {} }).then(() => {
-      resetEnvironment();
-    });
-  }, [logoutMutation, resetEnvironment]);
+    return logoutMutation();
+  }, [logoutMutation]);
 
   const user = useAuthGuardUser();
 

src/containers/main/logout.mutation.ts

@@ -1,15 +1,24 @@
 import graphql from 'babel-plugin-relay/macro';
+import { useCallback } from 'react';
 import { useMutation } from 'src/relay';
 
-export const useLogoutMutation = () =>
-  useMutation(graphql`
-    mutation logoutMutation($input: LogoutMutationInput!) {
-      logout(input: $input) {
-        viewer {
-          me {
-            ...AuthGuard_user
-          }
+import { logoutMutation } from './__generated__/logoutMutation.graphql';
+
+const mutation = graphql`
+  mutation logoutMutation($input: LogoutMutationInput!) {
+    logout(input: $input) {
+      viewer {
+        me {
+          ...AuthGuard_user
         }
       }
     }
-  `);
+  }
+`;
+
+export const useLogoutMutation = () => {
+  const logout = useMutation<logoutMutation>(mutation);
+  return useCallback(() => {
+    logout({ input: {} }, { updater: (store) => store.invalidateStore() });
+  }, [logout]);
+};

src/relay-runtime.d.ts

@@ -0,0 +1,12 @@
+import 'relay-runtime';
+
+declare module 'relay-runtime' {
+  interface RecordSourceSelectorProxy {
+    /**
+     * Globally invalidates the Relay store. This will cause any data that was written to the store before invalidation occurred to be
+     * considered stale, and will be considered to require refetch the next time a query is
+     * checked with `environment.check()`.
+     */
+    invalidateStore(): void;
+  }
+}

src/relay/index.ts

@@ -1,7 +1,3 @@
 export { commitMutation } from './helpers/commitMutation';
 export { useMutation } from './helpers/useMutation';
-export {
-  RelayEnvironmnetContextProvider,
-  useRelayEnvironmentReset,
-  RelayEnvironmentResetContext,
-} from './RelayEnvironmentContext';
+export { environment } from './environments';

src/stories/decorators/RelayDecorator.tsx

@@ -3,9 +3,9 @@ import { FullPageSpinner } from 'src/shared/loading';
 import { RelayEnvironmentProvider } from 'react-relay/hooks';
 import { StoryFn } from '@storybook/addons';
 import { StoryFnReactReturnType } from '@storybook/react/dist/client/preview/types';
+import { environment } from 'src/relay';
 
 import { StoryDummy } from './StoryDummy';
-import { environment } from '../environment';
 
 export const relayDecorator = () => (storyFn: StoryFn<StoryFnReactReturnType>) => (
   <RelayEnvironmentProvider environment={environment}>