refactor!(react-query): update react query to v5

Lots of breaking changes in v5. Codemods didn't work due to a ESM/CJS issue.
This commit won't work due to the v5 changes coming at the same time and DM API v2

Author: OliverDudgeon

components/CreateDatasetStorageSubscription.tsx

@@ -50,7 +50,7 @@ export const CreateDatasetStorageSubscription = ({
             },
           });
           enqueueSnackbar("Created product", { variant: "success" });
-          queryClient.invalidateQueries(getGetProductsQueryKey());
+          queryClient.invalidateQueries({ queryKey: getGetProductsQueryKey() });
         } catch (error) {
           enqueueError(error);
           captureException(error);

components/MolCard/DepictMolecule.tsx

@@ -94,14 +94,12 @@ const getImage = async (molFile: string, { depictURL, ...depictParams }: DepictP
 };
 
 const useGetImage = (molFile: string, depictParams: DepictParameters) =>
-  useQuery(
-    [`depict-mol-${molFile}-${Object.values(depictParams).join(",")}`],
-    () => getImage(molFile, depictParams),
-    {
-      refetchOnWindowFocus: false,
-      staleTime: Infinity,
-    },
-  );
+  useQuery({
+    queryKey: [`depict-mol-${molFile}-${Object.values(depictParams).join(",")}`],
+    queryFn: () => getImage(molFile, depictParams),
+    refetchOnWindowFocus: false,
+    staleTime: Infinity,
+  });
 
 const LazyMolFileImage = (props: Parameters<typeof MolFileImage>[0]) => {
   const [wasSeen, ref] = useWasSeen();

components/instances/ArchiveInstance.tsx

@@ -24,8 +24,8 @@ export const ArchiveInstance = ({ instanceId, archived }: ArchiveInstanceProps)
     setArchiving(true);
     await patchInstance({ instanceId, params: { archive: !archived } });
     await Promise.allSettled([
-      queryClient.invalidateQueries(getGetInstanceQueryKey(instanceId)),
-      queryClient.invalidateQueries(getGetInstancesQueryKey()),
+      queryClient.invalidateQueries({ queryKey: getGetInstanceQueryKey(instanceId) }),
+      queryClient.invalidateQueries({ queryKey: getGetInstancesQueryKey() }),
     ]);
     setArchiving(false);
   };

components/instances/TerminateInstance.tsx

@@ -50,8 +50,10 @@ export const TerminateInstance = ({
       onDelete={async () => {
         try {
           await terminateInstance({ instanceId });
-          queryClient.invalidateQueries(getGetInstancesQueryKey());
-          queryClient.invalidateQueries(getGetInstancesQueryKey({ project_id: projectId }));
+          queryClient.invalidateQueries({ queryKey: getGetInstancesQueryKey() });
+          queryClient.invalidateQueries({
+            queryKey: getGetInstancesQueryKey({ project_id: projectId }),
+          });
 
           enqueueSnackbar(`Instance has been ${done ? "deleted" : "terminated"}`, {
             variant: "success",

components/labels/Labels.tsx

@@ -57,7 +57,7 @@ export const Labels = ({ datasetId, datasetVersion }: LabelsProps) => {
                   ]),
                 },
               });
-              queryClient.invalidateQueries(getGetDatasetsQueryKey());
+              queryClient.invalidateQueries({ queryKey: getGetDatasetsQueryKey() });
             } catch (error) {
               enqueueError(error);
             }

components/labels/NewLabelButton.tsx

@@ -63,7 +63,7 @@ export const NewLabelButton = ({ datasetId }: NewLabelButtonProps) => {
                   ]),
                 },
               });
