diff --git a/src/orders/views/OrderDraftList/OrderDraftList.tsx b/src/orders/views/OrderDraftList/OrderDraftList.tsx
index bbda0756e..f9b1ad9a7 100644
--- a/src/orders/views/OrderDraftList/OrderDraftList.tsx
+++ b/src/orders/views/OrderDraftList/OrderDraftList.tsx
@@ -21,7 +21,7 @@ import { ListViews } from "@saleor/types";
 import OrderDraftListPage from "../../components/OrderDraftListPage";
 import {
   TypedOrderDraftBulkCancelMutation,
-  TypedOrderDraftCreateMutation
+  useOrderDraftCreateMutation
 } from "../../mutations";
 import { TypedOrderDraftListQuery } from "../../queries";
 import { OrderDraftBulkCancel } from "../../types/OrderDraftBulkCancel";
@@ -58,6 +58,19 @@ export const OrderDraftList: React.FC<OrderDraftListProps> = ({ params }) => {
   );
   const intl = useIntl();
 
+  const handleCreateOrderCreateSuccess = (data: OrderDraftCreate) => {
+    notify({
+      text: intl.formatMessage({
+        defaultMessage: "Order draft succesfully created"
+      })
+    });
+    navigate(orderUrl(data.draftOrderCreate.order.id));
+  };
+
+  const [createOrder] = useOrderDraftCreateMutation({
+    onCompleted: handleCreateOrderCreateSuccess
+  });
+
   const tabs = getFilterTabs();
 
   const currentTab =
@@ -88,15 +101,6 @@ export const OrderDraftList: React.FC<OrderDraftListProps> = ({ params }) => {
       true
     );
 
