GraphCommerce Documentation

The @graphcommerce/magento-wishlist package provides the following capabilities:

• Guest Support: Visitors can manage a wishlist without needing an account.
• Automatic Migration: When a guest logs in, their wishlist items are automatically migrated from the guest session to their account.
• SKU-based Adding: Products can be added to the wishlist using their SKU across all product types.
• Variant Support: For configurable products, specific variants (e.g., size and color) can be added to the wishlist.
• Cart Integration: Users can add products directly from their wishlist to the cart (supports simple and virtual products).

Use the @graphcommerce/magento-compare package to integrate Magento's product comparison feature into your GraphCommerce storefront. This package allows users to compare products based on the data provided by your Magento backend.

To enable this functionality, you must configure the required settings in your graphcommerce.config.js file according to the schema defined in Config.graphqls.

This plugin brings Relay-style optimization benefits to GraphQL Codegen. Key features include:

Query Optimization

Reduces query size through several transformations:

• Inline Fragments: Optimizes fragment usage.
• Flatten Transform: Flattens transformations to simplify query structure.
• Skip Redundant Node Transform: Removes unnecessary node transformations.

Fragment Arguments

Supports Relay-specific argument handling:

• @argumentsDefinition
• @arguments

The @graphcommerce/googleanalytics package provides an easy way to integrate Google Analytics 4 (GA4) into a GraphCommerce webshop. It automatically tracks standard e-commerce events including:

• add_payment_info
• purchase
• add_shipping_info
• add_to_cart (also triggered on quantity updates)
• begin_checkout
• select_item
• view_item_list
• view_item
• view_cart
• remove_from_cart

The magento-graphql-rest package allows you to integrate Magento's REST API into your GraphCommerce Mesh Service. This enables you to expose Magento REST endpoints as part of your unified GraphQL schema.

Current Implementation Status: Currently, only the GET:/customers/me endpoint is implemented. Future endpoints can be added to extend the service's capabilities.

GraphCommerce is built on a modern web stack designed for high-performance e-commerce. Key technologies include:

• React & Next.js: The core UI and routing framework.
• MUI Core: Used for building robust, high-quality UI components.
• TypeScript: Provides type safety and improves developer productivity. Setting up VSCode correctly is recommended to enable autocomplete for the codebase.
• GraphQL: The primary query language used for fetching and modifying data (e.g., from Magento).
• GraphQL Code Generator: Automatically generates TypeScript types from your GraphQL schema to simplify query usage in components.
• Apollo Client: Handles data fetching, caching, and state management.
• Framer Motion: Powers fluid, interactive animations while maintaining performance.

The @graphcommerce/image package is designed to provide image optimization that exceeds the capabilities of next/image. Its primary objectives are:

• Direct Image Rendering: It provides only the image element itself, avoiding unnecessary wrapping <div> elements that can interfere with standard image behavior and layout.
• next/image Compatibility: It supports the standard layout properties found in next/image.
• Advanced Optimization: It implements specific strategies for different device pixel densities (DPI) to balance visual fidelity and performance.

GraphCommerce is designed for high customizability. Most files in the project directory are intended to be modified for your specific project needs. Key directories and files include:

• graphcommerce.config.js: Main GraphCommerce configuration.
• components/: A collection of components intended for modification.
• components/Layout/: Contains core layout elements like the header, navigation, and footer.
• pages/: Boilerplate pages that handle URL routing via Next.js.
• components/theme.ts: Defines global styles, colors, and typography.
• locales/: Auto-generated files for interface translations.
• plugins/: Directory for housing custom plugins.
• next.config.js: Next.js specific configuration.

The magento-cart-checkout package provides the default implementation of the GraphCommerce checkout process specifically designed for Magento integrations. It includes pre-built logic and UI flows for the following stages of the customer journey:

• All Pages: Core checkout logic and shared components.
• Cart Page: Managing items, quantities, and totals before proceeding to checkout.
• Shipping Page: Collecting and validating shipping addresses and methods.
• Payment Page: Selecting and processing payment methods.
• Success Page: Displaying order confirmation and details after a successful transaction.

GraphCommerce is a full-featured, component-based frontend that runs on Magento's GraphQL API without requiring modifications to the backend. Key features include:

• Performance: Optimized for high PWA PageSpeed metrics (70-100+) and utilizes Hybrid Static Site Generation (SSG).
• Composable Commerce: Ability to fetch data from multiple sources (e.g., Magento and Hygraph).
• SEO & Internationalization: Fully SEO-optimized and supports multilingual Magento multi-store configurations.
• Extensibility: Easy to extend, modify, and theme via plugins and custom components.
• Architecture: Operates as a separate application from the Magento backend, allowing for independent deployment.

The @graphcommerce/algolia-recommend package provides the Algolia Recommend API client and mesh resolvers for integrating Algolia's recommendation engine into your GraphCommerce project.

To use this package effectively, you must ensure that your Algolia recommendations are built before attempting to query them.

For detailed information on the available GraphQL queries and mutations, refer to the following schema files in the package:

• Config.graphqls: Contains configuration details.
• schema/AlgoliaRecommendations.graphqls: Contains the schema extensions specifically for Algolia recommendations.

Preview mode is an implementation of Next.js preview functionality within GraphCommerce. It is designed to let developers and content editors see real-time updates from headless CMSs (like Hygraph) and e-commerce engines (like Magento) without waiting for cache invalidation or publication cycles.

Key behaviors:

• Bypasses Caches: It ignores caches from Next.js, Magento, and Hygraph to show direct changes.
• Content Stages: It allows viewing Hygraph content in the DRAFT stage or other configured stages.
• Page Revalidation: It provides mechanisms to Revalidate or Regenerate a page to ensure the view is current.