Upgrade to React Query 5

ResilienceWeb · Nov 2, 2023 · a917319 · a917319
1 parent faf8c3d
commit a917319
Show file tree

Hide file tree

Showing 38 changed files with 416 additions and 252 deletions.
diff --git a/components/admin/permissions-list/PermissionsList.tsx b/components/admin/permissions-list/PermissionsList.tsx
@@ -48,7 +48,7 @@ const PermissionsList = ({ permissions }) => {
   const { webs } = useWebs()
   const { data: session } = useSession()
   const { selectedWebId } = useAppContext()
-  const { mutate: updatePermission, isLoading: isUpdatingPermission } =
+  const { mutate: updatePermission, isPending: isUpdatingPermission } =
     useUpdatePermission()
 
   const onSubmit = useCallback(

diff --git a/hooks/categories/useCategories.tsx b/hooks/categories/useCategories.tsx
@@ -21,25 +21,21 @@ async function fetchCategoriesRequest({ queryKey }) {
   return categories
 }
 
-export default function useCategories(): {
-  categories: Category[]
-  isLoading: boolean
-  isError: boolean
-} {
+export default function useCategories() {
   const { selectedWebSlug: webSlug } = useAppContext()
   const {
     data: categories,
-    isLoading,
+    isPending,
     isError,
-  } = useQuery({
+  } = useQuery<Category[]>({
     queryKey: ['categories', { webSlug }],
     queryFn: fetchCategoriesRequest,
     refetchOnWindowFocus: false,
   })
 
   return {
     categories,
-    isLoading,
+    isPending,
     isError,
   }
 }
diff --git a/hooks/categories/useCreateCategory.tsx b/hooks/categories/useCreateCategory.tsx
@@ -28,13 +28,17 @@ export default function useCreateCategory() {
   return useMutation({
     mutationFn: createCategoryRequest,
     onMutate: async (newCategory) => {
-      await queryClient.cancelQueries(['categories'])
+      await queryClient.cancelQueries({
+        queryKey: ['categories'],
+      })
       const previousCategories = queryClient.getQueryData(['categories'])
       queryClient.setQueryData(['categories'], newCategory)
       return { previousCategories }
     },
     onSettled: () => {
-      void queryClient.invalidateQueries(['categories'])
+      void queryClient.invalidateQueries({
+        queryKey: ['categories'],
+      })
     },
   })
 }
diff --git a/hooks/categories/useDeleteCategory.tsx b/hooks/categories/useDeleteCategory.tsx
@@ -22,7 +22,9 @@ export default function useDeleteCategory() {
       queryClient.setQueryData(['categories', { webSlug, id: data.id }], data)
     },
     onSettled: () => {
-      void queryClient.invalidateQueries(['categories', { webSlug }])
+      void queryClient.invalidateQueries({
+        queryKey: ['categories', { webSlug }],
+      })
     },
   })
 }
diff --git a/hooks/categories/useUpdateCategory.tsx b/hooks/categories/useUpdateCategory.tsx
@@ -21,7 +21,9 @@ export default function useUpdateCategory() {
   return useMutation({
     mutationFn: updateCategoryRequest,
     onMutate: async (newCategory) => {
-      await queryClient.cancelQueries(['categories'])
+      await queryClient.cancelQueries({
+        queryKey: ['categories'],
+      })
       const previousCategories = queryClient.getQueryData(['categories'])
       queryClient.setQueryData(['categories'], newCategory)
       return { previousCategories, newCategory }
@@ -33,7 +35,9 @@ export default function useUpdateCategory() {
       )
     },
     onSettled: () => {
-      void queryClient.invalidateQueries(['categories'])
+      void queryClient.invalidateQueries({
+        queryKey: ['categories'],
+      })
     },
   })
 }
diff --git a/hooks/listings/useAddRelation.tsx b/hooks/listings/useAddRelation.tsx
@@ -21,7 +21,9 @@ export default function useAddRelation() {
   return useMutation({
     mutationFn: addRelationRequest,
     onMutate: async (newRelation) => {
-      await queryClient.cancelQueries(['relations'])
+      await queryClient.cancelQueries({
+        queryKey: ['relations'],
+      })
       const previousRelations = queryClient.getQueryData(['relations'])
       queryClient.setQueryData(['relations', newRelation.id], newRelation)
       return { previousRelations, newRelation }
@@ -30,7 +32,9 @@ export default function useAddRelation() {
       queryClient.setQueryData(['relations'], context.previousRelations)
     },
     onSettled: () => {
-      void queryClient.invalidateQueries(['relations'])
+      void queryClient.invalidateQueries({
+        queryKey: ['relations'],
+      })
     },
   })
 }
diff --git a/hooks/listings/useAllListings.tsx b/hooks/listings/useAllListings.tsx
@@ -10,13 +10,13 @@ async function fetchListingsRequest() {
 export default function useAllListings() {
   const {
     data: listings,
-    isLoading,
+    isPending,
     isError,
   } = useQuery({ queryKey: ['listings'], queryFn: fetchListingsRequest })
 
   return {
     listings,
-    isLoading,
+    isPending,
     isError,
   }
 }
diff --git a/hooks/listings/useCreateListing.tsx b/hooks/listings/useCreateListing.tsx
@@ -23,7 +23,9 @@ export default function useCreateListing() {
   return useMutation({
     mutationFn: createListingRequest,
     onMutate: async (newListing) => {
-      await queryClient.cancelQueries(['listings'])
+      await queryClient.cancelQueries({
+        queryKey: ['listings'],
+      })
       const previousListings = queryClient.getQueryData(['listings'])
       queryClient.setQueryData(['listings', newListing.id], newListing)
       return { previousListings, newListing }
@@ -32,7 +34,9 @@ export default function useCreateListing() {
       queryClient.setQueryData(['listings'], context.previousListings)
     },
     onSettled: () => {
-      void queryClient.invalidateQueries(['listings'])
+      void queryClient.invalidateQueries({
+        queryKey: ['listings'],
+      })
     },
   })
 }
diff --git a/hooks/listings/useDeleteListing.tsx b/hooks/listings/useDeleteListing.tsx
@@ -18,7 +18,9 @@ export default function useDeleteListing() {
       queryClient.setQueryData(['listings', { id: data.id }], data)
     },
     onSettled: () => {
-      void queryClient.invalidateQueries(['listings'])
+      void queryClient.invalidateQueries({
+        queryKey: ['listings'],
+      })
     },
   })
 }
diff --git a/hooks/listings/useListing.tsx b/hooks/listings/useListing.tsx
@@ -14,7 +14,7 @@ export default function useListing(listingSlug) {
   const { selectedWebSlug: webSlug } = useAppContext()
   const {
     data: listing,
-    isLoading,
+    isPending,
     isError,
   } = useQuery({
     queryKey: ['listing', { webSlug, listingSlug }],
@@ -28,7 +28,7 @@ export default function useListing(listingSlug) {
 
   return {
     listing,
-    isLoading,
+    isPending,
     isError,
   }
 }
diff --git a/hooks/listings/useListings.tsx b/hooks/listings/useListings.tsx
@@ -14,7 +14,7 @@ export default function useListings() {
   const { selectedWebSlug: webSlug } = useAppContext()
   const {
     data: listings,
-    isLoading,
+    isPending,
     isError,
   } = useQuery({
     queryKey: ['listings', { webSlug }],
@@ -23,7 +23,7 @@ export default function useListings() {
 
   return {
     listings,
-    isLoading,
+    isPending,
     isError,
   }
 }
diff --git a/hooks/listings/useUpdateListing.tsx b/hooks/listings/useUpdateListing.tsx
@@ -25,7 +25,9 @@ export default function useUpdateListing() {
       queryClient.setQueryData(['listings', { id: data.id }], data)
     },
     onMutate: async (newListing) => {
-      await queryClient.cancelQueries(['listings', newListing.id])
+      await queryClient.cancelQueries({
+        queryKey: ['listings', newListing.id],
+      })
       const previousListing = queryClient.getQueryData([
         'listings',
         newListing.id,
@@ -40,7 +42,9 @@ export default function useUpdateListing() {
       )
     },
     onSettled: () => {
-      void queryClient.invalidateQueries(['listings'])
+      void queryClient.invalidateQueries({
+        queryKey: ['listings'],
+      })
     },
   })
 }
diff --git a/hooks/ownership/useMyOwnerships.tsx b/hooks/ownership/useMyOwnerships.tsx
@@ -12,7 +12,7 @@ export default function useMyOwnerships() {
 
   const {
     data: ownerships,
-    isLoading,
+    isPending,
     isError,
   } = useQuery({
     queryKey: ['my-ownerships'],
@@ -23,7 +23,7 @@ export default function useMyOwnerships() {
 
   return {
     ownerships,
-    isLoading,
+    isPending,
     isError,
   }
 }
diff --git a/hooks/ownership/useOwnerships.tsx b/hooks/ownership/useOwnerships.tsx
@@ -15,7 +15,7 @@ export default function useOwnerships() {
 
   const {
     data: ownerships,
-    isLoading,
+    isPending,
     isError,
   } = useQuery({
     queryKey: ['ownerships', { webSlug }],
@@ -26,7 +26,7 @@ export default function useOwnerships() {
 
   return {
     ownerships,
-    isLoading,
+    isPending,
     isError,
   }
 }
diff --git a/hooks/permissions/useAllPermissions.tsx b/hooks/permissions/useAllPermissions.tsx
@@ -13,7 +13,7 @@ export default function useAllPermissions() {
 
   const {
     data: permissions,
-    isLoading,
+    isPending,
     isError,
   } = useQuery({
     queryKey: ['all-permissions'],
@@ -23,7 +23,7 @@ export default function useAllPermissions() {
 
   return {
     permissions,
-    isLoading,
+    isPending,
     isError,
   }
 }
diff --git a/hooks/permissions/usePermissions.tsx b/hooks/permissions/usePermissions.tsx
@@ -14,7 +14,7 @@ export default function usePermissions() {
 
   const {
     data: permissions,
-    isLoading,
+    isPending,
     isError,
   } = useQuery({
     queryKey: ['permission'],
@@ -24,7 +24,7 @@ export default function usePermissions() {
 
   return {
     permissions,
-    isLoading,
+    isPending,
     isError,
   }
 }
diff --git a/hooks/permissions/usePermissionsForCurrentWeb.tsx b/hooks/permissions/usePermissionsForCurrentWeb.tsx
@@ -16,7 +16,7 @@ export default function usePermissionsForCurrentWeb() {
 
   const {
     data: permissions,
-    isLoading,
+    isPending,
     isError,
   } = useQuery({
     queryKey: ['current-web-permissions', { webSlug }],
@@ -26,7 +26,7 @@ export default function usePermissionsForCurrentWeb() {
 
   return {
     data: permissions,
-    isLoading,
+    isPending,
     isError,
   }
 }
diff --git a/hooks/permissions/useUpdatePermission.tsx b/hooks/permissions/useUpdatePermission.tsx
@@ -21,10 +21,9 @@ export default function useUpdatePermission() {
   return useMutation({
     mutationFn: updatePermissionRequest,
     onMutate: async (newPermission) => {
-      await queryClient.cancelQueries([
-        'permission',
-        { email: newPermission.email },
-      ])
+      await queryClient.cancelQueries({
+        queryKey: ['permission', { email: newPermission.email }],
+      })
       const previousPermissions = queryClient.getQueryData([
         'permission',
         { email: newPermission.email },
@@ -42,7 +41,9 @@ export default function useUpdatePermission() {
       )
     },
     onSettled: () => {
-      void queryClient.invalidateQueries(['permission'])
+      void queryClient.invalidateQueries({
+        queryKey: ['permission'],
+      })
     },
   })
 }
diff --git a/hooks/tags/useCreateTag.tsx b/hooks/tags/useCreateTag.tsx
@@ -21,13 +21,17 @@ export default function useCreateTag() {
   return useMutation({
     mutationFn: createTagRequest,
     onMutate: async (newTag) => {
-      await queryClient.cancelQueries(['tags'])
+      await queryClient.cancelQueries({
+        queryKey: ['tags'],
+      })
       const previousTags = queryClient.getQueryData(['tags'])
       queryClient.setQueryData(['tags'], newTag)
       return { previousTags }
     },
     onSettled: () => {
-      void queryClient.invalidateQueries(['tags'])
+      void queryClient.invalidateQueries({
+        queryKey: ['tags'],
+      })
     },
   })
 }
diff --git a/hooks/tags/useTags.tsx b/hooks/tags/useTags.tsx
@@ -22,25 +22,21 @@ async function fetchTagsRequest({ queryKey }) {
   return all ? tags : tags.filter((tag) => tag.listings.length > 0)
 }
 
-export default function useTags(): {
-  tags: Tag[]
-  isLoading: boolean
-  isError: boolean
-} {
+export default function useTags() {
   const { selectedWebSlug: webSlug, isAdminMode } = useAppContext()
   const {
     data: tags,
-    isLoading,
+    isPending,
     isError,
-  } = useQuery({
+  } = useQuery<Tag[]>({
     queryKey: ['tags', { webSlug, all: isAdminMode }],
     queryFn: fetchTagsRequest,
     refetchOnWindowFocus: false,
   })
 
   return {
     tags,
-    isLoading,
+    isPending,
     isError,
   }
 }