diff --git a/src/products/queries.ts b/src/products/queries.ts
index 5d0f967cc..3fbbaef8f 100644
--- a/src/products/queries.ts
+++ b/src/products/queries.ts
@@ -230,7 +230,7 @@ const productVariantCreateQuery = gql`
     }
   }
 `;
-export const TypedProductVariantCreateQuery = TypedQuery<
+export const useProductVariantCreateQuery = makeQuery<
   ProductVariantCreateData,
   ProductVariantCreateDataVariables
 >(productVariantCreateQuery);
diff --git a/src/products/views/ProductVariantCreate.tsx b/src/products/views/ProductVariantCreate.tsx
index 5e5cef09a..36b821eff 100644
--- a/src/products/views/ProductVariantCreate.tsx
+++ b/src/products/views/ProductVariantCreate.tsx
@@ -12,9 +12,8 @@ import { decimal, weight } from "../../misc";
 import ProductVariantCreatePage, {
   ProductVariantCreatePageSubmitData
 } from "../components/ProductVariantCreatePage";
-import { TypedVariantCreateMutation } from "../mutations";
-import { TypedProductVariantCreateQuery } from "../queries";
-import { VariantCreate } from "../types/VariantCreate";
+import { useVariantCreateMutation } from "../mutations";
+import { useProductVariantCreateQuery } from "../queries";
 import { productListUrl, productUrl, productVariantEditUrl } from "../urls";
 
 interface ProductVariantCreateProps {
@@ -35,102 +34,90 @@ export const ProductVariant: React.FC<ProductVariantCreateProps> = ({
     }
   });
 
-  return (
-    <TypedProductVariantCreateQuery displayLoader variables={{ id: productId }}>
-      {({ data, loading: productLoading }) => {
-        const product = data?.product;
+  const { data, loading: productLoading } = useProductVariantCreateQuery({
+    displayLoader: true,
+    variables: { id: productId }
+  });
 
-        if (product === null) {
-          return <NotFoundPage onBack={() => navigate(productListUrl())} />;
-        }
-
-        const handleCreateSuccess = (data: VariantCreate) => {
-          if (data.productVariantCreate.errors.length === 0) {
-            notify({
-              status: "success",
-              text: intl.formatMessage(commonMessages.savedChanges)
-            });
-            navigate(
-              productVariantEditUrl(
-                productId,
-                data.productVariantCreate.productVariant.id
-              )
-            );
-          }
-        };
-
-        return (
-          <TypedVariantCreateMutation onCompleted={handleCreateSuccess}>
-            {(variantCreate, variantCreateResult) => {
-              const handleBack = () => navigate(productUrl(productId));
-              const handleSubmit = (
-                formData: ProductVariantCreatePageSubmitData
-              ) =>
-                variantCreate({
-                  variables: {
-                    input: {
-                      attributes: formData.attributes
-                        .filter(attribute => attribute.value !== "")
-                        .map(attribute => ({
-                          id: attribute.id,
-                          values: [attribute.value]
-                        })),
-                      costPrice: decimal(formData.costPrice),
-                      price: decimal(formData.price),
-                      product: productId,
-                      sku: formData.sku,
-                      stocks: formData.stocks.map(stock => ({
-                        quantity: parseInt(stock.value, 0),
-                        warehouse: stock.id
-                      })),
-                      trackInventory: true,
-                      weight: weight(formData.weight)
-                    }
-                  }
-                });
-              const handleVariantClick = (id: string) =>
-                navigate(productVariantEditUrl(productId, id));
-
-              const disableForm = productLoading || variantCreateResult.loading;
-
-              return (
-                <>
-                  <WindowTitle
-                    title={intl.formatMessage({
-                      defaultMessage: "Create variant",
-                      description: "window title"
-                    })}
-                  />
-                  <ProductVariantCreatePage
-                    currencySymbol={shop?.defaultCurrency}
-                    disabled={disableForm}
-                    errors={
-                      variantCreateResult.data?.productVariantCreate.errors ||
-                      []
-                    }
-                    header={intl.formatMessage({
-                      defaultMessage: "Create Variant",
-                      description: "header"
-                    })}
-                    product={data?.product}
-                    onBack={handleBack}
-                    onSubmit={handleSubmit}
-                    onVariantClick={handleVariantClick}
-                    saveButtonBarState={variantCreateResult.status}
-                    warehouses={
-                      warehouses.data?.warehouses.edges.map(
-                        edge => edge.node
-                      ) || []
-                    }
-                    weightUnit={shop?.defaultWeightUnit}
-                  />
-                </>
-              );
-            }}
-          </TypedVariantCreateMutation>
+  const [variantCreate, variantCreateResult] = useVariantCreateMutation({
+    onCompleted: data => {
+      if (data.productVariantCreate.errors.length === 0) {
+        notify({
+          status: "success",
+          text: intl.formatMessage(commonMessages.savedChanges)
+        });
+        navigate(
+          productVariantEditUrl(
+            productId,
+            data.productVariantCreate.productVariant.id
+          )
         );
-      }}
-    </TypedProductVariantCreateQuery>
+      }
+    }
+  });
+
+  const product = data?.product;
+
+  if (product === null) {
+    return <NotFoundPage onBack={() => navigate(productListUrl())} />;
+  }
+
+  const handleBack = () => navigate(productUrl(productId));
+  const handleSubmit = (formData: ProductVariantCreatePageSubmitData) =>
+    variantCreate({
+      variables: {
+        input: {
+          attributes: formData.attributes
+            .filter(attribute => attribute.value !== "")
+            .map(attribute => ({
+              id: attribute.id,
+              values: [attribute.value]
+            })),
+          costPrice: decimal(formData.costPrice),
+          price: decimal(formData.price),
+          product: productId,
+          sku: formData.sku,
+          stocks: formData.stocks.map(stock => ({
+            quantity: parseInt(stock.value, 0),
+            warehouse: stock.id
+          })),
+          trackInventory: true,
+          weight: weight(formData.weight)
+        }
+      }
+    });
+  const handleVariantClick = (id: string) =>
+    navigate(productVariantEditUrl(productId, id));
+
+  const disableForm = productLoading || variantCreateResult.loading;
+
+  return (
+    <>
+      <WindowTitle
+        title={intl.formatMessage({
+          defaultMessage: "Create variant",
+          description: "window title"
+        })}
+      />
+      <ProductVariantCreatePage
+        currencySymbol={shop?.defaultCurrency}
+        disabled={disableForm}
+        errors={variantCreateResult.data?.productVariantCreate.errors || []}
+        header={intl.formatMessage({
+          defaultMessage: "Create Variant",
+          description: "header"
+        })}
+        product={data?.product}
+        onBack={handleBack}
+        onSubmit={handleSubmit}
+        onVariantClick={handleVariantClick}
+        saveButtonBarState={variantCreateResult.status}
+        warehouses={
+          warehouses.data?.warehouses.edges.map(edge => edge.node) || []
+        }
+        weightUnit={shop?.defaultWeightUnit}
+      />
+    </>
   );
 };
 export default ProductVariant;