diff --git a/src/shipping/queries.ts b/src/shipping/queries.ts
index 9779655e2..771a32b3f 100644
--- a/src/shipping/queries.ts
+++ b/src/shipping/queries.ts
@@ -1,7 +1,7 @@
 import gql from "graphql-tag";
 
 import makeQuery from "@saleor/hooks/makeQuery";
-import { pageInfoFragment, TypedQuery } from "../queries";
+import { pageInfoFragment } from "../queries";
 import { ShippingZone, ShippingZoneVariables } from "./types/ShippingZone";
 import { ShippingZones, ShippingZonesVariables } from "./types/ShippingZones";
 
@@ -79,7 +79,7 @@ const shippingZones = gql`
     }
   }
 `;
-export const TypedShippingZones = TypedQuery<
+export const useShippingZoneList = makeQuery<
   ShippingZones,
   ShippingZonesVariables
 >(shippingZones);
diff --git a/src/shipping/views/ShippingZonesList.tsx b/src/shipping/views/ShippingZonesList.tsx
index 488e629ae..dd2ab2241 100644
--- a/src/shipping/views/ShippingZonesList.tsx
+++ b/src/shipping/views/ShippingZonesList.tsx
@@ -16,23 +16,22 @@ import usePaginator, {
 import useShop from "@saleor/hooks/useShop";
 import useUser from "@saleor/hooks/useUser";
 import { commonMessages } from "@saleor/intl";
-import { maybe } from "@saleor/misc";
+import { maybe, getStringOrPlaceholder } from "@saleor/misc";
 import { ListViews } from "@saleor/types";
+import createDialogActionHandlers from "@saleor/utils/handlers/dialogActionHandlers";
 import ShippingZonesListPage from "../components/ShippingZonesListPage";
 import {
-  TypedBulkDeleteShippingZone,
-  TypedDeleteShippingZone,
-  TypedUpdateDefaultWeightUnit
+  useShippingZoneBulkDelete,
+  useShippingZoneDelete,
+  useDefaultWeightUnitUpdate
 } from "../mutations";
-import { TypedShippingZones } from "../queries";
-import { BulkDeleteShippingZone } from "../types/BulkDeleteShippingZone";
-import { DeleteShippingZone } from "../types/DeleteShippingZone";
-import { UpdateDefaultWeightUnit } from "../types/UpdateDefaultWeightUnit";
+import { useShippingZoneList } from "../queries";
 import {
   shippingZoneAddUrl,
   shippingZonesListUrl,
   ShippingZonesListUrlQueryParams,
-  shippingZoneUrl
+  shippingZoneUrl,
+  ShippingZonesListUrlDialog
 } from "../urls";
 
 interface ShippingZonesListProps {
@@ -57,206 +56,176 @@ export const ShippingZonesList: React.FC<ShippingZonesListProps> = ({
 
   const paginationState = createPaginationState(settings.rowNumber, params);
 
+  const [openModal, closeModal] = createDialogActionHandlers<
+    ShippingZonesListUrlDialog,
+    ShippingZonesListUrlQueryParams
+  >(navigate, shippingZonesListUrl, params);
+
+  const { data, loading, refetch } = useShippingZoneList({
+    displayLoader: true,
+    variables: paginationState
+  });
+
+  const [deleteShippingZone, deleteShippingZoneOpts] = useShippingZoneDelete({
+    onCompleted: data => {
+      if (data.shippingZoneDelete.errors.length === 0) {
+        notify({
+          text: intl.formatMessage(commonMessages.savedChanges)
+        });
+        closeModal();
+        refetch();
+      }
+    }
+  });
+
+  const [
+    updateDefaultWeightUnit,
+    updateDefaultWeightUnitOpts
+  ] = useDefaultWeightUnitUpdate({
+    onCompleted: data => {
+      if (data.shopSettingsUpdate.errors.length === 0) {
+        notify({
+          text: intl.formatMessage(commonMessages.savedChanges)
+        });
+      }
+    }
+  });
+
+  const [
+    bulkDeleteShippingZone,
+    bulkDeleteShippingZoneOpts
+  ] = useShippingZoneBulkDelete({
+    onCompleted: data => {
+      if (data.shippingZoneBulkDelete.errors.length === 0) {
+        notify({
+          text: intl.formatMessage(commonMessages.savedChanges)
+        });
+        closeModal();
+        reset();
+        refetch();
+      }
+    }
+  });
+
+  const { loadNextPage, loadPreviousPage, pageInfo } = paginate(
+    maybe(() => data.shippingZones.pageInfo),
+    paginationState,
+    params
+  );
   return (
-    <TypedShippingZones displayLoader variables={paginationState}>
-      {({ data, loading, refetch }) => {
-        const handleUpdateDefaultWeightUnit = (
-          data: UpdateDefaultWeightUnit
-        ) => {
-          if (data.shopSettingsUpdate.errors.length === 0) {
-            notify({
-              text: intl.formatMessage(commonMessages.savedChanges)
-            });
-          }
-        };
+    <>
+      <ShippingZonesListPage
+        defaultWeightUnit={maybe(() => shop.defaultWeightUnit)}
+        settings={settings}
+        disabled={
+          loading ||
+          deleteShippingZoneOpts.loading ||
+          updateDefaultWeightUnitOpts.loading
+        }
+        shippingZones={maybe(() =>
+          data.shippingZones.edges.map(edge => edge.node)
+        )}
+        pageInfo={pageInfo}
+        onAdd={() => navigate(shippingZoneAddUrl)}
+        onBack={() => navigate(configurationMenuUrl)}
+        onUpdateListSettings={updateListSettings}
+        onNextPage={loadNextPage}
+        onPreviousPage={loadPreviousPage}
+        onRemove={id =>
+          openModal("remove", {
+            id
+          })
+        }
+        onRowClick={id => () => navigate(shippingZoneUrl(id))}
+        onSubmit={unit =>
+          updateDefaultWeightUnit({
+            variables: { unit }
+          })
+        }
+        isChecked={isSelected}
+        selected={listElements.length}
+        toggle={toggle}
+        toggleAll={toggleAll}
+        toolbar={
+          <IconButton
+            color="primary"
+            onClick={() =>
+              openModal("remove-many", {
+                ids: listElements
+              })
+            }
+          >
+            <DeleteIcon />
+          </IconButton>
+        }
+        userPermissions={user?.userPermissions || []}
+      />
 
-        const closeModal = () =>
-          navigate(
-            shippingZonesListUrl({
-              ...params,
-              action: undefined,
-              ids: undefined
-            }),
-            true
-          );
-
-        const handleShippingZoneDelete = (data: DeleteShippingZone) => {
-          if (data.shippingZoneDelete.errors.length === 0) {
-            notify({
-              text: intl.formatMessage(commonMessages.savedChanges)
-            });
-            closeModal();
-            refetch();
-          }
-        };
-
-        const handleBulkDeleteShippingZone = (data: BulkDeleteShippingZone) => {
-          if (data.shippingZoneBulkDelete.errors.length === 0) {
-            notify({
-              text: intl.formatMessage(commonMessages.savedChanges)
-            });
-            closeModal();
-            reset();
-            refetch();
-          }
-        };
-        return (
-          <TypedDeleteShippingZone onCompleted={handleShippingZoneDelete}>
-            {(deleteShippingZone, deleteShippingZoneOpts) => (
-              <TypedUpdateDefaultWeightUnit
-                onCompleted={handleUpdateDefaultWeightUnit}
-              >
-                {(updateDefaultWeightUnit, updateDefaultWeightUnitOpts) => (
-                  <TypedBulkDeleteShippingZone
-                    onCompleted={handleBulkDeleteShippingZone}
-                  >
-                    {(bulkDeleteShippingZone, bulkDeleteShippingZoneOpts) => {
-                      const {
-                        loadNextPage,
-                        loadPreviousPage,
-                        pageInfo
-                      } = paginate(
-                        maybe(() => data.shippingZones.pageInfo),
-                        paginationState,
-                        params
-                      );
-
-                      return (
-                        <>
-                          <ShippingZonesListPage
-                            defaultWeightUnit={maybe(
-                              () => shop.defaultWeightUnit
-                            )}
-                            settings={settings}
-                            disabled={
-                              loading ||
-                              deleteShippingZoneOpts.loading ||
-                              updateDefaultWeightUnitOpts.loading
-                            }
-                            shippingZones={maybe(() =>
-                              data.shippingZones.edges.map(edge => edge.node)
-                            )}
-                            pageInfo={pageInfo}
-                            onAdd={() => navigate(shippingZoneAddUrl)}
-                            onBack={() => navigate(configurationMenuUrl)}
-                            onUpdateListSettings={updateListSettings}
-                            onNextPage={loadNextPage}
-                            onPreviousPage={loadPreviousPage}
-                            onRemove={id =>
-                              navigate(
-                                shippingZonesListUrl({
-                                  ...params,
-                                  action: "remove",
-                                  id
-                                })
-                              )
-                            }
-                            onRowClick={id => () =>
-                              navigate(shippingZoneUrl(id))}
-                            onSubmit={unit =>
-                              updateDefaultWeightUnit({
-                                variables: { unit }
-                              })
-                            }
-                            isChecked={isSelected}
-                            selected={listElements.length}
-                            toggle={toggle}
-                            toggleAll={toggleAll}
-                            toolbar={
-                              <IconButton
-                                color="primary"
-                                onClick={() =>
-                                  navigate(
-                                    shippingZonesListUrl({
-                                      action: "remove-many",
-                                      ids: listElements
-                                    })
-                                  )
-                                }
-                              >
-                                <DeleteIcon />
-                              </IconButton>
-                            }
-                            userPermissions={user?.userPermissions || []}
-                          />
-
-                          <ActionDialog
-                            open={params.action === "remove"}
-                            confirmButtonState={deleteShippingZoneOpts.status}
-                            variant="delete"
-                            title={intl.formatMessage({
-                              defaultMessage: "Delete Shipping Zone",
-                              description: "dialog header"
-                            })}
-                            onClose={closeModal}
-                            onConfirm={() =>
-                              deleteShippingZone({
-                                variables: { id: params.id }
-                              })
-                            }
-                          >
-                            <DialogContentText>
-                              <FormattedMessage
-                                defaultMessage="Are you sure you want to delete {shippingZoneName} shipping zone?"
-                                values={{
-                                  shippingZoneName: (
-                                    <strong>
-                                      {maybe(
-                                        () =>
-                                          data.shippingZones.edges.find(
-                                            edge => edge.node.id === params.id
-                                          ).node.name,
-                                        "..."
-                                      )}
-                                    </strong>
-                                  )
-                                }}
-                              />
-                            </DialogContentText>
-                          </ActionDialog>
-                          <ActionDialog
-                            open={params.action === "remove-many"}
-                            confirmButtonState={
-                              bulkDeleteShippingZoneOpts.status
-                            }
-                            variant="delete"
-                            title={intl.formatMessage({
-                              defaultMessage: "Delete Shipping Zones",
-                              description: "dialog header"
-                            })}
-                            onClose={closeModal}
-                            onConfirm={() =>
-                              bulkDeleteShippingZone({
-                                variables: { ids: params.ids }
-                              })
-                            }
-                          >
-                            <DialogContentText>
-                              <FormattedMessage
-                                defaultMessage="{counter,plural,one{Are you sure you want to delete this shipping zone?} other{Are you sure you want to delete {displayQuantity} shipping zones?}}"
-                                description="dialog content"
-                                values={{
-                                  counter: maybe(() => params.ids.length),
-                                  displayQuantity: (
-                                    <strong>
-                                      {maybe(() => params.ids.length)}
-                                    </strong>
-                                  )
-                                }}
-                              />
-                            </DialogContentText>
-                          </ActionDialog>
-                        </>
-                      );
-                    }}
-                  </TypedBulkDeleteShippingZone>
-                )}
-              </TypedUpdateDefaultWeightUnit>
-            )}
-          </TypedDeleteShippingZone>
-        );
-      }}
-    </TypedShippingZones>
+      <ActionDialog
+        open={params.action === "remove"}
+        confirmButtonState={deleteShippingZoneOpts.status}
+        variant="delete"
+        title={intl.formatMessage({
+          defaultMessage: "Delete Shipping Zone",
+          description: "dialog header"
+        })}
+        onClose={closeModal}
+        onConfirm={() =>
+          deleteShippingZone({
+            variables: { id: params.id }
+          })
+        }
+      >
+        <DialogContentText>
+          <FormattedMessage
+            defaultMessage="Are you sure you want to delete {shippingZoneName} shipping zone?"
+            values={{
+              shippingZoneName: (
+                <strong>
+                  {maybe(
+                    () =>
+                      data.shippingZones.edges.find(
+                        edge => edge.node.id === params.id
+                      ).node.name,
+                    "..."
+                  )}
+                </strong>
+              )
+            }}
+          />
+        </DialogContentText>
+      </ActionDialog>
+      <ActionDialog
+        open={params.action === "remove-many"}
+        confirmButtonState={bulkDeleteShippingZoneOpts.status}
+        variant="delete"
+        title={intl.formatMessage({
+          defaultMessage: "Delete Shipping Zones",
+          description: "dialog header"
+        })}
+        onClose={closeModal}
+        onConfirm={() =>
+          bulkDeleteShippingZone({
+            variables: { ids: params.ids }
+          })
+        }
+      >
+        <DialogContentText>
+          <FormattedMessage
+            defaultMessage="{counter,plural,one{Are you sure you want to delete this shipping zone?} other{Are you sure you want to delete {displayQuantity} shipping zones?}}"
+            description="dialog content"
+            values={{
+              counter: params.ids?.length,
+              displayQuantity: (
+                <strong>
+                  {getStringOrPlaceholder(params.ids?.length.toString())}
+                </strong>
+              )
+            }}
+          />
+        </DialogContentText>
+      </ActionDialog>
+    </>
   );
 };
 ShippingZonesList.displayName = "ShippingZonesList";