Change more usages to map edges to items

src/hooks/makeTopLevelSearch/utils.ts

@@ -1,4 +1,5 @@
 import { FetchMoreProps } from "@saleor/types";
+import { mapEdgesToItems } from "@saleor/utils/maps";
 
 import { ResultSearchData } from "./makeTopLevelSearch";
 import { CommonSearchOpts } from "./types";
@@ -14,4 +15,4 @@ export const getSearchFetchMoreProps = (
 });
 
 export const getParsedSearchData = ({ data }: ResultSearchData) =>
-  data?.search?.edges?.map(({ node }) => node) || [];
+  mapEdgesToItems(data?.search);

src/navigation/views/MenuList/MenuList.tsx

@@ -11,6 +11,7 @@ import usePaginator, {
 } from "@saleor/hooks/usePaginator";
 import { buttonMessages, commonMessages } from "@saleor/intl";
 import { maybe } from "@saleor/misc";
+import { getById } from "@saleor/orders/components/OrderReturnPage/utils";
 import { ListViews } from "@saleor/types";
 import createSortHandler from "@saleor/utils/handlers/sortHandler";
 import { mapEdgesToItems } from "@saleor/utils/maps";
@@ -209,13 +210,10 @@ const MenuList: React.FC<MenuListProps> = ({ params }) => {
                         defaultMessage="Are you sure you want to delete {menuName}?"
                         id="menuListDeleteMenuContent"
                         values={{
-                          menuName: maybe(
+                          menuName:
-                            () =>
+                            mapEdgesToItems(data?.menus).find(
-                              data.menus.edges.find(
+                              getById(params.id)
-                                edge => edge.node.id === params.id
+                            )?.name || "..."
-                              ).node.name,
-                            "..."
-                          )
                         }}
                       />
                     </DialogContentText>

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

@@ -172,7 +172,7 @@ export const OrderDraftDetails: React.FC<OrderDraftDetailsProps> = ({
                 order: id
               })
             }
-            users={users?.data?.search?.edges?.map(edge => edge.node) || []}
+            users={mapEdgesToItems(users?.data?.search)}
             hasMore={users?.data?.search?.pageInfo?.hasNextPage || false}
             onFetchMore={loadMoreCustomers}
             fetchUsers={searchUsers}

src/pageTypes/views/PageTypeDetails.tsx

