feat(saleor): Phase 1 - GraphQL Client Setup

- Add Apollo Client for Saleor GraphQL API
- Create GraphQL fragments (Product, Variant, Checkout)
- Create GraphQL queries (Products, Checkout)
- Create GraphQL mutations (Checkout operations)
- Add TypeScript types for Saleor entities
- Add product helper functions
- Install @apollo/client and graphql dependencies

Part of WordPress/WooCommerce → Saleor migration

src/lib/saleor/fragments/Checkout.ts

@@ -0,0 +1,74 @@
+import { gql } from "@apollo/client";
+import { CHECKOUT_LINE_FRAGMENT } from "./Variant";
+
+export const ADDRESS_FRAGMENT = gql`
+  fragment AddressFragment on Address {
+    id
+    firstName
+    lastName
+    companyName
+    streetAddress1
+    streetAddress2
+    city
+    postalCode
+    country {
+      code
+      country
+    }
+    countryArea
+    phone
+    isDefaultBillingAddress
+    isDefaultShippingAddress
+  }
+`;
+
+export const CHECKOUT_FRAGMENT = gql`
+  fragment CheckoutFragment on Checkout {
+    id
+    token
+    email
+    isShippingRequired
+    lines {
+      ...CheckoutLineFragment
+    }
+    shippingPrice {
+      gross {
+        amount
+        currency
+      }
+    }
+    subtotalPrice {
+      gross {
+        amount
+        currency
+      }
+    }
+    totalPrice {
+      gross {
+        amount
+        currency
+      }
+    }
+    shippingAddress {
+      ...AddressFragment
+    }
+    billingAddress {
+      ...AddressFragment
+    }
+    shippingMethods {
+      id
+      name
+      price {
+        amount
+        currency
+      }
+    }
+    availablePaymentGateways {
+      id
+      name
+    }
+    note
+  }
+  ${CHECKOUT_LINE_FRAGMENT}
+  ${ADDRESS_FRAGMENT}
+`;

src/lib/saleor/fragments/Product.ts

@@ -0,0 +1,81 @@
+import { gql } from "@apollo/client";
+import { PRODUCT_VARIANT_FRAGMENT } from "./Variant";
+
+export const PRODUCT_FRAGMENT = gql`
+  fragment ProductFragment on Product {
+    id
+    name
+    slug
+    description
+    seoTitle
+    seoDescription
+    translation(languageCode: $locale) {
+      id
+      name
+      slug
+      description
+      seoTitle
+      seoDescription
+    }
+    variants {
+      ...ProductVariantFragment
+    }
+    media {
+      id
+      url
+      alt
+      type
+    }
+    category {
+      id
+      name
+      slug
+    }
+    metadata {
+      key
+      value
+    }
+  }
+  ${PRODUCT_VARIANT_FRAGMENT}
+`;
+
+export const PRODUCT_LIST_ITEM_FRAGMENT = gql`
+  fragment ProductListItemFragment on Product {
+    id
+    name
+    slug
+    description
+    translation(languageCode: $locale) {
+      id
+      name
+      slug
+      description
+    }
+    variants {
+      id
+      name
+      sku
+      quantityAvailable
+      pricing {
+        price {
+          gross {
+            amount
+            currency
+          }
+        }
+        onSale
+        discount {
+          gross {
+            amount
+            currency
+          }
+        }
+      }
+    }
+    media {
+      id
+      url
+      alt
+    }
+  }
+`;

src/lib/saleor/fragments/Variant.ts

@@ -0,0 +1,84 @@
+import { gql } from "@apollo/client";
+
+export const PRODUCT_VARIANT_FRAGMENT = gql`
+  fragment ProductVariantFragment on ProductVariant {
+    id
+    name
+    sku
+    quantityAvailable
+    weight {
+      value
+      unit
+    }
+    media {
+      id
+      url
+      alt
+    }
+    pricing {
+      price {
+        gross {
+          amount
+          currency
+        }
+        net {
+          amount
+          currency
+        }
+      }
+      onSale
+      discount {
+        gross {
+          amount
+          currency
+        }
+      }
+    }
+    attributes {
+      attribute {
+        name
+        slug
+      }
+      values {
+        name
+        slug
+      }
+    }
+  }
+`;
+
+export const CHECKOUT_LINE_FRAGMENT = gql`
+  fragment CheckoutLineFragment on CheckoutLine {
+    id
+    quantity
+    totalPrice {
+      gross {
+        amount
+        currency
+      }
+    }
+    variant {
+      id
+      name
+      sku
+      product {
+        id
+        name
+        slug
+        media {
+          id
+          url
+          alt
+        }
+      }
+      pricing {
+        price {
+          gross {
+            amount
+            currency
+          }
+        }
+      }
+    }
+  }
+`;