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}`,
-    async () => {
     const { data } = await axios.get(`/api/players/${playerId}`);
     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,7 +54,8 @@ const Player = ({ playerId, players }) => {
           </Tr>
         </Thead>
         <Tbody>
-          {playerStats.data.map((x, i) => {
+          {playerStats.isSuccess ? (
+            playerStats.data.map((x, i) => {
               return (
                 <Tr key={i}>
                   <Td>
@@ -72,7 +67,10 @@ const Player = ({ playerId, players }) => {
                   <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}`,
-    async () => {
     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,7 +46,8 @@ const Statistic = ({ type, name, players }) => {
           </Tr>
         </Thead>
         <Tbody>
-          {ranking.data.map((x, i) => {
+          {ranking.isSuccess ? (
+            ranking.data.map((x, i) => {
               return (
                 <Tr key={i}>
                   <Td>
@@ -64,7 +59,10 @@ const Statistic = ({ type, name, players }) => {
                   <Td isNumeric>{x.value}</Td>
                 </Tr>
               );
-          })}
+            })
+          ) : (
+            <></>
+          )}
         </Tbody>
       </Table>
     </>