implement react-query for edge-cases (#1711)

When initially implementing react-query, we focussed on core features. This pull request now replaces the remaining apiClient usages in ui-components and ui-webapp with react-query hooks.

scm-ui/ui-api/src/branches.test.ts

@@ -36,9 +36,9 @@ describe("Test branches hooks", () => {
     type: "hg",
     _links: {
       branches: {
-        href: "/hog/branches"
-      }
-    }
+        href: "/hog/branches",
+      },
+    },
   };
 
   const develop: Branch = {
@@ -46,16 +46,16 @@ describe("Test branches hooks", () => {
     revision: "42",
     _links: {
       delete: {
-        href: "/hog/branches/develop"
-      }
-    }
+        href: "/hog/branches/develop",
+      },
+    },
   };
 
   const branches: BranchCollection = {
     _embedded: {
-      branches: [develop]
+      branches: [develop],
     },
-    _links: {}
+    _links: {},
   };
 
   const queryClient = createInfiniteCachingClient();
@@ -73,7 +73,7 @@ describe("Test branches hooks", () => {
       fetchMock.getOnce("/api/v2/hog/branches", branches);
 
       const { result, waitFor } = renderHook(() => useBranches(repository), {
-        wrapper: createWrapper(undefined, queryClient)
+        wrapper: createWrapper(undefined, queryClient),
       });
       await waitFor(() => {
         return !!result.current.data;
@@ -94,7 +94,7 @@ describe("Test branches hooks", () => {
         "repository",
         "hitchhiker",
         "heart-of-gold",
-        "branches"
+        "branches",
       ]);
       expect(data).toEqual(branches);
     });
@@ -105,7 +105,7 @@ describe("Test branches hooks", () => {
       fetchMock.getOnce("/api/v2/hog/branches/develop", develop);
 
       const { result, waitFor } = renderHook(() => useBranch(repository, "develop"), {
-        wrapper: createWrapper(undefined, queryClient)
+        wrapper: createWrapper(undefined, queryClient),
       });
 
       expect(result.error).toBeUndefined();
@@ -128,14 +128,14 @@ describe("Test branches hooks", () => {
       fetchMock.postOnce("/api/v2/hog/branches", {
         status: 201,
         headers: {
-          Location: "/hog/branches/develop"
-        }
+          Location: "/hog/branches/develop",
+        },
       });
 
       fetchMock.getOnce("/api/v2/hog/branches/develop", develop);
 
       const { result, waitForNextUpdate } = renderHook(() => useCreateBranch(repository), {
-        wrapper: createWrapper(undefined, queryClient)
+        wrapper: createWrapper(undefined, queryClient),
       });
 
       await act(() => {
@@ -160,7 +160,7 @@ describe("Test branches hooks", () => {
         "hitchhiker",
         "heart-of-gold",
         "branch",
-        "develop"
+        "develop",
       ]);
       expect(branch).toEqual(develop);
     });
@@ -177,11 +177,11 @@ describe("Test branches hooks", () => {
   describe("useDeleteBranch tests", () => {
     const deleteBranch = async () => {
       fetchMock.deleteOnce("/api/v2/hog/branches/develop", {
-        status: 204
+        status: 204,
       });
 
       const { result, waitForNextUpdate } = renderHook(() => useDeleteBranch(repository), {
-        wrapper: createWrapper(undefined, queryClient)
+        wrapper: createWrapper(undefined, queryClient),
       });
 
       await act(() => {
@@ -198,12 +198,12 @@ describe("Test branches hooks", () => {
       expect(isDeleted).toBe(true);
     });
 
-    it("should invalidate branch", async () => {
+    it("should delete branch cache", async () => {
       queryClient.setQueryData(["repository", "hitchhiker", "heart-of-gold", "branch", "develop"], develop);
       await deleteBranch();
 
       const queryState = queryClient.getQueryState(["repository", "hitchhiker", "heart-of-gold", "branch", "develop"]);
-      expect(queryState!.isInvalidated).toBe(true);
+      expect(queryState).toBeUndefined();
     });
 
     it("should invalidate cached branches list", async () => {