fix: solved unmounted component warning when logging out from Library

• replaced useQuery with useLazyQuery + useEffect in Library
• apollographql/apollo-client#6209 (comment)

src/App.tsx

@@ -11,14 +11,23 @@ import {
 
 import GameProfile from './pages/GameProfile';
 import NavBar from './components/NavBar';
-import GameSearchDropList from './pages/Home';
+import Home from './pages/Home';
 import Library from './pages/Library';
 import useCurrentUser from './hooks/useCurrentUser';
 import FullPageSpinner from './components/FullPageSpinner';
+import { useLazyQuery } from '@apollo/client';
+import { FIND_GAMES } from './graphql/queries';
 
 function App() {
-  const { authenticatedUser: userLoggedIn, loading } = useCurrentUser();
-  console.log('app user: ', userLoggedIn, ' - loading: ', loading);
+  const {
+    authenticatedUser: userLoggedIn,
+    loading: loadingUser,
+  } = useCurrentUser();
+  console.log('app user: ', userLoggedIn, ' - loadingUser: ', loadingUser);
+
+  const [findGames, { data: games, loading: loadingGames }] = useLazyQuery(
+    FIND_GAMES
+  );
 
   return (
     <div
@@ -40,18 +49,34 @@ function App() {
             <GameProfile userLoggedIn={userLoggedIn} />
           </Route>
 
-          <Route path={'/library'}>
+          {/* <Route path={'/library'}>
             {userLoggedIn ? (
               <Library />
-            ) : loading ? (
+            ) : loadingUser ? (
               <FullPageSpinner />
             ) : (
               <Redirect to='/' />
             )}
+          </Route> */}
+
+          {/* <Route path={'/library'}>
+            <Library />
+            {!userLoggedIn && <Redirect to='/' />}
+          </Route> */}
+
+
+          <Route path={'/library'}>
+            {!userLoggedIn ? (
+              <Redirect to='/' />
+            ) : loadingUser ? (
+              <FullPageSpinner />
+            ) : (
+              <Library />
+            )}
           </Route>
 
           <Route path='/'>
-            <GameSearchDropList />
+            <Home />
           </Route>
         </Switch>
       </Router>

src/graphql/fragments.ts

@@ -1,6 +1,6 @@
 import { gql } from "@apollo/client"
 
- export const GAME_DETAILS = gql`
+export const GAME_DETAILS = gql`
   fragment GameDetails on Game {
     id
     name
@@ -21,11 +21,4 @@ fragment UserDetails on User {
   id
   email
 }
-`
-
-// export const GAME_IN_LIBRARY = gql`
-// fragment GameInLibrary on GameInUserLibrary{
-//   id
-//   igdb_game_id
-// }
-// `
+`

src/graphql/queries.ts

@@ -18,15 +18,21 @@ export const FIND_GAMES = gql`
   ${GAME_DETAILS}
 `
 
+
 export const CURRENT_USER = gql`
   query isLoggedIn{
     me {
       ...UserDetails
+      gamesInLibrary {
+        id
+        igdb_game_id
+    }
     }
   }
   ${USER_DETAILS}
 `
 
+
 export const GET_LIBRARY_IDS = gql`
   query getLibraryIds{
     getLibraryIds {

src/pages/Home.tsx

@@ -9,7 +9,7 @@ import { Tooltip } from '@reach/tooltip';
 import { Spinner, Input } from '../components/styledComponentsLibrary';
 import { FaSearch } from 'react-icons/fa';
 
-const GameSearchDropList = () => {
+const Home = () => {
   const [games, setGames] = useState([]);
   const [query, setQuery] = useState('');
   const [debouncedQuery] = useDebounce(query, 250); //https://www.npmjs.com/package/use-debounce
@@ -91,4 +91,4 @@ const GameSearchDropList = () => {
   );
 };
 
-export default GameSearchDropList;
+export default Home;

src/pages/Library.tsx

@@ -1,16 +1,29 @@
 /** @jsxImportSource @emotion/react */
 
-import { useQuery } from '@apollo/client';
+import { useLazyQuery, useQuery } from '@apollo/client';
+import { useEffect } from 'react';
 import { Link } from 'react-router-dom';
 import FullPageSpinner from '../components/FullPageSpinner';
 import GameList from '../components/GameList';
 import { GET_LIBRARY } from '../graphql/queries';
 
 const Library = () => {
   console.log('inlib');
-  const { data: libraryResponse, loading: libraryLoading } = useQuery(
-    GET_LIBRARY
-  );
+  // I use useLazyQuery+useEffect to prevent a React Strict Mode warning related to async callbacks on unmountd components.
+  // https://github.com/apollographql/apollo-client/issues/6209
+  const [
+    getLibrary,
+    { data: libraryResponse, loading: libraryLoading },
+  ] = useLazyQuery(GET_LIBRARY);
+
+  // execute query on component mount
+  useEffect(() => {
+    getLibrary();
+  }, [getLibrary]);
+
+  // const { data: libraryResponse, loading: libraryLoading } = useQuery(
+  //   GET_LIBRARY
+  // );
 
   if (libraryLoading) return <FullPageSpinner />;
 

src/types.ts

@@ -22,6 +22,7 @@ export interface User {
   id: string;
   // username: String!
   email: string;
+  gamesInLibrary: [GameInUserLibrary];
 }
 
 export interface LoginDetails {
@@ -30,11 +31,11 @@ export interface LoginDetails {
 }
 
 export interface GameInUserLibrary {
-  id?: number;
+  id: number;
   igdb_game_id: number;
 }
 
-export interface libraryIdsResponse { // review (AddToLibraryButton.tsx)
+export interface libraryIdsResponse { // review
   getLibraryIds: GameInUserLibrary[];
 }