Use hooks to mutate favourites

The recommended way to mutate data in react-query is with its mutation hooks.
This also ensures react-query can handle invalidation.

src/components/button-favourite/button-favourite.tsx

@@ -3,8 +3,8 @@ import { useQueryClient } from "react-query";
 import LoadIcon from "@danskernesdigitalebibliotek/dpl-design-system/build/icons/collection/Reload.svg";
 import { IconFavourite } from "../icon-favourite/icon-favourite";
 import {
-  removeItem,
-  useHasItem
+  useHasItem,
+  useRemoveItem
 } from "../../core/material-list-api/material-list";
 import { useText } from "../../core/utils/text";
 import { Pid, WorkId } from "../../core/utils/types/ids";
@@ -29,14 +29,15 @@ const ButtonFavourite: React.FC<ButtonFavouriteProps> = ({
   const [fillState, setFillState] = useState<boolean>(false);
   const [isLoadingHeart, setIsLoadingHeart] = useState<boolean>(true);
   const t = useText();
-  const { mutate } = useHasItem();
+  const { mutate: hasItemMutate } = useHasItem();
+  const { mutate: removeItemMutate } = useRemoveItem();
   const { track } = useStatistics();
 
   useEffect(() => {
     // The heart icon needs to change into a loading icon while the material
     // is being removed from the favorite list
     setIsLoadingHeart(true);
-    mutate(
+    hasItemMutate(
       {
         listId: "default",
         itemId: id
@@ -55,13 +56,19 @@ const ButtonFavourite: React.FC<ButtonFavouriteProps> = ({
         }
       }
     );
-  }, [id, mutate]);
+  }, [id, hasItemMutate]);
 
   const handleClick = useCallback(
     (e: React.MouseEvent<HTMLButtonElement>) => {
       if (fillState) {
-        removeItem("default", id, queryClient);
-        setFillState(false);
+        removeItemMutate(
+          { listId: "default", itemId: id },
+          {
+            onSuccess: () => {
+              setFillState(false);
+            }
+          }
+        );
       } else {
         track("click", {
           id: statistics.addToFavorites.id,
@@ -75,7 +82,7 @@ const ButtonFavourite: React.FC<ButtonFavouriteProps> = ({
       // this wont interfere with their click handler.
       e.stopPropagation();
     },
-    [addToListRequest, fillState, id, queryClient, track]
+    [addToListRequest, fillState, id, queryClient, removeItemMutate, track]
   );
 
   return (

src/core/guardedRequests.slice.ts

@@ -1,7 +1,5 @@
 import { createSlice, createAsyncThunk, PayloadAction } from "@reduxjs/toolkit";
-// eslint-disable-next-line import/no-cycle
-import { QueryClient } from "react-query";
-import { addItem } from "./material-list-api/material-list";
+import { useAddItem } from "./material-list-api/material-list";
 // TODO: Fix dependency cycle problem
 // There is not an obvious solution but we need access to the persistor
 // in the guardedRequest thunk.
@@ -26,8 +24,9 @@ interface Callback<T1, T2 = void> {
 const requestCallbacks: {
   [key: string]: Callback<Record<string, unknown>>;
 } = {
-  addFavorite: ({ id, queryClient }) => {
-    return addItem("default", id as string, queryClient as QueryClient);
+  addFavorite: ({ id }) => {
+    const mutation = useAddItem();
+    return mutation.mutateAsync({ listId: "default", itemId: id as string });
   }
 };