fix: breaking change after react-query update

B-urb · Feb 27, 2024 · bf2193a · bf2193a
1 parent 4e4cc5c
commit bf2193a
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 5 deletions.
diff --git a/frontend/src/SessionDetail.tsx b/frontend/src/SessionDetail.tsx
@@ -10,13 +10,14 @@ const SessionDetail = () => {
   const sessionId = params["sessionId"]
   const queryClient = useQueryClient()
 
-  const mutation = useMutation(startGame, {
+  const mutation = useMutation({
+    mutationFn: startGame,
     // Optional: onSuccess callback if you want to perform any actions after successful mutation
     onSuccess: (data) => {
       const game: Game = data.data
       console.log(game)
       // For example, you can invalidate and refetch something after a mutation
-      queryClient.invalidateQueries("Games");
+      queryClient.invalidateQueries({queryKey: ["Games"]});
       navigate(`game/${game.id}`)
     },
   })

diff --git a/frontend/src/SessionsOverview.tsx b/frontend/src/SessionsOverview.tsx
@@ -16,10 +16,13 @@ function toGermanDate(dateString: string) {
 }
 const SessionsOverview = (props: { id: string }) => {
   const navigate = useNavigate()
-  const {status, data, error} = useQuery<GameSession[], Error>(["Sessions", props.id], () => getSessions(props.id))
+  const {status, data, error} = useQuery<GameSession[], Error>({
+    queryKey: ["Sessions", props.id],
+    queryFn: () => getSessions(props.id)
+  })
 
-  return <Container>{status === 'idle' && <div>idle</div>}
-    {status === 'loading' && <span>Loading...</span>}
+  return <Container>
+    {status === 'pending' && <span>Loading...</span>}
     {status === 'error' && <span>Error: {error?.message}</span>}
     {status === 'success' && data && Object.keys(data).length > 0 && (