chore(GCOM-1476): Optimize fragments to type data more easily in TypeScript

.changeset/kind-chicken-roll.md

@@ -0,0 +1,10 @@
+---
+'@graphcommerce/magento-product-grouped': patch
+'@graphcommerce/magento-cart-pickup': patch
+'@graphcommerce/magento-cart-items': patch
+'@graphcommerce/magento-graphcms': patch
+'@graphcommerce/magento-product': patch
+'@graphcommerce/magento-cart': patch
+---
+
+Create individual fragments for values with children to enhance readability and simplify type checking.

examples/magento-graphcms/components/ProductListLayout/types.tsx

@@ -1,4 +1,4 @@
-import { MenuQueryFragment } from '@graphcommerce/magento-category'
+import { MenuQueryFragment, CategoryItemFragment } from '@graphcommerce/magento-category'
 import {
   CategoryDefaultFragment,
   FilterTypes,
@@ -7,7 +7,6 @@ import {
   ProductListQuery,
   useProductList,
 } from '@graphcommerce/magento-product'
-import { CategoryPageQuery } from '../../graphql/CategoryPage.gql'
 
 type BaseProps = MenuQueryFragment &
   ProductListQuery &
@@ -25,8 +24,7 @@ type SearchLayoutProps = {
 type CategoryLayoutProps = {
   id: string
   title: string
-  category: CategoryDefaultFragment &
-    NonNullable<NonNullable<CategoryPageQuery['categories']>['items']>[number]
+  category: CategoryDefaultFragment & CategoryItemFragment
 }
 
 type ProductListProps = ReturnType<typeof useProductList<BaseProps>>

examples/magento-graphcms/components/ProductView/AddProductsToCartView.tsx

@@ -13,10 +13,10 @@ import { DownloadableProductOptions } from '@graphcommerce/magento-product-downl
 import { GroupedProducts } from '@graphcommerce/magento-product-grouped'
 import { isTypename } from '@graphcommerce/next-ui'
 import { Divider, Typography } from '@mui/material'
-import { ProductPage2Query } from '../../graphql/ProductPage2.gql'
+import { ProductPage2ItemFragment } from '../../graphql/ProductPage2Item.gql'
 
 export type AddProductsToCartViewProps = {
-  product: NonNullable<NonNullable<NonNullable<ProductPage2Query['products']>['items']>[number]>
+  product: ProductPage2ItemFragment
 }
 
 export function AddProductsToCartView(props: AddProductsToCartViewProps) {

examples/magento-graphcms/graphql/ProductPage2.graphql

@@ -8,15 +8,7 @@ query ProductPage2(
   products(filter: { url_key: { eq: $urlKey } }) @inContext(context: $context) {
     ...ProductSpecs
     items {
-      __typename
-      uid
-      ...ProductCustomizable
-      ...ProductWeight
-      ...ProductPageItem
-      ...ConfigurableOptions
-      ...DownloadableProductOptions
-      ...BundleProductOptions
-      ...GroupedProduct
+      ...ProductPage2Item
     }
   }
   # Workaround for https://github.com/magento/magento2/issues/32427

examples/magento-graphcms/graphql/ProductPage2Item.graphql

@@ -0,0 +1,11 @@
+fragment ProductPage2Item on ProductInterface {
+  __typename
+  uid
+  ...ProductPageItem
+  ...ProductCustomizable
+  ...ProductWeight
+  ...ConfigurableOptions
+  ...DownloadableProductOptions
+  ...BundleProductOptions
+  ...GroupedProduct
+}

examples/magento-graphcms/pages/checkout/terms/[url].tsx

@@ -1,13 +1,13 @@
 import { PageOptions } from '@graphcommerce/framer-next-pages'
-import { CartAgreementsDocument, CartAgreementsQuery } from '@graphcommerce/magento-cart'
+import { CartAgreementFragment, CartAgreementsDocument } from '@graphcommerce/magento-cart'
 import { StoreConfigDocument } from '@graphcommerce/magento-store'
 import { GetStaticProps, PageMeta, LayoutOverlayHeader, LayoutTitle } from '@graphcommerce/next-ui'
 import { Container, Typography } from '@mui/material'
 import { GetStaticPaths } from 'next'
 import { LayoutOverlay, LayoutOverlayProps } from '../../../components'
 import { graphqlSsrClient, graphqlSharedClient } from '../../../lib/graphql/graphqlSsrClient'
 
-type Props = { agreement: NonNullable<NonNullable<CartAgreementsQuery['checkoutAgreements']>[0]> }
+type Props = { agreement: CartAgreementFragment }
 type RouteProps = { url: string }
 type GetPageStaticPaths = GetStaticPaths<RouteProps>
 type GetPageStaticProps = GetStaticProps<LayoutOverlayProps, Props>

packages/magento-cart-items/Api/CartItems.graphql

@@ -1,8 +1,6 @@
 fragment CartItems on Cart {
   id
   items {
-    uid
-    __typename
     ...CartItem
   }
 }

packages/magento-cart-items/components/CartItems/CartItems.tsx

@@ -1,8 +1,9 @@
 import { RenderType, TypeRenderer } from '@graphcommerce/next-ui'
 import { Box } from '@mui/material'
+import { CartItemFragment } from '../../Api/CartItem.gql'
 import { CartItemsFragment } from '../../Api/CartItems.gql'
 
-export type CartItemRenderer = TypeRenderer<NonNullable<NonNullable<CartItemsFragment['items']>[0]>>
+export type CartItemRenderer = TypeRenderer<CartItemFragment>
 
 export type CartProps = { renderer: CartItemRenderer } & CartItemsFragment
 

packages/magento-cart-pickup/components/PickupLocationActionCard.tsx

@@ -1,11 +1,9 @@
 import { ActionCard, ActionCardItemRenderProps } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/react'
 import { Box, Button } from '@mui/material'
-import { GetPickupLocationsForProductsQuery } from '../graphql/GetPickupLocationsForProducts.gql'
+import { PickupLocationItemFragment } from '../graphql/PickupLocationItem.gql'
 
-export type Location = NonNullable<
-  NonNullable<NonNullable<GetPickupLocationsForProductsQuery['pickupLocations']>['items']>[number]
->
+export type Location = PickupLocationItemFragment
 
 export function PickupLocationActionCard(props: ActionCardItemRenderProps<Location>) {
   const { onReset, name, contact_name, street, postcode, city, description, ...cardProps } = props

packages/magento-cart-pickup/graphql/GetPickupLocationsForProducts.graphql

@@ -12,21 +12,7 @@ query GetPickupLocationsForProducts(
     currentPage: $currentPage
   ) {
     items {
-      city
-      pickup_location_code
-      contact_name
-      country_id
-      description
-      email
-      fax
-      latitude
-      longitude
-      name
-      phone
-      postcode
-      region
-      region_id
-      street
+      ...PickupLocationItem
     }
   }
 }

packages/magento-cart-pickup/graphql/PickupLocationItem.graphql

@@ -0,0 +1,17 @@
+fragment PickupLocationItem on PickupLocation {
+  city
+  pickup_location_code
+  contact_name
+  country_id
+  description
+  email
+  fax
+  latitude
+  longitude
+  name
+  phone
+  postcode
+  region
+  region_id
+  street
+}

packages/magento-cart/components/CartAgreementsForm/CartAgreement.graphql

@@ -0,0 +1,9 @@
+fragment CartAgreement on CheckoutAgreement {
+  agreement_id
+  checkbox_text
+  content
+  content_height
+  is_html
+  mode
+  name
+}

packages/magento-cart/components/CartAgreementsForm/CartAgreements.graphql

@@ -1,11 +1,5 @@
 query CartAgreements {
   checkoutAgreements {
-    agreement_id
-    checkbox_text
-    content
-    content_height
-    is_html
-    mode
-    name
+    ...CartAgreement
   }
 }

packages/magento-cart/components/index.ts

@@ -2,6 +2,7 @@ export * from './ApolloCartError'
 export * from './CartAdded'
 export * from './CartAddressMultiLine/CartAddressMultiLine'
 export * from './CartAddressSingleLine/CartAddressSingleLine'
+export * from './CartAgreementsForm/CartAgreement.gql'
 export * from './CartAgreementsForm/CartAgreements.gql'
 export * from './CartAgreementsForm/CartAgreementsForm'
 export * from './CartFab/CartFab'

packages/magento-category/index.ts

@@ -10,7 +10,9 @@ export * from './utils/magentoMenuToNavigation'
 export * from './utils/findParentBreadcrumbItem'
 export * from './queries/getCategoryStaticPaths'
 export * from './components/CategoryBreadcrumb'
+export * from './queries/CategoryItem.gql'
 export * from './queries/CategoryQueryFragment.gql'
 export * from './queries/MenuQueryFragment.gql'
+export * from './queries/MenuQueryCategoryItem.gql'
 export * from './queries/NavigationItem.gql'
 export * from './utils/useCategoryTree'

packages/magento-category/queries/CategoryItem.graphql

@@ -0,0 +1,9 @@
+fragment CategoryItem on CategoryTree {
+  uid
+  ...CategoryDefault
+  ...CategoryBreadcrumb
+  ...CategoryDescription
+  ...CategoryChildren
+  ...CategoryMeta
+  ...CategoryHeroNav
+}

packages/magento-category/queries/CategoryQueryFragment.graphql

@@ -1,13 +1,7 @@
 fragment CategoryQueryFragment on Query {
   categories(filters: { url_path: { eq: $url } }) {
     items {
-      uid
-      ...CategoryDefault
-      ...CategoryBreadcrumb
-      ...CategoryDescription
-      ...CategoryChildren
-      ...CategoryMeta
-      ...CategoryHeroNav
+      ...CategoryItem
     }
   }
 }

packages/magento-category/queries/MenuQueryCategoryItem.graphql

@@ -0,0 +1,16 @@
+fragment MenuQueryCategoryItem on CategoryTree {
+  uid
+  ...NavigationItem
+  children {
+    uid
+    ...NavigationItem
+    children {
+      uid
+      ...NavigationItem
+      children {
+        uid
+        ...NavigationItem
+      }
+    }
+  }
+}

packages/magento-category/queries/MenuQueryFragment.graphql

@@ -1,20 +1,7 @@
 fragment MenuQueryFragment on Query {
   menu: categories {
     items {
-      uid
-      ...NavigationItem
-      children {
-        uid
-        ...NavigationItem
-        children {
-          uid
-          ...NavigationItem
-          children {
-            uid
-            ...NavigationItem
-          }
-        }
-      }
+      ...MenuQueryCategoryItem
     }
   }
 }

packages/magento-category/utils/magentoMenuToNavigation.tsx

@@ -6,15 +6,14 @@ import {
   nonNullable,
 } from '@graphcommerce/next-ui'
 import { i18n } from '@lingui/core'
+import { MenuQueryCategoryItemFragment } from '../queries/MenuQueryCategoryItem.gql'
 import { MenuQueryFragment } from '../queries/MenuQueryFragment.gql'
 import { NavigationItemFragment } from '../queries/NavigationItem.gql'
 
-type Item = NonNullable<NonNullable<NonNullable<MenuQueryFragment['menu']>['items']>[0]>
-
 export type MagentoNavigationItemProps = NavigationItemFragment
 
 function categoryToNav(
-  props: Item | null | undefined,
+  props: MenuQueryCategoryItemFragment | null | undefined,
   Component?: React.ComponentType<MagentoNavigationItemProps>,
 ): NavigationNode | undefined {
   if (!props) return undefined

packages/magento-product-grouped/GroupedProduct.graphql

@@ -1,4 +1,6 @@
 fragment GroupedProduct on GroupedProduct {
+  __typename
+  uid
   items {
     position
     qty

packages/magento-product-grouped/GroupedProducts/GroupedProducts.tsx

@@ -1,10 +1,10 @@
 import { ActionCardLayout, filterNonNullableKeys } from '@graphcommerce/next-ui'
 import { useMemo } from 'react'
-import { ProductPageGroupedQueryFragment } from '../ProductPageGroupedQueryFragment.gql'
+import { GroupedProductFragment } from '../GroupedProduct.gql'
 import { GroupedProductActionCard } from './GroupedProductActionCard'
 
 type GroupedProductsProps = {
-  product: NonNullable<NonNullable<ProductPageGroupedQueryFragment['typeProducts']>['items']>[0]
+  product: GroupedProductFragment
 }
 
 export function GroupedProducts(props: GroupedProductsProps) {

packages/magento-product-grouped/ProductPageGroupedQueryFragment.graphql

@@ -1,8 +1,6 @@
 fragment ProductPageGroupedQueryFragment on Query {
   typeProducts: products(filter: { url_key: { eq: $urlKey } }) {
     items {
-      __typename
-      uid
       ...GroupedProduct
     }
   }

packages/magento-product/components/ProductCustomizable/CustomizableAreaOption.tsx

@@ -6,10 +6,10 @@ import { i18n } from '@lingui/core'
 import { Box } from '@mui/material'
 import React from 'react'
 import { useFormAddProductsToCart } from '../AddProductsToCart'
-import { ProductCustomizableFragment } from './ProductCustomizable.gql'
+import { CustomizableOptionFragment } from './CustomizableOption.gql'
 
 export type OptionTypeRenderer = TypeRenderer<
-  NonNullable<NonNullable<ProductCustomizableFragment['options']>[number]> & {
+  CustomizableOptionFragment & {
     optionIndex: number
     index: number
     currency: CurrencyEnum

packages/magento-product/components/ProductCustomizable/CustomizableOption.graphql

@@ -1,6 +1,15 @@
 fragment CustomizableOption on CustomizableOptionInterface {
+  __typename
   uid
   required
   sort_order
   title
+  ...CustomizableAreaOption
+  ...CustomizableCheckboxOption
+  ...CustomizableDateOption
+  ...CustomizableDropDownOption
+  ...CustomizableMultipleOption
+  ...CustomizableFieldOption
+  ...CustomizableFileOption
+  ...CustomizableRadioOption
 }

packages/magento-product/components/ProductCustomizable/ProductCustomizable.graphql

@@ -1,15 +1,5 @@
 fragment ProductCustomizable on CustomizableProductInterface {
   options {
-    uid
-    __typename
     ...CustomizableOption
-    ...CustomizableAreaOption
-    ...CustomizableCheckboxOption
-    ...CustomizableDateOption
-    ...CustomizableDropDownOption
-    ...CustomizableMultipleOption
-    ...CustomizableFieldOption
-    ...CustomizableFileOption
-    ...CustomizableRadioOption
   }
 }

packages/magento-product/components/ProductFiltersPro/ProductFiltersProAggregations.tsx

@@ -1,5 +1,5 @@
 import { AttributeFrontendInputEnum } from '@graphcommerce/graphql-mesh'
-import { ProductListFiltersFragment } from '../ProductListFilters/ProductListFilters.gql'
+import { ProductListAggregationFragment } from '../ProductListFilters'
 import { ProductFilterEqualChip } from './ProductFilterEqualChip'
 import { ProductFilterEqualSection } from './ProductFilterEqualSection'
 import { ProductFilterRangeChip } from './ProductFilterRangeChip'
@@ -9,7 +9,7 @@ import { excludeCategory } from './activeAggregations'
 import { applyAggregationCount } from './applyAggregationCount'
 
 export type FilterProps = {
-  aggregation: NonNullable<NonNullable<ProductListFiltersFragment['aggregations']>[number]>
+  aggregation: ProductListAggregationFragment
 }
 
 export type FilterRenderer = Record<AttributeFrontendInputEnum, React.FC<FilterProps>>

packages/magento-product/components/ProductListFilters/ProductListAggregation.graphql

@@ -0,0 +1,12 @@
+fragment ProductListAggregation on Aggregation {
+  __typename
+  label
+  attribute_code
+  count
+  options {
+    __typename
+    label
+    value
+    count
+  }
+}