Add mapEdgesToItems util function and replace all usages

src/attributes/views/AttributeList/AttributeList.tsx

@@ -22,6 +22,7 @@ import usePaginator, {
 import createDialogActionHandlers from "@saleor/utils/handlers/dialogActionHandlers";
 import createFilterHandlers from "@saleor/utils/handlers/filterHandlers";
 import createSortHandler from "@saleor/utils/handlers/sortHandler";
+import { mapEdgesToItems } from "@saleor/utils/maps";
 import { getSortParams } from "@saleor/utils/sort";
 import React from "react";
 import { useIntl } from "react-intl";
@@ -147,7 +148,7 @@ const AttributeList: React.FC<AttributeListProps> = ({ params }) => {
   return (
     <>
       <AttributeListPage
-        attributes={maybe(() => data.attributes.edges.map(edge => edge.node))}
+        attributes={mapEdgesToItems(data?.attributes)}
         currentTab={currentTab}
         disabled={loading || attributeBulkDeleteOpts.loading}
         filterOpts={getFilterOpts(params)}

src/categories/views/CategoryDetails.tsx

@@ -15,7 +15,7 @@ import usePaginator, {
 import { commonMessages } from "@saleor/intl";
 import createDialogActionHandlers from "@saleor/utils/handlers/dialogActionHandlers";
 import createMetadataUpdateHandler from "@saleor/utils/handlers/metadataUpdateHandler";
-import { mapNodeToChoice } from "@saleor/utils/maps";
+import { mapEdgesToItems, mapNodeToChoice } from "@saleor/utils/maps";
 import {
   useMetadataUpdate,
   usePrivateMetadataUpdate
@@ -258,14 +258,10 @@ export const CategoryDetails: React.FC<CategoryDetailsProps> = ({
         pageInfo={pageInfo}
         onProductClick={id => () => navigate(productUrl(id))}
         onSubmit={handleSubmit}
-        products={maybe(() =>
+        products={mapEdgesToItems(data?.category?.products)}
-          data.category.products.edges.map(edge => edge.node)
-        )}
         saveButtonBarState={updateResult.status}
         selectedChannelId={channel?.id}
-        subcategories={maybe(() =>
+        subcategories={mapEdgesToItems(data?.category?.children)}
-          data.category.children.edges.map(edge => edge.node)
-        )}
         subcategoryListToolbar={
           <IconButton
             color="primary"

src/categories/views/CategoryList/CategoryList.tsx

@@ -16,6 +16,7 @@ import { maybe } from "@saleor/misc";
 import { ListViews } from "@saleor/types";
 import createDialogActionHandlers from "@saleor/utils/handlers/dialogActionHandlers";
 import createSortHandler from "@saleor/utils/handlers/sortHandler";
+import { mapEdgesToItems } from "@saleor/utils/maps";
 import { getSortParams } from "@saleor/utils/sort";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
@@ -143,10 +144,7 @@ export const CategoryList: React.FC<CategoryListProps> = ({ params }) => {
   return (
     <>
       <CategoryListPage
-        categories={maybe(
+        categories={mapEdgesToItems(data?.categories)}
-          () => data.categories.edges.map(edge => edge.node),
-          []
-        )}
         currentTab={currentTab}
         initialSearch={params.query || ""}
         onSearchChange={query => changeFilterField({ query })}

src/collections/components/CollectionProducts/CollectionProducts.tsx

@@ -16,6 +16,7 @@ import { AVATAR_MARGIN } from "@saleor/components/TableCellAvatar/Avatar";
 import TableHead from "@saleor/components/TableHead";
 import TablePagination from "@saleor/components/TablePagination";
 import { makeStyles } from "@saleor/theme";
+import { mapEdgesToItems } from "@saleor/utils/maps";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
@@ -125,7 +126,7 @@ const CollectionProducts: React.FC<CollectionProductsProps> = props => {
           colSpan={numberOfColumns}
           selected={selected}
           disabled={disabled}
-          items={maybe(() => collection.products.edges.map(edge => edge.node))}
+          items={mapEdgesToItems(collection?.products)}
           toggleAll={toggleAll}
           toolbar={toolbar}
         >
@@ -164,7 +165,7 @@ const CollectionProducts: React.FC<CollectionProductsProps> = props => {
         </TableFooter>
         <TableBody>
           {renderCollection(
-            maybe(() => collection.products.edges.map(edge => edge.node)),
+            mapEdgesToItems(collection?.products),
             product => {
               const isSelected = product ? isChecked(product.id) : false;
               const channel =

src/collections/views/CollectionList/CollectionList.tsx

@@ -19,6 +19,7 @@ import { maybe } from "@saleor/misc";
 import { ListViews } from "@saleor/types";
 import createDialogActionHandlers from "@saleor/utils/handlers/dialogActionHandlers";
 import createSortHandler from "@saleor/utils/handlers/sortHandler";
+import { mapEdgesToItems } from "@saleor/utils/maps";
 import { getSortParams } from "@saleor/utils/sort";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
@@ -158,7 +159,7 @@ export const CollectionList: React.FC<CollectionListProps> = ({ params }) => {
         onTabSave={() => openModal("save-search")}
         tabs={tabs.map(tab => tab.name)}
         disabled={loading}
-        collections={maybe(() => data.collections.edges.map(edge => edge.node))}
+        collections={mapEdgesToItems(data?.collections)}
         settings={settings}
         onNextPage={loadNextPage}
         onPreviousPage={loadPreviousPage}

src/components/Navigator/modes/catalog.ts

@@ -3,6 +3,7 @@ import { collectionUrl } from "@saleor/collections/urls";
 import { UseNavigatorResult } from "@saleor/hooks/useNavigator";
 import { maybe } from "@saleor/misc";
 import { productUrl } from "@saleor/products/urls";
+import { mapEdgesToItems } from "@saleor/utils/maps";
 import { score } from "fuzzaldrin";
 import { IntlShape } from "react-intl";
 
@@ -19,9 +20,8 @@ export function searchInCatalog(
   navigate: UseNavigatorResult,
   catalog: SearchCatalog
 ): QuickSearchAction[] {
-  const categories: QuickSearchActionInput[] = maybe(
+  const categories: QuickSearchActionInput[] = mapEdgesToItems(
-    () => catalog.categories.edges.map(edge => edge.node),
+    catalog?.categories
-    []
   )
     .map<QuickSearchActionInput>(category => ({
       caption: intl.formatMessage(messages.category),
@@ -36,9 +36,8 @@ export function searchInCatalog(
     }))
     .sort(sortScores);
 
-  const collections: QuickSearchActionInput[] = maybe(
+  const collections: QuickSearchActionInput[] = mapEdgesToItems(
-    () => catalog.collections.edges.map(edge => edge.node),
+    catalog?.collections
-    []
   )
     .map<QuickSearchActionInput>(collection => ({
       caption: intl.formatMessage(messages.collection),
@@ -53,10 +52,7 @@ export function searchInCatalog(
     }))
     .sort(sortScores);
 
-  const products: QuickSearchActionInput[] = maybe(
+  const products: QuickSearchActionInput[] = mapEdgesToItems(catalog?.products)
-    () => catalog.products.edges.map(edge => edge.node),
-    []
-  )
     .map<QuickSearchActionInput>(product => ({
       caption: intl.formatMessage(messages.product),
       extraInfo: product.category.name,

src/components/Navigator/useQuickSearch.ts

@@ -6,6 +6,7 @@ import { maybe } from "@saleor/misc";
 import { useOrderDraftCreateMutation } from "@saleor/orders/mutations";
 import { orderUrl } from "@saleor/orders/urls";
 import useCustomerSearch from "@saleor/searches/useCustomerSearch";
+import { mapEdgesToItems } from "@saleor/utils/maps";
 import { RefObject, useEffect, useState } from "react";
 import { useIntl } from "react-intl";
 
@@ -107,10 +108,7 @@ function useQuickSearch(
       intl,
       {
         catalog,
-        customers: maybe(
+        customers: mapEdgesToItems(customers?.data?.search),
-          () => customers.data.search.edges.map(edge => edge.node),
-          []
-        ),
         order: maybe(() => orderData.order)
       },
       {

src/customers/components/CustomerDetailsPage/CustomerDetailsPage.tsx

@@ -11,7 +11,7 @@ import SaveButtonBar from "@saleor/components/SaveButtonBar";
 import { AccountErrorFragment } from "@saleor/fragments/types/AccountErrorFragment";
 import { SubmitPromise } from "@saleor/hooks/useForm";
 import { sectionNames } from "@saleor/intl";
-import { mapMetadataItemToInput } from "@saleor/utils/maps";
+import { mapEdgesToItems, mapMetadataItemToInput } from "@saleor/utils/maps";
 import useMetadataChangeTrigger from "@saleor/utils/metadata/useMetadataChangeTrigger";
 import React from "react";
 import { useIntl } from "react-intl";
@@ -102,9 +102,7 @@ const CustomerDetailsPage: React.FC<CustomerDetailsPageProps> = ({
                 />
                 <CardSpacer />
                 <CustomerOrders
-                  orders={maybe(() =>
+                  orders={mapEdgesToItems(customer?.orders)}
-                    customer.orders.edges.map(edge => edge.node)
-                  )}
                   onViewAllOrdersClick={onViewAllOrdersClick}
                   onRowClick={onRowClick}
                 />

src/customers/views/CustomerList/CustomerList.tsx

@@ -19,6 +19,7 @@ import { ListViews } from "@saleor/types";
 import createDialogActionHandlers from "@saleor/utils/handlers/dialogActionHandlers";
 import createFilterHandlers from "@saleor/utils/handlers/filterHandlers";
 import createSortHandler from "@saleor/utils/handlers/sortHandler";
+import { mapEdgesToItems } from "@saleor/utils/maps";
 import { getSortParams } from "@saleor/utils/sort";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
@@ -158,7 +159,7 @@ export const CustomerList: React.FC<CustomerListProps> = ({ params }) => {
             onTabDelete={() => openModal("delete-search")}
             onTabSave={() => openModal("save-search")}
             tabs={tabs.map(tab => tab.name)}
-            customers={maybe(() => data.customers.edges.map(edge => edge.node))}
+            customers={mapEdgesToItems(data?.customers)}
             settings={settings}
             disabled={loading}
             pageInfo={pageInfo}

src/discounts/components/DiscountCategories/DiscountCategories.tsx

@@ -13,6 +13,7 @@ import Skeleton from "@saleor/components/Skeleton";
 import TableHead from "@saleor/components/TableHead";
 import TablePagination from "@saleor/components/TablePagination";
 import { makeStyles } from "@saleor/theme";
+import { mapEdgesToItems } from "@saleor/utils/maps";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
@@ -98,7 +99,7 @@ const DiscountCategories: React.FC<DiscountCategoriesProps> = props => {
           colSpan={numberOfColumns}
           selected={selected}
           disabled={disabled}
-          items={maybe(() => discount.categories.edges.map(edge => edge.node))}
+          items={mapEdgesToItems(discount?.categories)}
           toggleAll={toggleAll}
           toolbar={toolbar}
         >
@@ -130,7 +131,7 @@ const DiscountCategories: React.FC<DiscountCategoriesProps> = props => {
         </TableFooter>
         <TableBody>
           {renderCollection(
-            maybe(() => discount.categories.edges.map(edge => edge.node)),
+            mapEdgesToItems(discount?.categories),
             category => {
               const isSelected = category ? isChecked(category.id) : false;
 

src/discounts/components/DiscountCollections/DiscountCollections.tsx

@@ -13,6 +13,7 @@ import Skeleton from "@saleor/components/Skeleton";
 import TableHead from "@saleor/components/TableHead";
 import TablePagination from "@saleor/components/TablePagination";
 import { makeStyles } from "@saleor/theme";
+import { mapEdgesToItems } from "@saleor/utils/maps";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
@@ -100,7 +101,7 @@ const DiscountCollections: React.FC<DiscountCollectionsProps> = props => {
           colSpan={numberOfColumns}
           selected={selected}
           disabled={disabled}
-          items={maybe(() => sale.collections.edges.map(edge => edge.node))}
+          items={mapEdgesToItems(sale?.collections)}
           toggleAll={toggleAll}
           toolbar={toolbar}
         >
@@ -130,7 +131,7 @@ const DiscountCollections: React.FC<DiscountCollectionsProps> = props => {
         </TableFooter>
         <TableBody>
           {renderCollection(
-            maybe(() => sale.collections.edges.map(edge => edge.node)),
+            mapEdgesToItems(sale?.collections),
             collection => {
               const isSelected = collection ? isChecked(collection.id) : false;
               return (

src/discounts/components/DiscountProducts/DiscountProducts.tsx

@@ -16,6 +16,7 @@ import { AVATAR_MARGIN } from "@saleor/components/TableCellAvatar/Avatar";
 import TableHead from "@saleor/components/TableHead";
 import TablePagination from "@saleor/components/TablePagination";
 import { makeStyles } from "@saleor/theme";
+import { mapEdgesToItems } from "@saleor/utils/maps";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
@@ -121,7 +122,7 @@ const DiscountProducts: React.FC<SaleProductsProps> = props => {
           colSpan={numberOfColumns}
           selected={selected}
           disabled={disabled}
-          items={maybe(() => sale.products.edges.map(edge => edge.node))}
+          items={mapEdgesToItems(sale?.products)}
           toggleAll={toggleAll}
           toolbar={toolbar}
         >
@@ -156,7 +157,7 @@ const DiscountProducts: React.FC<SaleProductsProps> = props => {
         </TableFooter>
         <TableBody>
           {renderCollection(
-            maybe(() => sale.products.edges.map(edge => edge.node)),
+            mapEdgesToItems(sale?.products),
             product => {
               const isSelected = product ? isChecked(product.id) : false;
               const channel =

src/discounts/views/SaleList/SaleList.tsx

@@ -21,6 +21,7 @@ import { ListViews } from "@saleor/types";
 import createDialogActionHandlers from "@saleor/utils/handlers/dialogActionHandlers";
 import createFilterHandlers from "@saleor/utils/handlers/filterHandlers";
 import createSortHandler from "@saleor/utils/handlers/sortHandler";
+import { mapEdgesToItems } from "@saleor/utils/maps";
 import { getSortParams } from "@saleor/utils/sort";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
@@ -172,7 +173,7 @@ export const SaleList: React.FC<SaleListProps> = ({ params }) => {
               onTabDelete={() => openModal("delete-search")}
               onTabSave={() => openModal("save-search")}
               tabs={tabs.map(tab => tab.name)}
-              sales={maybe(() => data.sales.edges.map(edge => edge.node))}
+              sales={mapEdgesToItems(data?.sales)}
               settings={settings}
               disabled={loading}
               pageInfo={pageInfo}

src/discounts/views/VoucherList/VoucherList.tsx

@@ -21,6 +21,7 @@ import { ListViews } from "@saleor/types";
 import createDialogActionHandlers from "@saleor/utils/handlers/dialogActionHandlers";
 import createFilterHandlers from "@saleor/utils/handlers/filterHandlers";
 import createSortHandler from "@saleor/utils/handlers/sortHandler";
+import { mapEdgesToItems } from "@saleor/utils/maps";
 import { getSortParams } from "@saleor/utils/sort";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
@@ -174,7 +175,7 @@ export const VoucherList: React.FC<VoucherListProps> = ({ params }) => {
               onTabSave={() => openModal("save-search")}
               tabs={tabs.map(tab => tab.name)}
               settings={settings}
-              vouchers={maybe(() => data.vouchers.edges.map(edge => edge.node))}
+              vouchers={mapEdgesToItems(data?.vouchers)}
               disabled={loading}
               pageInfo={pageInfo}
               onAdd={() => navigate(voucherAddUrl())}

src/home/views/index.tsx

@@ -2,6 +2,7 @@ import { channelsListUrl } from "@saleor/channels/urls";
 import useAppChannel from "@saleor/components/AppLayout/AppChannelContext";
 import useNavigator from "@saleor/hooks/useNavigator";
 import useUser from "@saleor/hooks/useUser";
+import { mapEdgesToItems } from "@saleor/utils/maps";
 import React from "react";
 
 import { getDatePeriod, getUserName } from "../../misc";
@@ -26,10 +27,10 @@ const HomeSection = () => {
 
   return (
     <HomePage
-      activities={data?.activities?.edges.map(edge => edge.node).reverse()}
+      activities={mapEdgesToItems(data?.activities)}
       orders={data?.ordersToday?.totalCount}
       sales={data?.salesToday?.gross}
-      topProducts={data?.productTopToday?.edges.map(edge => edge.node)}
+      topProducts={mapEdgesToItems(data?.productTopToday)}
       onProductClick={(productId, variantId) =>
         navigate(productVariantEditUrl(productId, variantId))
       }

src/navigation/views/MenuDetails/index.tsx

@@ -1,4 +1,5 @@
 import DialogContentText from "@material-ui/core/DialogContentText";
+import { collection } from "@saleor/collections/fixtures";
 import ActionDialog from "@saleor/components/ActionDialog";
 import { DEFAULT_INITIAL_SEARCH_DATA } from "@saleor/config";
 import useNavigator from "@saleor/hooks/useNavigator";
@@ -6,6 +7,7 @@ import useNotifier from "@saleor/hooks/useNotifier";
 import useCategorySearch from "@saleor/searches/useCategorySearch";
 import useCollectionSearch from "@saleor/searches/useCollectionSearch";
 import usePageSearch from "@saleor/searches/usePageSearch";
+import { mapEdgesToItems } from "@saleor/utils/maps";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
@@ -112,21 +114,15 @@ const MenuDetails: React.FC<MenuDetailsProps> = ({ id, params }) => {
           pageSearch.search(query);
         };
 
-        const categories = maybe(
+        const categories = mapEdgesToItems(
-          () => categorySearch.result.data.search.edges.map(edge => edge.node),
+          categorySearch?.result?.data?.search
-          []
         );
 
-        const collections = maybe(
+        const collections = mapEdgesToItems(
-          () =>
+          collectionSearch?.result?.data?.search
-            collectionSearch.result.data.search.edges.map(edge => edge.node),
-          []
         );
 
-        const pages = maybe(
+        const pages = mapEdgesToItems(pageSearch?.result?.data?.search);
-          () => pageSearch.result.data.search.edges.map(edge => edge.node),
-          []
-        );
 
         return (
           <MenuDeleteMutation

src/navigation/views/MenuList/MenuList.tsx

@@ -13,6 +13,7 @@ import { buttonMessages, commonMessages } from "@saleor/intl";
 import { maybe } from "@saleor/misc";
 import { ListViews } from "@saleor/types";
 import createSortHandler from "@saleor/utils/handlers/sortHandler";
+import { mapEdgesToItems } from "@saleor/utils/maps";
 import { getSortParams } from "@saleor/utils/sort";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
@@ -127,7 +128,7 @@ const MenuList: React.FC<MenuListProps> = ({ params }) => {
                 <>
                   <MenuListPage
                     disabled={loading}
-                    menus={maybe(() => data.menus.edges.map(edge => edge.node))}
+                    menus={mapEdgesToItems(data?.menus)}
                     settings={settings}
                     onAdd={() =>
                       navigate(

src/orders/views/OrderDetails/OrderDraftDetails/index.tsx

@@ -16,6 +16,7 @@ import { OrderDetails } from "@saleor/orders/types/OrderDetails";
 import { OrderDiscountProvider } from "@saleor/products/components/OrderDiscountProviders/OrderDiscountProvider";
 import { OrderLineDiscountProvider } from "@saleor/products/components/OrderDiscountProviders/OrderLineDiscountProvider";
 import useCustomerSearch from "@saleor/searches/useCustomerSearch";
+import { mapEdgesToItems } from "@saleor/utils/maps";
 import React from "react";
 import { useIntl } from "react-intl";
 
@@ -233,7 +234,7 @@ export const OrderDraftDetails: React.FC<OrderDraftDetailsProps> = ({
         loading={variantSearchOpts.loading}
         open={params.action === "add-order-line"}
         hasMore={variantSearchOpts.data?.search.pageInfo.hasNextPage}
-        products={variantSearchOpts.data?.search.edges.map(edge => edge.node)}
+        products={mapEdgesToItems(variantSearchOpts?.data?.search)}
         selectedChannelId={order?.channel?.id}
         onClose={closeModal}
         onFetch={variantSearch}

src/orders/views/OrderDetails/OrderNormalDetails/index.tsx

@@ -3,6 +3,7 @@ import useNavigator from "@saleor/hooks/useNavigator";
 import useUser from "@saleor/hooks/useUser";
 import OrderCannotCancelOrderDialog from "@saleor/orders/components/OrderCannotCancelOrderDialog";
 import OrderInvoiceEmailSendDialog from "@saleor/orders/components/OrderInvoiceEmailSendDialog";
+import { mapEdgesToItems } from "@saleor/utils/maps";
 import { useWarehouseList } from "@saleor/warehouses/queries";
 import React from "react";
 import { useIntl } from "react-intl";
@@ -224,9 +225,7 @@ export const OrderNormalDetails: React.FC<OrderNormalDetailsProps> = ({
           orderFulfillmentCancel.opts.data?.orderFulfillmentCancel.errors || []
         }
         open={params.action === "cancel-fulfillment"}
-        warehouses={
+        warehouses={mapEdgesToItems(warehouses?.data?.warehouses)}
-          warehouses.data?.warehouses.edges.map(edge => edge.node) || []
-        }
         onConfirm={variables =>
           orderFulfillmentCancel.mutate({
             id: params.id,

src/orders/views/OrderDetails/OrderUnconfirmedDetails/index.tsx

@@ -6,6 +6,7 @@ import OrderCannotCancelOrderDialog from "@saleor/orders/components/OrderCannotC
 import OrderInvoiceEmailSendDialog from "@saleor/orders/components/OrderInvoiceEmailSendDialog";
 import { OrderDiscountProvider } from "@saleor/products/components/OrderDiscountProviders/OrderDiscountProvider";
 import { OrderLineDiscountProvider } from "@saleor/products/components/OrderDiscountProviders/OrderLineDiscountProvider";
+import { mapEdgesToItems } from "@saleor/utils/maps";
 import { useWarehouseList } from "@saleor/warehouses/queries";
 import React from "react";
 import { useIntl } from "react-intl";
@@ -240,7 +241,7 @@ export const OrderUnconfirmedDetails: React.FC<OrderUnconfirmedDetailsProps> = (
         loading={variantSearchOpts.loading}
         open={params.action === "add-order-line"}
         hasMore={variantSearchOpts.data?.search.pageInfo.hasNextPage}
-        products={variantSearchOpts.data?.search.edges.map(edge => edge.node)}
+        products={mapEdgesToItems(variantSearchOpts?.data?.search)}
         selectedChannelId={order?.channel?.id}
         onClose={closeModal}
         onFetch={variantSearch}
@@ -297,9 +298,7 @@ export const OrderUnconfirmedDetails: React.FC<OrderUnconfirmedDetailsProps> = (
           orderFulfillmentCancel.opts.data?.orderFulfillmentCancel.errors || []
         }
         open={params.action === "cancel-fulfillment"}
-        warehouses={
+        warehouses={mapEdgesToItems(warehouses?.data?.warehouses)}
-          warehouses.data?.warehouses.edges.map(edge => edge.node) || []
-        }
         onConfirm={variables =>
           orderFulfillmentCancel.mutate({
             id: params.id,

src/orders/views/OrderDraftList/OrderDraftList.tsx

@@ -20,7 +20,7 @@ import { ListViews } from "@saleor/types";
 import createDialogActionHandlers from "@saleor/utils/handlers/dialogActionHandlers";
 import createFilterHandlers from "@saleor/utils/handlers/filterHandlers";
 import createSortHandler from "@saleor/utils/handlers/sortHandler";
-import { mapNodeToChoice } from "@saleor/utils/maps";
+import { mapEdgesToItems, mapNodeToChoice } from "@saleor/utils/maps";
 import { getSortParams } from "@saleor/utils/sort";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
@@ -194,9 +194,7 @@ export const OrderDraftList: React.FC<OrderDraftListProps> = ({ params }) => {
                 tabs={tabs.map(tab => tab.name)}
                 disabled={loading}
                 settings={settings}
-                orders={maybe(() =>
+                orders={mapEdgesToItems(data?.draftOrders)}
-                  data.draftOrders.edges.map(edge => edge.node)
-                )}
                 pageInfo={pageInfo}
                 onAdd={() => openModal("create-order")}
                 onNextPage={loadNextPage}

src/orders/views/OrderFulfill/OrderFulfill.tsx

@@ -5,6 +5,7 @@ import OrderFulfillPage from "@saleor/orders/components/OrderFulfillPage";
 import { useOrderFulfill } from "@saleor/orders/mutations";
 import { useOrderFulfillData } from "@saleor/orders/queries";
 import { orderUrl } from "@saleor/orders/urls";
+import { mapEdgesToItems } from "@saleor/utils/maps";
 import { useWarehouseList } from "@saleor/warehouses/queries";
 import React from "react";
 import { useIntl } from "react-intl";
@@ -86,7 +87,7 @@ const OrderFulfill: React.FC<OrderFulfillProps> = ({ orderId }) => {
         }
         order={data?.order}
         saveButtonBar="default"
-        warehouses={warehouseData?.warehouses.edges.map(edge => edge.node)}
+        warehouses={mapEdgesToItems(warehouseData?.warehouses)}
       />
     </>
   );

src/orders/views/OrderList/OrderList.tsx

@@ -16,7 +16,7 @@ import { ListViews } from "@saleor/types";
 import createDialogActionHandlers from "@saleor/utils/handlers/dialogActionHandlers";
 import createFilterHandlers from "@saleor/utils/handlers/filterHandlers";
 import createSortHandler from "@saleor/utils/handlers/sortHandler";
-import { mapNodeToChoice } from "@saleor/utils/maps";
+import { mapEdgesToItems, mapNodeToChoice } from "@saleor/utils/maps";
 import { getSortParams } from "@saleor/utils/sort";
 import React from "react";
 import { useIntl } from "react-intl";
@@ -157,7 +157,7 @@ export const OrderList: React.FC<OrderListProps> = ({ params }) => {
         disabled={loading}
         filterOpts={getFilterOpts(params, channelOpts)}
         limits={limitOpts.data?.shop.limits}
-        orders={maybe(() => data.orders.edges.map(edge => edge.node))}
+        orders={mapEdgesToItems(data?.orders)}
         pageInfo={pageInfo}
         sort={getSortParams(params)}
         onAdd={() => openModal("create-order")}

src/pageTypes/views/PageTypeDetails.tsx

@@ -22,6 +22,7 @@ import {
 import { ReorderEvent } from "@saleor/types";
 import getPageErrorMessage from "@saleor/utils/errors/page";
 import createMetadataUpdateHandler from "@saleor/utils/handlers/metadataUpdateHandler";
+import { mapEdgesToItems } from "@saleor/utils/maps";
 import {
   useMetadataUpdate,
   usePrivateMetadataUpdate
@@ -255,8 +256,8 @@ export const PageTypeDetails: React.FC<PageTypeDetailsProps> = ({
       />
       {!dataLoading && (
         <AssignAttributeDialog
-          attributes={result.data?.pageType.availableAttributes.edges.map(
+          attributes={mapEdgesToItems(
-            edge => edge.node
+            result?.data?.pageType?.availableAttributes
           )}
           confirmButtonState={assignAttributeOpts.status}
           errors={

src/pages/views/PageCreate.tsx

@@ -13,6 +13,7 @@ import usePageSearch from "@saleor/searches/usePageSearch";
 import usePageTypeSearch from "@saleor/searches/usePageTypeSearch";
 import useProductSearch from "@saleor/searches/useProductSearch";
 import createMetadataCreateHandler from "@saleor/utils/handlers/metadataCreateHandler";
+import { mapEdgesToItems } from "@saleor/utils/maps";
 import {
   useMetadataUpdate,
   usePrivateMetadataUpdate
@@ -164,9 +165,7 @@ export const PageCreate: React.FC<PageCreateProps> = ({ params }) => {
               errors={pageCreateOpts.data?.pageCreate.errors || []}
               saveButtonBarState={pageCreateOpts.status}
               page={null}
-              pageTypes={searchPageTypesOpts.data?.search.edges.map(
+              pageTypes={mapEdgesToItems(searchPageTypesOpts?.data?.search)}
-                edge => edge.node
-              )}
               onBack={() => navigate(pageListUrl())}
               onRemove={() => undefined}
               onSubmit={handleSubmit}
@@ -176,11 +175,9 @@ export const PageCreate: React.FC<PageCreateProps> = ({ params }) => {
                 params.action === "assign-attribute-value" && params.id
               }
               onAssignReferencesClick={handleAssignAttributeReferenceClick}
-              referencePages={searchPagesOpts.data?.search.edges.map(
+              referencePages={mapEdgesToItems(searchPagesOpts?.data?.search)}
-                edge => edge.node
+              referenceProducts={mapEdgesToItems(
-              )}
+                searchProductsOpts?.data?.search
-              referenceProducts={searchProductsOpts.data?.search.edges.map(
-                edge => edge.node
               )}
               fetchReferencePages={searchPages}
               fetchMoreReferencePages={fetchMoreReferencePages}

src/pages/views/PageDetails.tsx

@@ -24,6 +24,7 @@ import { commonMessages } from "@saleor/intl";
 import usePageSearch from "@saleor/searches/usePageSearch";
 import useProductSearch from "@saleor/searches/useProductSearch";
 import createMetadataUpdateHandler from "@saleor/utils/handlers/metadataUpdateHandler";
+import { mapEdgesToItems } from "@saleor/utils/maps";
 import {
   useMetadataUpdate,
   usePrivateMetadataUpdate
@@ -206,12 +207,8 @@ export const PageDetails: React.FC<PageDetailsProps> = ({ id, params }) => {
           params.action === "assign-attribute-value" && params.id
         }
         onAssignReferencesClick={handleAssignAttributeReferenceClick}
-        referencePages={searchPagesOpts.data?.search.edges.map(
+        referencePages={mapEdgesToItems(searchPagesOpts?.data?.search)}
-          edge => edge.node
+        referenceProducts={mapEdgesToItems(searchProductsOpts?.data?.search)}
-        )}
-        referenceProducts={searchProductsOpts.data?.search.edges.map(
-          edge => edge.node
-        )}
         fetchReferencePages={searchPages}
         fetchMoreReferencePages={fetchMoreReferencePages}
         fetchReferenceProducts={searchProducts}

src/pages/views/PageList/PageList.tsx

@@ -15,6 +15,7 @@ import { maybe } from "@saleor/misc";
 import { ListViews } from "@saleor/types";
 import createDialogActionHandlers from "@saleor/utils/handlers/dialogActionHandlers";
 import createSortHandler from "@saleor/utils/handlers/sortHandler";
+import { mapEdgesToItems } from "@saleor/utils/maps";
 import { getSortParams } from "@saleor/utils/sort";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
@@ -114,7 +115,7 @@ export const PageList: React.FC<PageListProps> = ({ params }) => {
               <PageListPage
                 disabled={loading}
                 settings={settings}
-                pages={maybe(() => data.pages.edges.map(edge => edge.node))}
+                pages={mapEdgesToItems(data?.pages)}
                 pageInfo={pageInfo}
                 onAdd={() => navigate(pageCreateUrl())}
                 onBack={() => navigate(configurationMenuUrl)}

src/permissionGroups/views/PermissionGroupDetails/PermissionGroupDetails.tsx

@@ -13,9 +13,11 @@ import {
   permissionsDiff,
   usersDiff
 } from "@saleor/permissionGroups/utils";
+import { searchProducts } from "@saleor/searches/useProductSearch";
 import useStaffMemberSearch from "@saleor/searches/useStaffMemberSearch";
 import createDialogActionHandlers from "@saleor/utils/handlers/dialogActionHandlers";
 import createSortHandler from "@saleor/utils/handlers/sortHandler";
+import { mapEdgesToItems } from "@saleor/utils/maps";
 import { getSortParams } from "@saleor/utils/sort";
 import React, { useState } from "react";
 import { useIntl } from "react-intl";
@@ -185,7 +187,7 @@ export const PermissionGroupDetails: React.FC<PermissionGroupDetailsProps> = ({
       />
       <AssignMembersDialog
         loading={searchResult.loading}
-        staffMembers={searchResult?.data?.search.edges.map(edge => edge.node)}
+        staffMembers={mapEdgesToItems(searchResult?.data?.search)}
         onSearchChange={search}
         onFetchMore={loadMore}
         disabled={disabled}

src/permissionGroups/views/PermissionGroupList/PermissionGroupList.tsx

@@ -14,6 +14,7 @@ import { PermissionGroupDelete } from "@saleor/permissionGroups/types/Permission
 import { ListViews } from "@saleor/types";
 import createDialogActionHandlers from "@saleor/utils/handlers/dialogActionHandlers";
 import createSortHandler from "@saleor/utils/handlers/sortHandler";
+import { mapEdgesToItems } from "@saleor/utils/maps";
 import { getSortParams } from "@saleor/utils/sort";
 import React from "react";
 import { useIntl } from "react-intl";
@@ -73,7 +74,7 @@ export const PermissionGroupList: React.FC<PermissionGroupListProps> = ({
     PermissionGroupListUrlQueryParams
   >(navigate, permissionGroupListUrl, params);
 
-  const permissionGroups = data?.permissionGroups?.edges.map(edge => edge.node);
+  const permissionGroups = mapEdgesToItems(data?.permissionGroups);
   const [deleteError, setDeleteError] = React.useState<
     PermissionGroupErrorFragment
   >();

src/plugins/views/PluginList/PluginList.tsx

@@ -13,6 +13,7 @@ import { ListViews } from "@saleor/types";
 import createDialogActionHandlers from "@saleor/utils/handlers/dialogActionHandlers";
 import createFilterHandlers from "@saleor/utils/handlers/filterHandlers";
 import createSortHandler from "@saleor/utils/handlers/sortHandler";
+import { mapEdgesToItems } from "@saleor/utils/maps";
 import { getSortParams } from "@saleor/utils/sort";
 import React from "react";
 
@@ -121,7 +122,7 @@ export const PluginsList: React.FC<PluginsListProps> = ({ params }) => {
         filterOpts={getFilterOpts(params)}
         initialSearch={params.query || ""}
         settings={settings}
-        plugins={maybe(() => data.plugins.edges.map(edge => edge.node))}
+        plugins={mapEdgesToItems(data?.plugins)}
         pageInfo={pageInfo}
         sort={getSortParams(params)}
         tabs={getFilterTabs().map(tab => tab.name)}

src/productTypes/views/ProductTypeList/ProductTypeList.tsx

@@ -18,6 +18,7 @@ import { ListViews } from "@saleor/types";
 import createDialogActionHandlers from "@saleor/utils/handlers/dialogActionHandlers";
 import createFilterHandlers from "@saleor/utils/handlers/filterHandlers";
 import createSortHandler from "@saleor/utils/handlers/sortHandler";
+import { mapEdgesToItems } from "@saleor/utils/maps";
 import { getSortParams } from "@saleor/utils/sort";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
@@ -174,9 +175,7 @@ export const ProductTypeList: React.FC<ProductTypeListProps> = ({ params }) => {
               onTabSave={() => openModal("save-search")}
               tabs={tabs.map(tab => tab.name)}
               disabled={loading}
-              productTypes={maybe(() =>
+              productTypes={mapEdgesToItems(data?.productTypes)}
-                data.productTypes.edges.map(edge => edge.node)
-              )}
               pageInfo={pageInfo}
               onAdd={() => navigate(productTypeAddUrl)}
               onBack={() => navigate(configurationMenuUrl)}

src/productTypes/views/ProductTypeUpdate/index.tsx

@@ -15,6 +15,7 @@ import { useProductTypeUpdateMutation } from "@saleor/productTypes/mutations";
 import { ReorderEvent } from "@saleor/types";
 import { ProductAttributeType } from "@saleor/types/globalTypes";
 import createMetadataUpdateHandler from "@saleor/utils/handlers/metadataUpdateHandler";
+import { mapEdgesToItems } from "@saleor/utils/maps";
 import {
   useMetadataUpdate,
   usePrivateMetadataUpdate
@@ -338,10 +339,8 @@ export const ProductTypeUpdate: React.FC<ProductTypeUpdateProps> = ({
                   {!dataLoading &&
                     Object.keys(ProductAttributeType).map(key => (
                       <AssignAttributeDialog
-                        attributes={maybe(() =>
+                        attributes={mapEdgesToItems(
-                          result.data.productType.availableAttributes.edges.map(
+                          result?.data?.productType?.availableAttributes
-                            edge => edge.node
-                          )
                         )}
                         confirmButtonState={assignAttribute.opts.status}
                         errors={maybe(

src/products/views/ProductCreate/ProductCreate.tsx

@@ -34,6 +34,7 @@ import { useTaxTypeList } from "@saleor/taxes/queries";
 import { getProductErrorMessage } from "@saleor/utils/errors";
 import createDialogActionHandlers from "@saleor/utils/handlers/dialogActionHandlers";
 import createMetadataCreateHandler from "@saleor/utils/handlers/metadataCreateHandler";
+import { mapEdgesToItems } from "@saleor/utils/maps";
 import {
   useMetadataUpdate,
   usePrivateMetadataUpdate
@@ -310,9 +311,7 @@ export const ProductCreateView: React.FC<ProductCreateProps> = ({ params }) => {
         fetchMoreCategories={fetchMoreCategories}
         fetchMoreCollections={fetchMoreCollections}
         fetchMoreProductTypes={fetchMoreProductTypes}
-        warehouses={
+        warehouses={mapEdgesToItems(warehouses?.data?.warehouses)}
-          warehouses.data?.warehouses.edges.map(edge => edge.node) || []
-        }
         taxTypes={taxTypes.data?.taxTypes || []}
         weightUnit={shop?.defaultWeightUnit}
         openChannelsModal={handleChannelsModalOpen}
@@ -321,12 +320,8 @@ export const ProductCreateView: React.FC<ProductCreateProps> = ({ params }) => {
           params.action === "assign-attribute-value" && params.id
         }
         onAssignReferencesClick={handleAssignAttributeReferenceClick}
-        referencePages={searchPagesOpts.data?.search.edges.map(
+        referencePages={mapEdgesToItems(searchPagesOpts?.data?.search)}
-          edge => edge.node
+        referenceProducts={mapEdgesToItems(searchProductsOpts?.data?.search)}
-        )}
-        referenceProducts={searchProductsOpts.data?.search.edges.map(
-          edge => edge.node
-        )}
         fetchReferencePages={searchPages}
         fetchMoreReferencePages={fetchMoreReferencePages}
         fetchReferenceProducts={searchProducts}

src/products/views/ProductList/ProductList.tsx

@@ -55,6 +55,7 @@ import useProductTypeSearch from "@saleor/searches/useProductTypeSearch";
 import { ListViews } from "@saleor/types";
 import createDialogActionHandlers from "@saleor/utils/handlers/dialogActionHandlers";
 import createFilterHandlers from "@saleor/utils/handlers/filterHandlers";
+import { mapEdgesToItems } from "@saleor/utils/maps";
 import { getSortUrlVariables } from "@saleor/utils/sort";
 import { useWarehouseList } from "@saleor/warehouses/queries";
 import React, { useEffect } from "react";
@@ -353,18 +354,14 @@ export const ProductList: React.FC<ProductListProps> = ({ params }) => {
           sort: params.sort
         }}
         onSort={handleSort}
-        availableInGridAttributes={maybe(
+        availableInGridAttributes={mapEdgesToItems(
-          () => attributes.data.availableInGrid.edges.map(edge => edge.node),
+          attributes?.data?.availableInGrid
-          []
         )}
         currencySymbol={channel?.currencyCode || ""}
         currentTab={currentTab}
         defaultSettings={defaultListSettings[ListViews.PRODUCT_LIST]}
         filterOpts={filterOpts}
-        gridAttributes={maybe(
+        gridAttributes={mapEdgesToItems(attributes?.data?.grid)}
-          () => attributes.data.grid.edges.map(edge => edge.node),
-          []
-        )}
         totalGridAttributes={maybe(
           () => attributes.data.availableInGrid.totalCount,
           0
@@ -378,7 +375,7 @@ export const ProductList: React.FC<ProductListProps> = ({ params }) => {
         onAdd={() => navigate(productAddUrl())}
         disabled={loading}
         limits={limitOpts.data?.shop.limits}
-        products={maybe(() => data.products.edges.map(edge => edge.node))}
+        products={mapEdgesToItems(data?.products)}
         onFetchMore={() =>
           attributes.loadMore(
             (prev, next) => {
@@ -484,9 +481,7 @@ export const ProductList: React.FC<ProductListProps> = ({ params }) => {
           filter: data?.products.totalCount
         }}
         selectedProducts={listElements.length}
-        warehouses={
+        warehouses={mapEdgesToItems(warehouses?.data?.warehouses)}
-          warehouses.data?.warehouses.edges.map(edge => edge.node) || []
-        }
         channels={availableChannels}
         onClose={closeModal}
         onSubmit={data =>

src/products/views/ProductList/filters.ts

@@ -20,6 +20,7 @@ import {
   SearchProductTypes,
   SearchProductTypesVariables
 } from "@saleor/searches/types/SearchProductTypes";
+import { mapEdgesToItems, mapNodeToChoice } from "@saleor/utils/maps";
 import isArray from "lodash-es/isArray";
 
 import { IFilterElement } from "../../../components/Filter";
@@ -80,13 +81,8 @@ export function getFilterOpts(
       })),
     categories: {
       active: !!params.categories,
-      choices: maybe(
+      choices: mapNodeToChoice(
-        () =>
+        mapEdgesToItems(categories?.search?.result?.data?.search)
-          categories.search.result.data.search.edges.map(edge => ({
-            label: edge.node.name,
-            value: edge.node.id
-          })),
-        []
       ),
       displayValues: !!params.categories
         ? maybe(
@@ -110,13 +106,8 @@ export function getFilterOpts(
     },
     collections: {
       active: !!params.collections,
-      choices: maybe(
+      choices: mapNodeToChoice(
-        () =>
+        mapEdgesToItems(collections?.search?.result?.data?.search)
-          collections.search.result.data.search.edges.map(edge => ({
-            label: edge.node.name,
-            value: edge.node.id
-          })),
-        []
       ),
       displayValues: !!params.collections
         ? maybe(
@@ -151,13 +142,8 @@ export function getFilterOpts(
     },
     productType: {
       active: !!params.productTypes,
-      choices: maybe(
+      choices: mapNodeToChoice(
-        () =>
+        mapEdgesToItems(productTypes?.search?.result?.data?.search)
-          productTypes.search.result.data.search.edges.map(edge => ({
-            label: edge.node.name,
-            value: edge.node.id
-          })),
-        []
       ),
       displayValues: !!params.productTypes
         ? maybe(

src/products/views/ProductUpdate/ProductUpdate.tsx

@@ -47,6 +47,7 @@ import useProductSearch from "@saleor/searches/useProductSearch";
 import { getProductErrorMessage } from "@saleor/utils/errors";
 import createDialogActionHandlers from "@saleor/utils/handlers/dialogActionHandlers";
 import createMetadataUpdateHandler from "@saleor/utils/handlers/metadataUpdateHandler";
+import { mapEdgesToItems } from "@saleor/utils/maps";
 import {
   useMetadataUpdate,
   usePrivateMetadataUpdate
@@ -525,9 +526,7 @@ export const ProductUpdate: React.FC<ProductUpdateProps> = ({ id, params }) => {
         header={product?.name}
         placeholderImage={placeholderImg}
         product={product}
-        warehouses={
+        warehouses={mapEdgesToItems(warehouses?.data?.warehouses)}
-          warehouses.data?.warehouses.edges.map(edge => edge.node) || []
-        }
         taxTypes={data?.taxTypes}
         variants={product?.variants}
         onBack={handleBack}
@@ -570,12 +569,8 @@ export const ProductUpdate: React.FC<ProductUpdateProps> = ({ id, params }) => {
           params.action === "assign-attribute-value" && params.id
         }
         onAssignReferencesClick={handleAssignAttributeReferenceClick}
-        referencePages={searchPagesOpts.data?.search.edges.map(
+        referencePages={mapEdgesToItems(searchPagesOpts?.data?.search)}
-          edge => edge.node
+        referenceProducts={mapEdgesToItems(searchProductsOpts?.data?.search)}
-        )}
-        referenceProducts={searchProductsOpts.data?.search.edges.map(
-          edge => edge.node
-        )}
         fetchReferencePages={searchPages}
         fetchMoreReferencePages={fetchMoreReferencePages}
         fetchReferenceProducts={searchProducts}

src/products/views/ProductVariant.tsx

@@ -27,6 +27,7 @@ import usePageSearch from "@saleor/searches/usePageSearch";
 import useProductSearch from "@saleor/searches/useProductSearch";
 import createDialogActionHandlers from "@saleor/utils/handlers/dialogActionHandlers";
 import createMetadataUpdateHandler from "@saleor/utils/handlers/metadataUpdateHandler";
+import { mapEdgesToItems } from "@saleor/utils/maps";
 import {
   useMetadataUpdate,
   usePrivateMetadataUpdate
@@ -326,9 +327,7 @@ export const ProductVariant: React.FC<ProductUpdateProps> = ({
         placeholderImage={placeholderImg}
         variant={variant}
         header={variant?.name || variant?.sku}
-        warehouses={
+        warehouses={mapEdgesToItems(warehouses?.data?.warehouses)}
-          warehouses.data?.warehouses.edges.map(edge => edge.node) || []
-        }
         onAdd={() => navigate(productVariantAddUrl(productId))}
         onBack={handleBack}
         onDelete={() => openModal("remove")}
@@ -346,12 +345,8 @@ export const ProductVariant: React.FC<ProductUpdateProps> = ({
           params.action === "assign-attribute-value" && params.id
         }
         onAssignReferencesClick={handleAssignAttributeReferenceClick}
-        referencePages={searchPagesOpts.data?.search.edges.map(
+        referencePages={mapEdgesToItems(searchPagesOpts?.data?.search)}
-          edge => edge.node
+        referenceProducts={mapEdgesToItems(searchProductsOpts?.data?.search)}
-        )}
-        referenceProducts={searchProductsOpts.data?.search.edges.map(
-          edge => edge.node
-        )}
         fetchReferencePages={searchPages}
         fetchMoreReferencePages={fetchMoreReferencePages}
         fetchReferenceProducts={searchProducts}

src/products/views/ProductVariantCreate.tsx

@@ -14,6 +14,7 @@ import useShop from "@saleor/hooks/useShop";
 import usePageSearch from "@saleor/searches/usePageSearch";
 import useProductSearch from "@saleor/searches/useProductSearch";
 import createMetadataCreateHandler from "@saleor/utils/handlers/metadataCreateHandler";
+import { mapEdgesToItems } from "@saleor/utils/maps";
 import {
   useMetadataUpdate,
   usePrivateMetadataUpdate
@@ -203,20 +204,14 @@ export const ProductVariant: React.FC<ProductVariantCreateProps> = ({
         onWarehouseConfigure={() => navigate(warehouseAddPath)}
         onVariantReorder={handleVariantReorder}
         saveButtonBarState={variantCreateResult.status}
-        warehouses={
+        warehouses={mapEdgesToItems(warehouses?.data?.warehouses)}
-          warehouses.data?.warehouses.edges.map(edge => edge.node) || []
-        }
         weightUnit={shop?.defaultWeightUnit}
         assignReferencesAttributeId={
           params.action === "assign-attribute-value" && params.id
         }
         onAssignReferencesClick={handleAssignAttributeReferenceClick}
-        referencePages={searchPagesOpts.data?.search.edges.map(
+        referencePages={mapEdgesToItems(searchPagesOpts?.data?.search)}
-          edge => edge.node
+        referenceProducts={mapEdgesToItems(searchProductsOpts?.data?.search)}
-        )}
-        referenceProducts={searchProductsOpts.data?.search.edges.map(
-          edge => edge.node
-        )}
         fetchReferencePages={searchPages}
         fetchMoreReferencePages={fetchMoreReferencePages}
         fetchReferenceProducts={searchProducts}

src/products/views/ProductVariantCreator/ProductVariantCreator.tsx

@@ -5,6 +5,7 @@ import useNotifier from "@saleor/hooks/useNotifier";
 import { useProductVariantBulkCreateMutation } from "@saleor/products/mutations";
 import { useCreateMultipleVariantsData } from "@saleor/products/queries";
 import { productUrl } from "@saleor/products/urls";
+import { mapEdgesToItems } from "@saleor/utils/maps";
 import React from "react";
 import { useIntl } from "react-intl";
 
@@ -73,7 +74,7 @@ const ProductVariantCreator: React.FC<ProductVariantCreatorProps> = ({
             variables: { id, inputs }
           })
         }
-        warehouses={data?.warehouses.edges.map(edge => edge.node) || []}
+        warehouses={mapEdgesToItems(data?.warehouses)}
       />
     </>
   );

src/shipping/components/ShippingMethodProducts/ShippingMethodProducts.stories.tsx

@@ -1,5 +1,6 @@
 import { shippingZone } from "@saleor/shipping/fixtures";
 import Decorator from "@saleor/storybook//Decorator";
+import { mapEdgesToItems } from "@saleor/utils/maps";
 import { storiesOf } from "@storybook/react";
 import React from "react";
 
@@ -7,8 +8,8 @@ import ShippingMethodProducts, {
   ShippingMethodProductsProps
 } from "./ShippingMethodProducts";
 
-const products = shippingZone.shippingMethods[0].excludedProducts.edges.map(
+const products = mapEdgesToItems(
-  edge => edge.node
+  shippingZone.shippingMethods[0].excludedProducts
 );
 
 const props: ShippingMethodProductsProps = {

src/shipping/components/ShippingZoneRatesPage/ShippingZoneRatesPage.tsx

@@ -30,7 +30,7 @@ import {
   PostalCodeRuleInclusionTypeEnum,
   ShippingMethodTypeEnum
 } from "@saleor/types/globalTypes";
-import { mapMetadataItemToInput } from "@saleor/utils/maps";
+import { mapEdgesToItems, mapMetadataItemToInput } from "@saleor/utils/maps";
 import useMetadataChangeTrigger from "@saleor/utils/metadata/useMetadataChangeTrigger";
 import React from "react";
 import { FormattedMessage } from "react-intl";
@@ -192,9 +192,7 @@ export const ShippingZoneRatesPage: React.FC<ShippingZoneRatesPageProps> = ({
                 />
                 <CardSpacer />
                 <ShippingMethodProducts
-                  products={rate?.excludedProducts?.edges.map(
+                  products={mapEdgesToItems(rate?.excludedProducts)}
-                    edge => edge.node
-                  )}
                   onProductAssign={onProductAssign}
                   onProductUnassign={onProductUnassign}
                   disabled={disabled}

src/shipping/views/ShippingZoneDetails/index.tsx

@@ -22,6 +22,7 @@ import {
 } from "@saleor/shipping/mutations";
 import createDialogActionHandlers from "@saleor/utils/handlers/dialogActionHandlers";
 import createMetadataUpdateHandler from "@saleor/utils/handlers/metadataUpdateHandler";
+import { mapEdgesToItems } from "@saleor/utils/maps";
 import {
   useMetadataUpdate,
   usePrivateMetadataUpdate
@@ -204,9 +205,7 @@ const ShippingZoneDetails: React.FC<ShippingZoneDetailsProps> = ({
         }
         saveButtonBarState={updateShippingZoneOpts.status}
         shippingZone={data?.shippingZone}
-        warehouses={
+        warehouses={mapEdgesToItems(searchWarehousesOpts?.data?.search)}
-          searchWarehousesOpts.data?.search.edges.map(edge => edge.node) || []
-        }
         hasMore={searchWarehousesOpts.data?.search.pageInfo.hasNextPage}
         loading={searchWarehousesOpts.loading}
         onFetchMore={loadMore}

src/shipping/views/ShippingZonesList.tsx

@@ -16,6 +16,7 @@ import { commonMessages } from "@saleor/intl";
 import { getStringOrPlaceholder, maybe } from "@saleor/misc";
 import { ListViews } from "@saleor/types";
 import createDialogActionHandlers from "@saleor/utils/handlers/dialogActionHandlers";
+import { mapEdgesToItems } from "@saleor/utils/maps";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
@@ -125,9 +126,7 @@ export const ShippingZonesList: React.FC<ShippingZonesListProps> = ({
           deleteShippingZoneOpts.loading ||
           updateDefaultWeightUnitOpts.loading
         }
-        shippingZones={maybe(() =>
+        shippingZones={mapEdgesToItems(data?.shippingZones)}
-          data.shippingZones.edges.map(edge => edge.node)
-        )}
         pageInfo={pageInfo}
         onAdd={() => navigate(shippingZoneAddUrl)}
         onBack={() => navigate(configurationMenuUrl)}

src/staff/views/StaffDetails.tsx

@@ -9,6 +9,7 @@ import useUser from "@saleor/hooks/useUser";
 import { commonMessages } from "@saleor/intl";
 import { getStringOrPlaceholder, maybe } from "@saleor/misc";
 import usePermissionGroupSearch from "@saleor/searches/usePermissionGroupSearch";
+import { mapEdgesToItems } from "@saleor/utils/maps";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
@@ -207,8 +208,8 @@ export const StaffDetails: React.FC<OrderListProps> = ({ id, params }) => {
                                       })
                                     )
                                   }
-                                  availablePermissionGroups={searchPermissionGroupsOpts.data?.search.edges.map(
+                                  availablePermissionGroups={mapEdgesToItems(
-                                    edge => edge.node
+                                    searchPermissionGroupsOpts?.data?.search
                                   )}
                                   staffMember={staffMember}
                                   saveButtonBarState={updateResult.status}

src/staff/views/StaffList/StaffList.tsx

@@ -19,6 +19,7 @@ import { ListViews } from "@saleor/types";
 import createDialogActionHandlers from "@saleor/utils/handlers/dialogActionHandlers";
 import createFilterHandlers from "@saleor/utils/handlers/filterHandlers";
 import createSortHandler from "@saleor/utils/handlers/sortHandler";
+import { mapEdgesToItems } from "@saleor/utils/maps";
 import { getSortParams } from "@saleor/utils/sort";
 import React from "react";
 import { useIntl } from "react-intl";
@@ -187,7 +188,7 @@ export const StaffList: React.FC<StaffListProps> = ({ params }) => {
         settings={settings}
         pageInfo={pageInfo}
         sort={getSortParams(params)}
-        staffMembers={staffQueryData?.staffUsers.edges.map(edge => edge.node)}
+        staffMembers={mapEdgesToItems(staffQueryData?.staffUsers)}
         onAdd={() => openModal("add")}
         onBack={() => navigate(configurationMenuUrl)}
         onNextPage={loadNextPage}
@@ -197,8 +198,8 @@ export const StaffList: React.FC<StaffListProps> = ({ params }) => {
         onSort={handleSort}
       />
       <StaffAddMemberDialog
-        availablePermissionGroups={searchPermissionGroupsOpts.data?.search.edges.map(
+        availablePermissionGroups={mapEdgesToItems(
-          edge => edge.node
+          searchPermissionGroupsOpts?.data?.search
         )}
         confirmButtonState={addStaffMemberData.status}
         initialSearch=""

src/storybook/stories/categories/CategoryUpdatePage.tsx

@@ -1,6 +1,7 @@
 import placeholderImage from "@assets/images/placeholder255x255.png";
 import { Omit } from "@material-ui/core";
 import { ProductErrorCode } from "@saleor/types/globalTypes";
+import { mapEdgesToItems } from "@saleor/utils/maps";
 import { storiesOf } from "@storybook/react";
 import React from "react";
 
@@ -45,10 +46,10 @@ const updateProps: Omit<CategoryUpdatePageProps, "classes"> = {
     hasPreviousPage: true
   },
   productListToolbar: null,
-  products: category.products.edges.map(edge => edge.node),
+  products: mapEdgesToItems(category.products),
   saveButtonBarState: "default",
   selectedChannelId: "123",
-  subcategories: category.children.edges.map(edge => edge.node),
+  subcategories: mapEdgesToItems(category.children),
   subcategoryListToolbar: null,
   ...listActionsProps
 };

src/storybook/stories/home/HomePage.tsx

@@ -2,6 +2,7 @@ import placeholderImage from "@assets/images/placeholder60x60.png";
 import { Omit } from "@material-ui/core";
 import { adminUserPermissions } from "@saleor/fixtures";
 import { PermissionEnum } from "@saleor/types/globalTypes";
+import { mapEdgesToItems } from "@saleor/utils/maps";
 import { storiesOf } from "@storybook/react";
 import React from "react";
 
@@ -12,7 +13,7 @@ import Decorator from "../../Decorator";
 const shop = shopFixture(placeholderImage);
 
 const homePageProps: Omit<HomePageProps, "classes"> = {
-  activities: shop.activities.edges.map(edge => edge.node),
+  activities: mapEdgesToItems(shop.activities),
   noChannel: false,
   onCreateNewChannelClick: () => undefined,
   onOrdersToCaptureClick: () => undefined,
@@ -24,7 +25,7 @@ const homePageProps: Omit<HomePageProps, "classes"> = {
   ordersToFulfill: shop.ordersToFulfill.totalCount,
   productsOutOfStock: shop.productsOutOfStock.totalCount,
   sales: shop.salesToday.gross,
-  topProducts: shop.productTopToday.edges.map(edge => edge.node),
+  topProducts: mapEdgesToItems(shop.productTopToday),
   userName: "admin@example.com",
   userPermissions: adminUserPermissions
 };

src/utils/maps.ts

@@ -6,6 +6,18 @@ import { SearchPages_search_edges_node } from "@saleor/searches/types/SearchPage
 import { Node } from "@saleor/types";
 import { MetadataInput } from "@saleor/types/globalTypes";
 
+interface EdgesType<T> {
+  edges?: Array<{ node: T }>;
+}
+
+export function mapEdgesToItems<T>(data?: EdgesType<T>): T[] {
+  if (!data || !data?.edges) {
+    return [];
+  }
+
+  return data.edges.map(({ node }) => node);
+}
+
 export function mapCountriesToChoices(
   countries: ShopInfo_shop_countries[]
 ): Array<SingleAutocompleteChoiceType | MultiAutocompleteChoiceType> {

src/warehouses/components/WarehouseDetailsPage/WarehouseDetailsPage.tsx

@@ -17,7 +17,7 @@ import { sectionNames } from "@saleor/intl";
 import { findValueInEnum, maybe } from "@saleor/misc";
 import { CountryCode } from "@saleor/types/globalTypes";
 import createSingleAutocompleteSelectHandler from "@saleor/utils/handlers/singleAutocompleteSelectChangeHandler";
-import { mapCountriesToChoices } from "@saleor/utils/maps";
+import { mapCountriesToChoices, mapEdgesToItems } from "@saleor/utils/maps";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
@@ -116,7 +116,7 @@ const WarehouseDetailsPage: React.FC<WarehouseDetailsPageProps> = ({
               </div>
               <div>
                 <WarehouseZones
-                  zones={warehouse?.shippingZones?.edges.map(edge => edge.node)}
+                  zones={mapEdgesToItems(warehouse?.shippingZones)}
                   onShippingZoneClick={onShippingZoneClick}
                 />
               </div>

src/warehouses/views/WarehouseList/WarehouseList.tsx

@@ -17,6 +17,7 @@ import { ListViews } from "@saleor/types";
 import createDialogActionHandlers from "@saleor/utils/handlers/dialogActionHandlers";
 import createFilterHandlers from "@saleor/utils/handlers/filterHandlers";
 import createSortHandler from "@saleor/utils/handlers/sortHandler";
+import { mapEdgesToItems } from "@saleor/utils/maps";
 import { getSortParams } from "@saleor/utils/sort";
 import WarehouseDeleteDialog from "@saleor/warehouses/components/WarehouseDeleteDialog";
 import WarehouseListPage from "@saleor/warehouses/components/WarehouseListPage";
@@ -150,7 +151,7 @@ const WarehouseList: React.FC<WarehouseListProps> = ({ params }) => {
         onTabSave={() => openModal("save-search")}
         limits={limitOpts.data?.shop.limits}
         tabs={tabs.map(tab => tab.name)}
-        warehouses={maybe(() => data.warehouses.edges.map(edge => edge.node))}
+        warehouses={mapEdgesToItems(data?.warehouses)}
         settings={settings}
         disabled={loading}
         pageInfo={pageInfo}