-  const handleCreateOrderCreateSuccess = (data: OrderDraftCreate) => {
-    notify({
-      text: intl.formatMessage({
-        defaultMessage: "Order draft succesfully created"
-      })
-    });
-    navigate(orderUrl(data.draftOrderCreate.order.id));
-  };
-
   const openModal = (action: OrderDraftListUrlDialog, ids?: string[]) =>
     navigate(
       orderDraftListUrl({
@@ -137,140 +141,133 @@ export const OrderDraftList: React.FC<OrderDraftListProps> = ({ params }) => {
   );
 
   return (
-    <TypedOrderDraftCreateMutation onCompleted={handleCreateOrderCreateSuccess}>
-      {createOrder => (
-        <TypedOrderDraftListQuery displayLoader variables={queryVariables}>
-          {({ data, loading, refetch }) => {
-            const { loadNextPage, loadPreviousPage, pageInfo } = paginate(
-              maybe(() => data.draftOrders.pageInfo),
-              paginationState,
-              params
-            );
+    <TypedOrderDraftListQuery displayLoader variables={queryVariables}>
+      {({ data, loading, refetch }) => {
+        const { loadNextPage, loadPreviousPage, pageInfo } = paginate(
+          maybe(() => data.draftOrders.pageInfo),
+          paginationState,
+          params
+        );
 
-            const handleOrderDraftBulkCancel = (data: OrderDraftBulkCancel) => {
-              if (data.draftOrderBulkDelete.errors.length === 0) {
-                notify({
-                  text: intl.formatMessage({
-                    defaultMessage: "Deleted draft orders"
-                  })
+        const handleOrderDraftBulkCancel = (data: OrderDraftBulkCancel) => {
+          if (data.draftOrderBulkDelete.errors.length === 0) {
+            notify({
+              text: intl.formatMessage({
+                defaultMessage: "Deleted draft orders"
+              })
+            });
+            refetch();
+            reset();
+            closeModal();
+          }
+        };
+
+        return (
+          <TypedOrderDraftBulkCancelMutation
+            onCompleted={handleOrderDraftBulkCancel}
+          >
+            {(orderDraftBulkDelete, orderDraftBulkDeleteOpts) => {
+              const bulkRemoveTransitionState = getMutationState(
+                orderDraftBulkDeleteOpts.called,
+                orderDraftBulkDeleteOpts.loading,
+                maybe(
+                  () =>
+                    orderDraftBulkDeleteOpts.data.draftOrderBulkDelete.errors
+                )
+              );
+              const onOrderDraftBulkDelete = () =>
+                orderDraftBulkDelete({
+                  variables: {
+                    ids: params.ids
+                  }
                 });
-                refetch();
-                reset();
-                closeModal();
-              }
-            };
 
-            return (
-              <TypedOrderDraftBulkCancelMutation
-                onCompleted={handleOrderDraftBulkCancel}
-              >
-                {(orderDraftBulkDelete, orderDraftBulkDeleteOpts) => {
-                  const bulkRemoveTransitionState = getMutationState(
-                    orderDraftBulkDeleteOpts.called,
-                    orderDraftBulkDeleteOpts.loading,
-                    maybe(
-                      () =>
-                        orderDraftBulkDeleteOpts.data.draftOrderBulkDelete
-                          .errors
-                    )
-                  );
-                  const onOrderDraftBulkDelete = () =>
-                    orderDraftBulkDelete({
-                      variables: {
-                        ids: params.ids
-                      }
-                    });
-
-                  return (
-                    <>
-                      <OrderDraftListPage
-                        currentTab={currentTab}
-                        initialSearch={params.query || ""}
-                        onSearchChange={query => changeFilterField({ query })}
-                        onAll={() => navigate(orderDraftListUrl())}
-                        onTabChange={handleTabChange}
-                        onTabDelete={() => openModal("delete-search")}
-                        onTabSave={() => openModal("save-search")}
-                        tabs={tabs.map(tab => tab.name)}
-                        disabled={loading}
-                        settings={settings}
-                        orders={maybe(() =>
-                          data.draftOrders.edges.map(edge => edge.node)
-                        )}
-                        pageInfo={pageInfo}
-                        onAdd={createOrder}
-                        onNextPage={loadNextPage}
-                        onPreviousPage={loadPreviousPage}
-                        onUpdateListSettings={updateListSettings}
-                        onRowClick={id => () => navigate(orderUrl(id))}
-                        isChecked={isSelected}
-                        selected={listElements.length}
-                        toggle={toggle}
-                        toggleAll={toggleAll}
-                        toolbar={
-                          <IconButton
-                            color="primary"
-                            onClick={() =>
-                              navigate(
-                                orderDraftListUrl({
-                                  action: "remove",
-                                  ids: listElements
-                                })
-                              )
-                            }
-                          >
-                            <DeleteIcon />
-                          </IconButton>
+              return (
+                <>
+                  <OrderDraftListPage
+                    currentTab={currentTab}
+                    initialSearch={params.query || ""}
+                    onSearchChange={query => changeFilterField({ query })}
+                    onAll={() => navigate(orderDraftListUrl())}
+                    onTabChange={handleTabChange}
+                    onTabDelete={() => openModal("delete-search")}
+                    onTabSave={() => openModal("save-search")}
+                    tabs={tabs.map(tab => tab.name)}
+                    disabled={loading}
+                    settings={settings}
+                    orders={maybe(() =>
+                      data.draftOrders.edges.map(edge => edge.node)
+                    )}
+                    pageInfo={pageInfo}
+                    onAdd={createOrder}
+                    onNextPage={loadNextPage}
+                    onPreviousPage={loadPreviousPage}
+                    onUpdateListSettings={updateListSettings}
+                    onRowClick={id => () => navigate(orderUrl(id))}
+                    isChecked={isSelected}
+                    selected={listElements.length}
+                    toggle={toggle}
+                    toggleAll={toggleAll}
+                    toolbar={
+                      <IconButton
+                        color="primary"
+                        onClick={() =>
+                          navigate(
+                            orderDraftListUrl({
+                              action: "remove",
+                              ids: listElements
+                            })
+                          )
                         }
-                      />
-                      <ActionDialog
-                        confirmButtonState={bulkRemoveTransitionState}
-                        onClose={closeModal}
-                        onConfirm={onOrderDraftBulkDelete}
-                        open={params.action === "remove"}
-                        title={intl.formatMessage({
-                          defaultMessage: "Delete Order Drafts",
-                          description: "dialog header"
-                        })}
-                        variant="delete"
                       >
-                        <DialogContentText>
-                          <FormattedMessage
-                            defaultMessage="Are you sure you want to delete {counter,plural,one{this order draft} other{{displayQuantity} orderDrafts}}?"
-                            description="dialog content"
-                            values={{
-                              counter: maybe(() => params.ids.length),
-                              displayQuantity: (
-                                <strong>
-                                  {maybe(() => params.ids.length)}
-                                </strong>
-                              )
-                            }}
-                          />
-                        </DialogContentText>
-                      </ActionDialog>
-                      <SaveFilterTabDialog
-                        open={params.action === "save-search"}
-                        confirmButtonState="default"
-                        onClose={closeModal}
-                        onSubmit={handleTabSave}
+                        <DeleteIcon />
+                      </IconButton>
+                    }
+                  />
+                  <ActionDialog
+                    confirmButtonState={bulkRemoveTransitionState}
+                    onClose={closeModal}
+                    onConfirm={onOrderDraftBulkDelete}
+                    open={params.action === "remove"}
+                    title={intl.formatMessage({
+                      defaultMessage: "Delete Order Drafts",
+                      description: "dialog header"
+                    })}
+                    variant="delete"
+                  >
+                    <DialogContentText>
+                      <FormattedMessage
+                        defaultMessage="Are you sure you want to delete {counter,plural,one{this order draft} other{{displayQuantity} orderDrafts}}?"
+                        description="dialog content"
+                        values={{
+                          counter: maybe(() => params.ids.length),
+                          displayQuantity: (
+                            <strong>{maybe(() => params.ids.length)}</strong>
+                          )
+                        }}
                       />
-                      <DeleteFilterTabDialog
-                        open={params.action === "delete-search"}
-                        confirmButtonState="default"
-                        onClose={closeModal}
-                        onSubmit={handleTabDelete}
-                        tabName={maybe(() => tabs[currentTab - 1].name, "...")}
-                      />
-                    </>
-                  );
-                }}
-              </TypedOrderDraftBulkCancelMutation>
-            );
-          }}
-        </TypedOrderDraftListQuery>
-      )}
-    </TypedOrderDraftCreateMutation>
+                    </DialogContentText>
+                  </ActionDialog>
+                  <SaveFilterTabDialog
+                    open={params.action === "save-search"}
+                    confirmButtonState="default"
+                    onClose={closeModal}
+                    onSubmit={handleTabSave}
+                  />
+                  <DeleteFilterTabDialog
+                    open={params.action === "delete-search"}
+                    confirmButtonState="default"
+                    onClose={closeModal}
+                    onSubmit={handleTabDelete}
+                    tabName={maybe(() => tabs[currentTab - 1].name, "...")}
+                  />
+                </>
+              );
+            }}
+          </TypedOrderDraftBulkCancelMutation>
+        );
+      }}
+    </TypedOrderDraftListQuery>
   );
 };
 
diff --git a/src/orders/views/OrderList/OrderList.tsx b/src/orders/views/OrderList/OrderList.tsx
index 26e49fd22..e5b19e27f 100644
--- a/src/orders/views/OrderList/OrderList.tsx
+++ b/src/orders/views/OrderList/OrderList.tsx
@@ -21,7 +21,7 @@ import OrderBulkCancelDialog from "../../components/OrderBulkCancelDialog";
 import OrderListPage from "../../components/OrderListPage/OrderListPage";
 import {
   TypedOrderBulkCancelMutation,
-  TypedOrderDraftCreateMutation
+  useOrderDraftCreateMutation
 } from "../../mutations";
 import { TypedOrderListQuery } from "../../queries";
 import { OrderBulkCancel } from "../../types/OrderBulkCancel";
@@ -62,6 +62,19 @@ export const OrderList: React.FC<OrderListProps> = ({ params }) => {
   );
   const intl = useIntl();
 
+  const handleCreateOrderCreateSuccess = (data: OrderDraftCreate) => {
+    notify({
+      text: intl.formatMessage({
+        defaultMessage: "Order draft succesfully created"
+      })
+    });
+    navigate(orderUrl(data.draftOrderCreate.order.id));
+  };
+
+  const [createOrder] = useOrderDraftCreateMutation({
+    onCompleted: handleCreateOrderCreateSuccess
+  });
+
   const tabs = getFilterTabs();
 
   const currentTab =
@@ -130,15 +143,6 @@ export const OrderList: React.FC<OrderListProps> = ({ params }) => {
   const paginationState = createPaginationState(settings.rowNumber, params);
   const currencySymbol = maybe(() => shop.defaultCurrency, "USD");
 
-  const handleCreateOrderCreateSuccess = (data: OrderDraftCreate) => {
-    notify({
-      text: intl.formatMessage({
-        defaultMessage: "Order draft succesfully created"
-      })
-    });
-    navigate(orderUrl(data.draftOrderCreate.order.id));
-  };
-
   const queryVariables = React.useMemo(
     () => ({
       ...paginationState,
@@ -148,131 +152,127 @@ export const OrderList: React.FC<OrderListProps> = ({ params }) => {
   );
 
   return (
-    <TypedOrderDraftCreateMutation onCompleted={handleCreateOrderCreateSuccess}>
-      {createOrder => (
-        <TypedOrderListQuery displayLoader variables={queryVariables}>
-          {({ data, loading, refetch }) => {
-            const { loadNextPage, loadPreviousPage, pageInfo } = paginate(
-              maybe(() => data.orders.pageInfo),
-              paginationState,
-              params
-            );
+    <TypedOrderListQuery displayLoader variables={queryVariables}>
+      {({ data, loading, refetch }) => {
+        const { loadNextPage, loadPreviousPage, pageInfo } = paginate(
+          maybe(() => data.orders.pageInfo),
+          paginationState,
+          params
+        );
 
-            const handleOrderBulkCancel = (data: OrderBulkCancel) => {
-              if (data.orderBulkCancel.errors.length === 0) {
-                notify({
-                  text: intl.formatMessage({
-                    defaultMessage: "Orders cancelled"
-                  })
+        const handleOrderBulkCancel = (data: OrderBulkCancel) => {
+          if (data.orderBulkCancel.errors.length === 0) {
+            notify({
+              text: intl.formatMessage({
+                defaultMessage: "Orders cancelled"
+              })
+            });
+            reset();
+            refetch();
+            closeModal();
+          }
+        };
+
+        return (
+          <TypedOrderBulkCancelMutation onCompleted={handleOrderBulkCancel}>
+            {(orderBulkCancel, orderBulkCancelOpts) => {
+              const orderBulkCancelTransitionState = getMutationState(
+                orderBulkCancelOpts.called,
+                orderBulkCancelOpts.loading,
+                maybe(() => orderBulkCancelOpts.data.orderBulkCancel.errors)
+              );
+              const onOrderBulkCancel = (restock: boolean) =>
+                orderBulkCancel({
+                  variables: {
+                    ids: params.ids,
+                    restock
+                  }
                 });
-                reset();
-                refetch();
-                closeModal();
-              }
-            };
 
-            return (
-              <TypedOrderBulkCancelMutation onCompleted={handleOrderBulkCancel}>
-                {(orderBulkCancel, orderBulkCancelOpts) => {
-                  const orderBulkCancelTransitionState = getMutationState(
-                    orderBulkCancelOpts.called,
-                    orderBulkCancelOpts.loading,
-                    maybe(() => orderBulkCancelOpts.data.orderBulkCancel.errors)
-                  );
-                  const onOrderBulkCancel = (restock: boolean) =>
-                    orderBulkCancel({
-                      variables: {
-                        ids: params.ids,
-                        restock
-                      }
-                    });
-
-                  return (
-                    <>
-                      <OrderListPage
-                        currencySymbol={currencySymbol}
-                        settings={settings}
-                        filtersList={createFilterChips(
-                          params,
-                          {
-                            formatDate
-                          },
-                          changeFilterField,
-                          intl
-                        )}
-                        currentTab={currentTab}
-                        disabled={loading}
-                        orders={maybe(() =>
-                          data.orders.edges.map(edge => edge.node)
-                        )}
-                        pageInfo={pageInfo}
-                        onAdd={createOrder}
-                        onNextPage={loadNextPage}
-                        onPreviousPage={loadPreviousPage}
-                        onUpdateListSettings={updateListSettings}
-                        onRowClick={id => () => navigate(orderUrl(id))}
-                        isChecked={isSelected}
-                        selected={listElements.length}
-                        toggle={toggle}
-                        toggleAll={toggleAll}
-                        toolbar={
-                          <Button
-                            color="primary"
-                            onClick={() => openModal("cancel", listElements)}
-                          >
-                            <FormattedMessage
-                              defaultMessage="Cancel"
-                              description="cancel orders, button"
-                            />
-                          </Button>
-                        }
-                        onSearchChange={query => changeFilterField({ query })}
-                        onFilterAdd={data =>
-                          changeFilterField(createFilter(params, data))
-                        }
-                        onTabSave={() => openModal("save-search")}
-                        onTabDelete={() => openModal("delete-search")}
-                        onTabChange={handleTabChange}
-                        initialSearch={params.query || ""}
-                        tabs={getFilterTabs().map(tab => tab.name)}
-                        onAll={() =>
-                          changeFilters({
-                            status: undefined
-                          })
-                        }
-                      />
-                      <OrderBulkCancelDialog
-                        confirmButtonState={orderBulkCancelTransitionState}
-                        numberOfOrders={maybe(
-                          () => params.ids.length.toString(),
-                          "..."
-                        )}
-                        onClose={closeModal}
-                        onConfirm={onOrderBulkCancel}
-                        open={params.action === "cancel"}
-                      />
-                      <SaveFilterTabDialog
-                        open={params.action === "save-search"}
-                        confirmButtonState="default"
-                        onClose={closeModal}
-                        onSubmit={handleFilterTabSave}
-                      />
-                      <DeleteFilterTabDialog
-                        open={params.action === "delete-search"}
-                        confirmButtonState="default"
-                        onClose={closeModal}
-                        onSubmit={handleFilterTabDelete}
-                        tabName={maybe(() => tabs[currentTab - 1].name, "...")}
-                      />
-                    </>
-                  );
-                }}
-              </TypedOrderBulkCancelMutation>
-            );
-          }}
-        </TypedOrderListQuery>
-      )}
-    </TypedOrderDraftCreateMutation>
+              return (
+                <>
+                  <OrderListPage
+                    currencySymbol={currencySymbol}
+                    settings={settings}
+                    filtersList={createFilterChips(
+                      params,
+                      {
+                        formatDate
+                      },
+                      changeFilterField,
+                      intl
+                    )}
+                    currentTab={currentTab}
+                    disabled={loading}
+                    orders={maybe(() =>
+                      data.orders.edges.map(edge => edge.node)
+                    )}
+                    pageInfo={pageInfo}
+                    onAdd={createOrder}
+                    onNextPage={loadNextPage}
+                    onPreviousPage={loadPreviousPage}
+                    onUpdateListSettings={updateListSettings}
+                    onRowClick={id => () => navigate(orderUrl(id))}
+                    isChecked={isSelected}
+                    selected={listElements.length}
+                    toggle={toggle}
+                    toggleAll={toggleAll}
+                    toolbar={
+                      <Button
+                        color="primary"
+                        onClick={() => openModal("cancel", listElements)}
+                      >
+                        <FormattedMessage
+                          defaultMessage="Cancel"
+                          description="cancel orders, button"
+                        />
+                      </Button>
+                    }
+                    onSearchChange={query => changeFilterField({ query })}
+                    onFilterAdd={data =>
+                      changeFilterField(createFilter(params, data))
+                    }
+                    onTabSave={() => openModal("save-search")}
+                    onTabDelete={() => openModal("delete-search")}
+                    onTabChange={handleTabChange}
+                    initialSearch={params.query || ""}
+                    tabs={getFilterTabs().map(tab => tab.name)}
+                    onAll={() =>
+                      changeFilters({
+                        status: undefined
+                      })
+                    }
+                  />
+                  <OrderBulkCancelDialog
+                    confirmButtonState={orderBulkCancelTransitionState}
+                    numberOfOrders={maybe(
+                      () => params.ids.length.toString(),
+                      "..."
+                    )}
+                    onClose={closeModal}
+                    onConfirm={onOrderBulkCancel}
+                    open={params.action === "cancel"}
+                  />
+                  <SaveFilterTabDialog
+                    open={params.action === "save-search"}
+                    confirmButtonState="default"
+                    onClose={closeModal}
+                    onSubmit={handleFilterTabSave}
+                  />
+                  <DeleteFilterTabDialog
+                    open={params.action === "delete-search"}
+                    confirmButtonState="default"
+                    onClose={closeModal}
+                    onSubmit={handleFilterTabDelete}
+                    tabName={maybe(() => tabs[currentTab - 1].name, "...")}
+                  />
+                </>
+              );
+            }}
+          </TypedOrderBulkCancelMutation>
+        );
+      }}
+    </TypedOrderListQuery>
   );
 };