Use query hooks in product image viiew

src/products/queries.ts

@@ -252,7 +252,7 @@ const productImageQuery = gql`
     }
   }
 `;
-export const TypedProductImageQuery = TypedQuery<
+export const useProductImageQuery = makeQuery<
   ProductImageById,
   ProductImageByIdVariables
 >(productImageQuery);

src/products/views/ProductImage.tsx

@@ -7,14 +7,12 @@ import { commonMessages } from "@saleor/intl";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
-import { maybe } from "../../misc";
 import ProductImagePage from "../components/ProductImagePage";
 import {
-  TypedProductImageDeleteMutation,
-  TypedProductImageUpdateMutation
+  useProductImageDeleteMutation,
+  useProductImageUpdateMutation
 } from "../mutations";
-import { TypedProductImageQuery } from "../queries";
-import { ProductImageUpdate } from "../types/ProductImageUpdate";
+import { useProductImageQuery } from "../queries";
 import {
   productImageUrl,
   ProductImageUrlQueryParams,
@@ -38,36 +36,37 @@ export const ProductImage: React.FC<ProductImageProps> = ({
   const intl = useIntl();
 
   const handleBack = () => navigate(productUrl(productId));
-  const handleUpdateSuccess = (data: ProductImageUpdate) => {
+
+  const { data, loading } = useProductImageQuery({
+    displayLoader: true,
+    variables: {
+      imageId,
+      productId
+    }
+  });
+
+  const [updateImage, updateResult] = useProductImageUpdateMutation({
+    onCompleted: data => {
       if (data.productImageUpdate.errors.length === 0) {
         notify({
           status: "success",
           text: intl.formatMessage(commonMessages.savedChanges)
         });
       }
-  };
-  return (
-    <TypedProductImageQuery
-      displayLoader
-      variables={{
-        imageId,
-        productId
-      }}
-    >
-      {({ data, loading }) => {
+    }
+  });
+
+  const [deleteImage, deleteResult] = useProductImageDeleteMutation({
+    onCompleted: handleBack
+  });
+
   const product = data?.product;
 
   if (product === null) {
     return <NotFoundPage onBack={() => navigate(productListUrl())} />;
   }
 
-        return (
-          <TypedProductImageUpdateMutation onCompleted={handleUpdateSuccess}>
-            {(updateImage, updateResult) => (
-              <TypedProductImageDeleteMutation onCompleted={handleBack}>
-                {(deleteImage, deleteResult) => {
-                  const handleDelete = () =>
-                    deleteImage({ variables: { id: imageId } });
+  const handleDelete = () => deleteImage({ variables: { id: imageId } });
   const handleImageClick = (id: string) => () =>
     navigate(productImageUrl(productId, id));
   const handleUpdate = (formData: { description: string }) => {
@@ -78,15 +77,15 @@ export const ProductImage: React.FC<ProductImageProps> = ({
       }
     });
   };
-                  const image = data && data.product && data.product.mainImage;
+  const image = data?.product?.mainImage;
 
   return (
     <>
       <ProductImagePage
         disabled={loading}
-                        product={maybe(() => data.product.name)}
+        product={data?.product?.name}
         image={image || null}
-                        images={maybe(() => data.product.images)}
+        images={data?.product?.images}
         onBack={handleBack}
         onDelete={() =>
           navigate(
@@ -100,9 +99,7 @@ export const ProductImage: React.FC<ProductImageProps> = ({
         saveButtonBarState={updateResult.status}
       />
       <ActionDialog
-                        onClose={() =>
-                          navigate(productImageUrl(productId, imageId), true)
-                        }
+        onClose={() => navigate(productImageUrl(productId, imageId), true)}
         onConfirm={handleDelete}
         open={params.action === "remove"}
         title={intl.formatMessage({
@@ -118,13 +115,5 @@ export const ProductImage: React.FC<ProductImageProps> = ({
       </ActionDialog>
     </>
   );
-                }}
-              </TypedProductImageDeleteMutation>
-            )}
-          </TypedProductImageUpdateMutation>
-        );
-      }}
-    </TypedProductImageQuery>
-  );
 };
 export default ProductImage;