Graceful exception handler when variant create mutation fails

.changeset/giant-knives-tell.md

@@ -0,0 +1,5 @@
+---
+"saleor-dashboard": patch
+---
+
+Variant creation no longer reports an error when API call fails, this means this scenario is now handled gracefully.

locale/defaultMessages.json

@@ -2264,6 +2264,10 @@
   "DGCzal": {
     "string": "This token gives you access to your shop's API, which you'll find here: {url}"
   },
+  "DGWVA9": {
+    "context": "variant created error message",
+    "string": "Variant creation failed"
+  },
   "DHBlFi": {
     "context": "navigator customer mode description",
     "string": "Search Customers"

src/hooks/makeMutation.ts

@@ -55,7 +55,7 @@ export function useMutation<TData, TVariables>(
     },
     onError: (err: ApolloError) => {
       if (!disableErrorHandling) {
-        if (err?.graphQLErrors.length > 0) {
+        if (err?.graphQLErrors?.length > 0) {
           if (hasError(err, GqlErrors.ReadOnlyException)) {
             notify({
               status: "error",

src/products/views/ProductVariantCreate.tsx

@@ -75,6 +75,15 @@ export const ProductVariant: React.FC<ProductVariantCreateProps> = ({ productId,
     onCompleted: data => {
       const variantId = data.productVariantCreate.productVariant.id;
 
+      if (!variantId) {
+        notify({
+          status: "error",
+          text: intl.formatMessage(messages.variantCreatedError),
+        });
+
+        return;
+      }
+
       notify({
         status: "success",
         text: intl.formatMessage(messages.variantCreatedSuccess),
@@ -98,6 +107,7 @@ export const ProductVariant: React.FC<ProductVariantCreateProps> = ({ productId,
       formData.attributesWithNewFileValue,
       uploadFilesResult,
     );
+
     const variantCreateResult = await variantCreate({
       variables: {
         input: {
@@ -136,7 +146,12 @@ export const ProductVariant: React.FC<ProductVariantCreateProps> = ({ productId,
       return { id: null, errors: variantCreateResultErrors };
     }
 
-    const id = variantCreateResult.data.productVariantCreate.productVariant.id;
+    const id = variantCreateResult.data?.productVariantCreate?.productVariant?.id;
+
+    if (!id) {
+      return { id: null, errors: [] };
+    }
+
     const updateChannelsResult = await updateChannels({
       variables: {
         id,

src/products/views/messages.ts

@@ -6,4 +6,9 @@ export const variantCreateMessages = defineMessages({
     defaultMessage: "Variant created",
     description: "variant created success message",
   },
+  variantCreatedError: {
+    id: "DGWVA9",
+    defaultMessage: "Variant creation failed",
+    description: "variant created error message",
+  },
 });