-              await queryClient.invalidateQueries(getGetDatasetsQueryKey());
+              await queryClient.invalidateQueries({ queryKey: getGetDatasetsQueryKey() });
             } catch (error) {
               enqueueError(error);
             } finally {

components/products/AdjustProjectProduct.tsx

@@ -48,8 +48,8 @@ export const AdjustProjectProduct = ({ product, allowance }: AdjustProjectProduc
           try {
             await adjustProduct({ productId: product.id, data: values });
             await Promise.allSettled([
-              queryClient.invalidateQueries(getGetProductsQueryKey()),
-              queryClient.invalidateQueries(getGetProductQueryKey(product.id)),
+              queryClient.invalidateQueries({ queryKey: getGetProductsQueryKey() }),
+              queryClient.invalidateQueries({ queryKey: getGetProductQueryKey(product.id) }),
             ]);
             enqueueSnackbar("Updated product", { variant: "success" });
           } catch (error) {

components/products/DeleteProductButton.tsx

@@ -39,11 +39,11 @@ export const DeleteProductButton = ({
         try {
           await deleteProduct({ productId: product.id });
           await Promise.allSettled([
-            queryClient.invalidateQueries(getGetProductsQueryKey()),
-            queryClient.invalidateQueries(getGetProductQueryKey(product.id)),
-            queryClient.invalidateQueries(
-              unitId ? getGetProductsForUnitQueryKey(unitId) : undefined,
-            ),
+            queryClient.invalidateQueries({ queryKey: getGetProductsQueryKey() }),
+            queryClient.invalidateQueries({ queryKey: getGetProductQueryKey(product.id) }),
+            queryClient.invalidateQueries({
+              queryKey: unitId ? getGetProductsForUnitQueryKey(unitId) : undefined,
+            }),
           ]);
           enqueueSnackbar("Product deleted", { variant: "success" });
         } catch (error) {

components/projects/CreateProjectForm.tsx

@@ -102,10 +102,10 @@ export const CreateProjectForm = ({ modal, unitId, product }: CreateProjectFormP
       });
       enqueueSnackbar("Project created");
 
-      queryClient.invalidateQueries(getGetProjectsQueryKey());
-      queryClient.invalidateQueries(getGetProductsQueryKey());
+      queryClient.invalidateQueries({ queryKey: getGetProjectsQueryKey() });
+      queryClient.invalidateQueries({ queryKey: getGetProductsQueryKey() });
       typeof unitId === "string" &&
-        queryClient.invalidateQueries(getGetProductsForUnitQueryKey(unitId));
+        queryClient.invalidateQueries({ queryKey: getGetProductsForUnitQueryKey(unitId) });
 
       setCurrentProjectId(project_id);
     } catch (error) {

components/projects/EditProjectButton/PrivateProjectToggle.tsx

@@ -16,7 +16,7 @@ export interface PrivateProjectToggleProps {
 }
 
 export const PrivateProjectToggle = ({ projectId, isPrivate }: PrivateProjectToggleProps) => {
-  const { mutateAsync: adjustProject, isLoading } = usePatchProject();
+  const { mutateAsync: adjustProject, isPending } = usePatchProject();
   const { enqueueError, enqueueSnackbar } = useEnqueueError();
   const queryClient = useQueryClient();
 
@@ -27,7 +27,7 @@ export const PrivateProjectToggle = ({ projectId, isPrivate }: PrivateProjectTog
           checked={isPrivate}
           // Disable the switch until all relevant requests have resolved
           disabled={
-            isLoading ||
+            isPending ||
             (!!projectId &&
               queryClient.getQueryState(getGetProjectQueryKey(projectId))?.fetchStatus ===
                 "fetching")
@@ -41,8 +41,8 @@ export const PrivateProjectToggle = ({ projectId, isPrivate }: PrivateProjectTog
                     private: checked,
                   },
                 });
-                queryClient.invalidateQueries(getGetProjectsQueryKey());
-                queryClient.invalidateQueries(getGetProjectQueryKey(projectId));
+                queryClient.invalidateQueries({ queryKey: getGetProjectsQueryKey() });
+                queryClient.invalidateQueries({ queryKey: getGetProjectQueryKey(projectId) });
 
                 if (checked) {
                   enqueueSnackbar("The project has been made private", { variant: "success" });