Improve error handling - just display nothing

spa/src/App.js

@@ -41,14 +41,17 @@ const App = () => {
               <Statistic
                 type={routeProps.match.params.type}
                 name={routeProps.match.params.name}
-                players={players}
+                players={players.data}
               />
             )}
           />
           <Route
             path="/player/:id"
             render={(routeProps) => (
-              <Player playerId={routeProps.match.params.id} players={players} />
+              <Player
+                playerId={routeProps.match.params.id}
+                players={players.data}
+              />
             )}
           />
           <Route>

spa/src/Player.js

@@ -16,19 +16,13 @@ import { Link } from "react-router-dom";
 import prettifyStatisticName from "./PrettifyStatisticName";
 
 const Player = ({ playerId, players }) => {
-  const playerStats = useQuery(
+  const playerStats = useQuery(`player ${playerId}`, async () => {
-    `player ${playerId}`,
+    const { data } = await axios.get(`/api/players/${playerId}`);
-    async () => {
+    data.sort((a, b) => a.rank - b.rank || b.value - a.value);
-      const { data } = await axios.get(`/api/players/${playerId}`);
+    return data.filter((x) => x.value > 0);
-      data.sort((a, b) => a.rank - b.rank || b.value - a.value);
+  });
-      return data.filter((x) => x.value > 0);
-    },
-    {
-      placeholderData: [],
-    }
-  );
 
-  const playerName = players.data.find((x) => x.id === playerId)?.name;
+  const playerName = players?.find((x) => x.id === playerId)?.name;
 
   return (
     <>
@@ -60,19 +54,23 @@ const Player = ({ playerId, players }) => {
           </Tr>
         </Thead>
         <Tbody>
-          {playerStats.data.map((x, i) => {
+          {playerStats.isSuccess ? (
-            return (
+            playerStats.data.map((x, i) => {
-              <Tr key={i}>
+              return (
-                <Td>
+                <Tr key={i}>
-                  <Link to={`/statistic/${x.type}/${x.name}`}>
+                  <Td>
-                    {prettifyStatisticName(x.type, x.name)}
+                    <Link to={`/statistic/${x.type}/${x.name}`}>
-                  </Link>
+                      {prettifyStatisticName(x.type, x.name)}
-                </Td>
+                    </Link>
-                <Td isNumeric>{x.rank}</Td>
+                  </Td>
-                <Td isNumeric>{x.value}</Td>
+                  <Td isNumeric>{x.rank}</Td>
-              </Tr>
+                  <Td isNumeric>{x.value}</Td>
-            );
+                </Tr>
-          })}
+              );
+            })
+          ) : (
+            <></>
+          )}
         </Tbody>
       </Table>
     </>

spa/src/Statistic.js

@@ -15,19 +15,13 @@ import { Link } from "react-router-dom";
 import prettifyStatisticName from "./PrettifyStatisticName";
 
 const Statistic = ({ type, name, players }) => {
-  const ranking = useQuery(
+  const ranking = useQuery(`statistic ${type} ${name}`, async () => {
-    `statistic ${type} ${name}`,
+    const { data } = await axios.get(`/api/statistics/${type}/${name}`);
-    async () => {
+    return data.filter((x) => x.value > 0);
-      const { data } = await axios.get(`/api/statistics/${type}/${name}`);
+  });
-      return data.filter((x) => x.value > 0);
-    },
-    {
-      placeholderData: [],
-    }
-  );
 
   const playerDict = useMemo(() => {
-    return Object.assign({}, ...players.data.map((x) => ({ [x.id]: x.name })));
+    return Object.assign({}, ...players.map((x) => ({ [x.id]: x.name })));
   }, [players]);
 
   return (
@@ -52,19 +46,23 @@ const Statistic = ({ type, name, players }) => {
           </Tr>
         </Thead>
         <Tbody>
-          {ranking.data.map((x, i) => {
+          {ranking.isSuccess ? (
-            return (
+            ranking.data.map((x, i) => {
-              <Tr key={i}>
+              return (
-                <Td>
+                <Tr key={i}>
-                  <Link to={`/player/${x.playerId}`}>
+                  <Td>
-                    {playerDict[x.playerId]}
+                    <Link to={`/player/${x.playerId}`}>
-                  </Link>
+                      {playerDict[x.playerId]}
-                </Td>
+                    </Link>
-                <Td isNumeric>{x.rank}</Td>
+                  </Td>
-                <Td isNumeric>{x.value}</Td>
+                  <Td isNumeric>{x.rank}</Td>
-              </Tr>
+                  <Td isNumeric>{x.value}</Td>
-            );
+                </Tr>
-          })}
+              );
+            })
+          ) : (
+            <></>
+          )}
         </Tbody>
       </Table>
     </>