@@ -264,8 +264,8 @@ export const PageTypeDetails: React.FC<PageTypeDetailsProps> = ({
             deleteButtonState={deletePageTypeOpts.status}
           />
           <AssignAttributeDialog
-            attributes={result.data?.pageType.availableAttributes.edges.map(
+            attributes={mapEdgesToItems(
-              edge => edge.node
+              result?.data?.pageType?.availableAttributes
             )}
             confirmButtonState={assignAttributeOpts.status}
             errors={

src/pageTypes/views/PageTypeList/PageTypeList.tsx

@@ -19,6 +19,7 @@ import { usePageTypeBulkDeleteMutation } from "@saleor/pageTypes/mutations";
 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";
@@ -165,7 +166,7 @@ export const PageTypeList: React.FC<PageTypeListProps> = ({ params }) => {
     params
   });
 
-  const pageTypesData = data?.pageTypes?.edges.map(edge => edge.node) || [];
+  const pageTypesData = mapEdgesToItems(data?.pageTypes);
 
   return (
     <>
@@ -179,7 +180,7 @@ export const PageTypeList: React.FC<PageTypeListProps> = ({ params }) => {
         onTabSave={() => openModal("save-search")}
         tabs={tabs.map(tab => tab.name)}
         disabled={loading}
-        pageTypes={data?.pageTypes?.edges?.map(edge => edge.node)}
+        pageTypes={pageTypesData}
         pageInfo={pageInfo}
         onAdd={() => navigate(pageTypeAddUrl)}
         onBack={() => navigate(configurationMenuUrl)}

src/productTypes/views/ProductTypeList/ProductTypeList.tsx

@@ -159,8 +159,7 @@ export const ProductTypeList: React.FC<ProductTypeListProps> = ({ params }) => {
     params
   });
 
-  const productTypesData =
+  const productTypesData = mapEdgesToItems(data?.productTypes);
-    data?.productTypes?.edges.map(edge => edge.node) || [];
 
   return (
     <TypedProductTypeBulkDeleteMutation

src/productTypes/views/ProductTypeUpdate/index.tsx

@@ -346,10 +346,8 @@ export const ProductTypeUpdate: React.FC<ProductTypeUpdateProps> = ({
                     <>
                       {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

@@ -118,9 +118,7 @@ export const ProductCreateView: React.FC<ProductCreateProps> = ({ params }) => {
     skip: !selectedProductTypeId
   });
 
-  const productTypes = searchProductTypesOpts?.data?.search?.edges?.map(
+  const productTypes = mapEdgesToItems(searchProductTypesOpts?.data?.search);
-    edge => edge.node
-  );
 
   const { data: channelsData } = useChannelsList({});
   const allChannels: ChannelData[] = createSortedChannelsData(
@@ -281,12 +279,8 @@ export const ProductCreateView: React.FC<ProductCreateProps> = ({ params }) => {
       <ProductCreatePage
         allChannelsCount={allChannels?.length}
         currentChannels={currentChannels}
-        categories={(searchCategoryOpts?.data?.search?.edges || []).map(
+        categories={mapEdgesToItems(searchCategoryOpts?.data?.search)}
-          edge => edge.node
+        collections={mapEdgesToItems(searchCollectionOpts?.data?.search)}
-        )}
-        collections={(searchCollectionOpts?.data?.search?.edges || []).map(
-          edge => edge.node
-        )}
         loading={loading}
         channelsErrors={
           updateVariantChannelsOpts.data?.productVariantChannelListingUpdate

src/products/views/ProductList/ProductList.tsx

@@ -317,24 +317,17 @@ export const ProductList: React.FC<ProductListProps> = ({ params }) => {
 
   const filterOpts = getFilterOpts(
     params,
-    initialFilterAttributes?.attributes?.edges?.map(edge => edge.node) || [],
+    mapEdgesToItems(initialFilterAttributes?.attributes),
     {
-      initial:
+      initial: mapEdgesToItems(initialFilterCategories?.categories),
-        initialFilterCategories?.categories?.edges?.map(edge => edge.node) ||
-        [],
       search: searchCategories
     },
     {
-      initial:
+      initial: mapEdgesToItems(initialFilterCollections?.collections),
-        initialFilterCollections?.collections?.edges?.map(edge => edge.node) ||
-        [],
       search: searchCollections
     },
     {
-      initial:
+      initial: mapEdgesToItems(initialFilterProductTypes?.productTypes),
-        initialFilterProductTypes?.productTypes?.edges?.map(
-          edge => edge.node
-        ) || [],
       search: searchProductTypes
     }
   );
@@ -462,9 +455,7 @@ export const ProductList: React.FC<ProductListProps> = ({ params }) => {
         </DialogContentText>
       </ActionDialog>
       <ProductExportDialog
-        attributes={(searchAttributes.result.data?.search.edges || []).map(
+        attributes={mapEdgesToItems(searchAttributes?.result?.data?.search)}
-          edge => edge.node
-        )}
         hasMore={searchAttributes.result.data?.search.pageInfo.hasNextPage}
         loading={
           searchAttributes.result.loading ||

src/products/views/ProductUpdate/ProductUpdate.tsx

@@ -426,12 +426,10 @@ export const ProductUpdate: React.FC<ProductUpdateProps> = ({ id, params }) => {
     createProductMediaOpts.data?.productMediaCreate.errors
   );
 
-  const categories = (searchCategoriesOpts?.data?.search?.edges || []).map(
+  const categories = mapEdgesToItems(searchCategoriesOpts?.data?.search);
-    edge => edge.node
+
-  );
+  const collections = mapEdgesToItems(searchCollectionsOpts?.data?.search);
-  const collections = (searchCollectionsOpts?.data?.search?.edges || []).map(
+
-    edge => edge.node
-  );
   const errors = [
     ...(updateProductOpts.data?.productUpdate.errors || []),
     ...(updateSimpleProductOpts.data?.productUpdate.errors || []),

src/shipping/views/PriceRatesUpdate/PriceRatesUpdate.tsx

@@ -59,6 +59,7 @@ import {
 } from "@saleor/types/globalTypes";
 import createDialogActionHandlers from "@saleor/utils/handlers/dialogActionHandlers";
 import createMetadataUpdateHandler from "@saleor/utils/handlers/metadataUpdateHandler";
+import { mapEdgesToItems } from "@saleor/utils/maps";
 import {
   useMetadataUpdate,
   usePrivateMetadataUpdate
@@ -341,9 +342,9 @@ export const PriceRatesUpdate: React.FC<PriceRatesUpdateProps> = ({
         loading={productsSearchOpts.loading}
         open={params.action === "assign-product"}
         hasMore={productsSearchOpts.data?.search?.pageInfo.hasNextPage}
-        products={productsSearchOpts.data?.search?.edges
+        products={mapEdgesToItems(productsSearchOpts?.data?.search).filter(
-          .map(edge => edge.node)
+          suggestedProduct => suggestedProduct.id
-          .filter(suggestedProduct => suggestedProduct.id)}
+        )}
         onClose={closeModal}
         onFetch={productsSearch}
         onFetchMore={loadMore}

src/shipping/views/ShippingZonesList.tsx

@@ -14,6 +14,7 @@ import useShop from "@saleor/hooks/useShop";
 import useUser from "@saleor/hooks/useUser";
 import { commonMessages } from "@saleor/intl";
 import { getStringOrPlaceholder, maybe } from "@saleor/misc";
+import { getById } from "@saleor/orders/components/OrderReturnPage/utils";
 import { ListViews } from "@saleor/types";
 import createDialogActionHandlers from "@saleor/utils/handlers/dialogActionHandlers";
 import { mapEdgesToItems } from "@saleor/utils/maps";
@@ -184,13 +185,8 @@ export const ShippingZonesList: React.FC<ShippingZonesListProps> = ({
             values={{
               shippingZoneName: (
                 <strong>
-                  {maybe(
+                  {mapEdgesToItems(data?.shippingZones).find(getById(params.id))
-                    () =>
+                    ?.name || "..."}
-                      data.shippingZones.edges.find(
-                        edge => edge.node.id === params.id
-                      ).node.name,
-                    "..."
-                  )}
                 </strong>
               )
             }}

src/shipping/views/WeightRatesUpdate/WeightRatesUpdate.tsx

@@ -59,6 +59,7 @@ import {
 } from "@saleor/types/globalTypes";
 import createDialogActionHandlers from "@saleor/utils/handlers/dialogActionHandlers";
 import createMetadataUpdateHandler from "@saleor/utils/handlers/metadataUpdateHandler";
+import { mapEdgesToItems } from "@saleor/utils/maps";
 import {
   useMetadataUpdate,
   usePrivateMetadataUpdate
@@ -342,9 +343,9 @@ export const WeightRatesUpdate: React.FC<WeightRatesUpdateProps> = ({
         loading={productsSearchOpts.loading}
         open={params.action === "assign-product"}
         hasMore={productsSearchOpts.data?.search?.pageInfo.hasNextPage}
-        products={productsSearchOpts.data?.search?.edges
+        products={mapEdgesToItems(productsSearchOpts?.data?.search).filter(
-          .map(edge => edge.node)
+          suggestedProduct => suggestedProduct.id
-          .filter(suggestedProduct => suggestedProduct.id)}
+        )}
         onClose={closeModal}
         onFetch={productsSearch}
         onFetchMore={loadMore}

src/storybook/stories/categories/CategoryUpdatePage.tsx

@@ -1,7 +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 { mapEdgesToItems, mapNodeToChoice } from "@saleor/utils/maps";
 import { storiesOf } from "@storybook/react";
 import React from "react";
 
@@ -15,12 +15,7 @@ import Decorator from "../../Decorator";
 
 const category = categoryFixture(placeholderImage);
 
-const channelChoices = category.products.edges[0].node.channelListings.map(
+const channelChoices = mapNodeToChoice(mapEdgesToItems(category?.products));
-  listing => ({
-    label: listing.channel.name,
-    value: listing.channel.id
-  })
-);
 
 const updateProps: Omit<CategoryUpdatePageProps, "classes"> = {
   category,

src/translations/views/TranslationsEntities.tsx

@@ -3,6 +3,7 @@ import usePaginator, {
   createPaginationState
 } from "@saleor/hooks/usePaginator";
 import useShop from "@saleor/hooks/useShop";
+import { mapEdgesToItems } from "@saleor/utils/maps";
 import { stringify as stringifyQs } from "qs";
 import React from "react";
 
@@ -142,24 +143,22 @@ const TranslationsEntities: React.FC<TranslationsEntitiesProps> = ({
             return (
               <TranslationsEntitiesList
                 disabled={loading}
-                entities={data?.translations?.edges
+                entities={mapEdgesToItems(data?.translations).map(
-                  .map(edge => edge.node)
+                  node =>
-                  .map(
+                    node.__typename === "CategoryTranslatableContent" && {
-                    node =>
+                      completion: {
-                      node.__typename === "CategoryTranslatableContent" && {
+                        current: sumCompleted([
-                        completion: {
+                          node.translation?.description,
-                          current: sumCompleted([
+                          node.translation?.name,
-                            node.translation?.description,
+                          node.translation?.seoDescription,
-                            node.translation?.name,
+                          node.translation?.seoTitle
-                            node.translation?.seoDescription,
+                        ]),
-                            node.translation?.seoTitle
+                        max: 4
-                          ]),
+                      },
-                          max: 4
+                      id: node?.category?.id,
-                        },
+                      name: node?.category?.name
-                        id: node?.category?.id,
+                    }
-                        name: node?.category?.name
+                )}
-                      }
-                  )}
                 onRowClick={id =>
                   navigate(
                     languageEntityUrl(
@@ -187,24 +186,22 @@ const TranslationsEntities: React.FC<TranslationsEntitiesProps> = ({
             return (
               <TranslationsEntitiesList
                 disabled={loading}
-                entities={data?.translations?.edges
+                entities={mapEdgesToItems(data?.translations).map(
-                  .map(edge => edge.node)
+                  node =>
-                  .map(
+                    node.__typename === "ProductTranslatableContent" && {
-                    node =>
+                      completion: {
-                      node.__typename === "ProductTranslatableContent" && {
+                        current: sumCompleted([
-                        completion: {
+                          node.translation?.description,
-                          current: sumCompleted([
+                          node.translation?.name,
-                            node.translation?.description,
+                          node.translation?.seoDescription,
-                            node.translation?.name,
+                          node.translation?.seoTitle
-                            node.translation?.seoDescription,
+                        ]),
-                            node.translation?.seoTitle
+                        max: 4
-                          ]),
+                      },
-                          max: 4
+                      id: node?.product?.id,
-                        },
+                      name: node?.product?.name
-                        id: node?.product?.id,
+                    }
-                        name: node?.product?.name
+                )}
-                      }
-                  )}
                 onRowClick={id =>
                   navigate(
                     languageEntityUrl(
@@ -233,24 +230,22 @@ const TranslationsEntities: React.FC<TranslationsEntitiesProps> = ({
             return (
               <TranslationsEntitiesList
                 disabled={loading}
-                entities={data?.translations?.edges
+                entities={mapEdgesToItems(data?.translations).map(
-                  .map(edge => edge.node)
+                  node =>
-                  .map(
+                    node.__typename === "CollectionTranslatableContent" && {
-                    node =>
+                      completion: {
-                      node.__typename === "CollectionTranslatableContent" && {
+                        current: sumCompleted([
-                        completion: {
+                          node.translation?.description,
-                          current: sumCompleted([
+                          node.translation?.name,
-                            node.translation?.description,
+                          node.translation?.seoDescription,
-                            node.translation?.name,
+                          node.translation?.seoTitle
-                            node.translation?.seoDescription,
+                        ]),
-                            node.translation?.seoTitle
+                        max: 4
-                          ]),
+                      },
-                          max: 4
+                      id: node.collection.id,
-                        },
+                      name: node.collection.name
-                        id: node.collection.id,
+                    }
-                        name: node.collection.name
+                )}
-                      }
-                  )}
                 onRowClick={id =>
                   navigate(
                     languageEntityUrl(
@@ -279,19 +274,17 @@ const TranslationsEntities: React.FC<TranslationsEntitiesProps> = ({
             return (
               <TranslationsEntitiesList
                 disabled={loading}
-                entities={data?.translations?.edges
+                entities={mapEdgesToItems(data?.translations).map(
-                  .map(edge => edge.node)
+                  node =>
-                  .map(
+                    node.__typename === "SaleTranslatableContent" && {
-                    node =>
+                      completion: {
-                      node.__typename === "SaleTranslatableContent" && {
+                        current: sumCompleted([node.translation?.name]),
-                        completion: {
+                        max: 1
-                          current: sumCompleted([node.translation?.name]),
+                      },
-                          max: 1
+                      id: node.sale?.id,
-                        },
+                      name: node.sale?.name
-                        id: node.sale?.id,
+                    }
-                        name: node.sale?.name
+                )}
-                      }
-                  )}
                 onRowClick={id =>
                   navigate(
                     languageEntityUrl(language, TranslatableEntities.sales, id)
@@ -320,19 +313,17 @@ const TranslationsEntities: React.FC<TranslationsEntitiesProps> = ({
             return (
               <TranslationsEntitiesList
                 disabled={loading}
-                entities={data?.translations?.edges
+                entities={mapEdgesToItems(data?.translations).map(
-                  .map(edge => edge.node)
+                  node =>
-                  .map(
+                    node.__typename === "VoucherTranslatableContent" && {
-                    node =>
+                      completion: {
-                      node.__typename === "VoucherTranslatableContent" && {
+                        current: sumCompleted([node.translation?.name]),
-                        completion: {
+                        max: 1
-                          current: sumCompleted([node.translation?.name]),
+                      },
-                          max: 1
+                      id: node.voucher?.id,
-                        },
+                      name: node.voucher?.name || "-"
-                        id: node.voucher?.id,
+                    }
-                        name: node.voucher?.name || "-"
+                )}
-                      }
-                  )}
                 onRowClick={id =>
                   navigate(
                     languageEntityUrl(
@@ -361,24 +352,22 @@ const TranslationsEntities: React.FC<TranslationsEntitiesProps> = ({
             return (
               <TranslationsEntitiesList
                 disabled={loading}
-                entities={data?.translations?.edges
+                entities={mapEdgesToItems(data?.translations).map(
-                  .map(edge => edge.node)
+                  node =>
-                  .map(
+                    node.__typename === "PageTranslatableContent" && {
-                    node =>
+                      completion: {
-                      node.__typename === "PageTranslatableContent" && {
+                        current: sumCompleted([
-                        completion: {
+                          node.translation?.content,
-                          current: sumCompleted([
+                          node.translation?.seoDescription,
-                            node.translation?.content,
+                          node.translation?.seoTitle,
-                            node.translation?.seoDescription,
+                          node.translation?.title
-                            node.translation?.seoTitle,
+                        ]),
-                            node.translation?.title
+                        max: 4
-                          ]),
+                      },
-                          max: 4
+                      id: node?.page.id,
-                        },
+                      name: node?.page.title
-                        id: node?.page.id,
+                    }
-                        name: node?.page.title
+                )}
-                      }
-                  )}
                 onRowClick={id =>
                   navigate(
                     languageEntityUrl(language, TranslatableEntities.pages, id)
@@ -402,26 +391,24 @@ const TranslationsEntities: React.FC<TranslationsEntitiesProps> = ({
             return (
               <TranslationsEntitiesList
                 disabled={loading}
-                entities={data?.translations?.edges
+                entities={mapEdgesToItems(data?.translations).map(
-                  .map(edge => edge.node)
+                  node =>
-                  .map(
+                    node.__typename === "AttributeTranslatableContent" && {
-                    node =>
+                      completion: {
-                      node.__typename === "AttributeTranslatableContent" && {
+                        current: sumCompleted([
-                        completion: {
+                          node.translation?.name,
-                          current: sumCompleted([
+                          ...(node.attribute?.values.map(
-                            node.translation?.name,
+                            attr => attr.translation?.name
-                            ...(node.attribute?.values.map(
+                          ) || [])
-                              attr => attr.translation?.name
+                        ]),
-                            ) || [])
+                        max: node.attribute
-                          ]),
+                          ? node.attribute.values.length + 1
-                          max: node.attribute
+                          : 0
-                            ? node.attribute.values.length + 1
+                      },
-                            : 0
+                      id: node?.attribute.id,
-                        },
+                      name: node?.attribute.name
-                        id: node?.attribute.id,
+                    }
-                        name: node?.attribute.name
+                )}
-                      }
-                  )}
                 onRowClick={id =>
                   navigate(
                     languageEntityUrl(
@@ -449,23 +436,20 @@ const TranslationsEntities: React.FC<TranslationsEntitiesProps> = ({
             return (
               <TranslationsEntitiesList
                 disabled={loading}
-                entities={data?.translations?.edges
+                entities={mapEdgesToItems(data?.translations).map(
-                  .map(edge => edge.node)
+                  node =>
-                  .map(
+                    node.__typename === "ShippingMethodTranslatableContent" && {
-                    node =>
+                      completion: {
-                      node.__typename ===
+                        current: sumCompleted([
-                        "ShippingMethodTranslatableContent" && {
+                          node.translation?.name,
-                        completion: {
+                          node.translation?.description
-                          current: sumCompleted([
+                        ]),
-                            node.translation?.name,
+                        max: 2
-                            node.translation?.description
+                      },
-                          ]),
+                      id: node?.shippingMethod.id,
-                          max: 2
+                      name: node?.name
-                        },
+                    }
-                        id: node?.shippingMethod.id,
+                )}
-                        name: node?.name
-                      }
-                  )}
                 onRowClick={id =>
                   navigate(
                     languageEntityUrl(

src/warehouses/components/WarehouseList/WarehouseList.tsx

@@ -14,6 +14,7 @@ import { WarehouseWithShippingFragment } from "@saleor/fragments/types/Warehouse
 import { maybe, renderCollection, stopPropagation } from "@saleor/misc";
 import { makeStyles } from "@saleor/theme";
 import { ListProps, SortPage } from "@saleor/types";
+import { mapEdgesToItems } from "@saleor/utils/maps";
 import { getArrowDirection } from "@saleor/utils/sort";
 import { WarehouseListUrlSortField } from "@saleor/warehouses/urls";
 import React from "react";
@@ -137,13 +138,9 @@ const WarehouseList: React.FC<WarehouseListProps> = props => {
                 {maybe<React.ReactNode>(() => warehouse.name, <Skeleton />)}
               </TableCell>
               <TableCell className={classes.colZones} data-test="zones">
-                {maybe<React.ReactNode>(
+                {mapEdgesToItems(warehouse?.shippingZones)
-                  () =>
+                  .map(({ name }) => name)
-                    warehouse.shippingZones.edges
+                  .join(", ") || <Skeleton />}
-                      .map(edge => edge.node.name)
-                      .join(", "),
-                  <Skeleton />
-                )}
               </TableCell>
               <TableCell className={classes.colActions}>
                 <div className={classes.actions}>

src/warehouses/views/WarehouseList/WarehouseList.tsx

@@ -13,6 +13,7 @@ import usePaginator, {
 } from "@saleor/hooks/usePaginator";
 import { commonMessages, sectionNames } from "@saleor/intl";
 import { getMutationStatus, maybe } from "@saleor/misc";
+import { getById } from "@saleor/orders/components/OrderReturnPage/utils";
 import { ListViews } from "@saleor/types";
 import createDialogActionHandlers from "@saleor/utils/handlers/dialogActionHandlers";
 import createFilterHandlers from "@saleor/utils/handlers/filterHandlers";
@@ -166,11 +167,7 @@ const WarehouseList: React.FC<WarehouseListProps> = ({ params }) => {
       />
       <WarehouseDeleteDialog
         confirmButtonState={deleteTransitionState}
-        name={maybe(
+        name={mapEdgesToItems(data?.warehouses).find(getById(params.id))?.name}
-          () =>
-            data.warehouses.edges.find(edge => edge.node.id === params.id).node
-              .name
-        )}
         open={params.action === "delete"}
         onClose={closeModal}
         onConfirm={() =>