GraphCommerce offers a magento-graphcms example that provides an approachable path to building GraphCommerce custom Magento e-commerce storefront. This guide describes what's included in the magento-graphcms example and how you can begin exploring it.
Most of the files that you'll work on within your GraphCommerce project are located in the /components or /pages directories.
File structure of the graphcommerce-magento example
├── components
└── Layout
└── Footer.tsx
└── LayoutFull.tsx
└── GraphCMS
└── Asset
└── RowHeroBanner
└── RowQuote
└── theme.ts
└── ...
├── graphql
└── CategoryPage.graphql
└── PageLink.graphql
└── ...
├── pages
└── product
└── [url].jsx
└── ...
└── page
└── [...url].jsx
└── [...url].tsx
└── [cart].tsx
└── _app.tsx
└── _document.tsx
└── ...
├── locales
└── en.po
└── nl.po
└── ...
The GraphCommerce magento-graphcms example provides a series of components that you can use as a starting point for development. These components query the Magento GraphQL API for efficient data-fetching. Most components have a .graphql file that contains the GraphQL query fragment.
By default, the components that you would most likely modify are located in the
/components
directory. You can directly modify these components and customize
styles.
Others components are imported where needed, and can be recognized by their
namespace @graphcommerce/
. There are different ways to
customize styles ↗ of
importend components. The most common way is by adding an sx prop:
sx={{color:'red'}}
.
If you want to extend a component's behavior or built your own, you can
duplicate a @graphcommerce/
component to your /components directory. You'll
need to update all imports with the new location of your local component. This
also applies if you want to modify a component's or
page's query.
Local | ||
---|---|---|
/Asset | Source | [Documentation] |
/Blog | Source | [Documentation] |
/Layout | Source | [Documentation] |
/ProductListItems | Source | [Documentation] |
/Usps | Source | [Documentation] |
Packages (/node_modules directory/) | |
---|---|
@graphcommerce/address-fields-nl | Source |
@graphcommerce/cli | Source |
@graphcommerce/framer-next-pages | Source |
@graphcommerce/googleanalytics | Source |
@graphcommerce/googlerecaptcha | Source |
@graphcommerce/googletagmanager | Source |
@graphcommerce/graphcms-ui | Source |
@graphcommerce/graphql | Source |
@graphcommerce/graphql-mesh | Source |
@graphcommerce/image | Source |
@graphcommerce/lingui-next | Source |
@graphcommerce/magento-cart | Source |
@graphcommerce/magento-cart-billing-address | Source |
@graphcommerce/magento-cart-checkout | Source |
@graphcommerce/magento-cart-coupon | Source |
@graphcommerce/magento-cart-email | Source |
@graphcommerce/magento-cart-items | Source |
@graphcommerce/magento-cart-payment-method | Source |
@graphcommerce/magento-cart-shipping-address | Source |
@graphcommerce/magento-cart-shipping-method | Source |
@graphcommerce/magento-category | Source |
@graphcommerce/magento-cms | Source |
@graphcommerce/magento-customer | Source |
@graphcommerce/magento-customer-account | Source |
@graphcommerce/magento-customer-order | Source |
@graphcommerce/magento-graphql | Source |
@graphcommerce/magento-newsletter | Source |
@graphcommerce/magento-payment-included | Source |
@graphcommerce/magento-product | Source |
@graphcommerce/magento-product-bundle | Source |
@graphcommerce/magento-product-configurable | Source |
@graphcommerce/magento-product-downloadable | Source |
@graphcommerce/magento-product-grouped | Source |
@graphcommerce/magento-product-simple | Source |
@graphcommerce/magento-product-virtual | Source |
@graphcommerce/magento-review | Source |
@graphcommerce/magento-search | Source |
@graphcommerce/magento-store | Source |
@graphcommerce/browserslist-config-pwa | |
@graphcommerce/eslint-config-pwa | |
@graphcommerce/next-config | |
@graphcommerce/next-ui | |
@graphcommerce/prettier-config-pwa | |
@graphcommerce/react-hook-form | |
@graphcommerce/typescript-config-pwa |
Hygraph is integrated as a Content Management System. It is used to store all static content and provides a user-friendly interface for managing it.
The magento-graphcms example offers a number of components to render this content in different ways, for example in the form of a page-wide hero banner, a list of USPs or grid of text columns.
To get started with the magento-graphcms example, cloning the demo Hygraph project GraphQL schema and its content is recommended.
GraphCommerce uses Next.js
file-based routing ↗, built on
the concept of pages. A page is a React Component exported from a .tsx
file in
the /pages directory. When a file is added to the /pages directory, it's
automatically available as a route.
All routes of the app contain a URL segment that corresponds with a directory in
the /pages directory. Magento category routes are handled by the
/pages/[...url].tsx
page and therefore do not contain a URL segment. As a
result, the category URL structure of the app matches your default Magento
frontend 1-on-1.
Page structure of the graphcommerce-magento example
├── pages
└── about
└── account
└── api
└── blog
└── checkout
└── customer
└── modal
└── page
└── product
└── search
└── service
├── _app.tsx
├── _document.tsx
├── [...url].tsx
├── 404.tsx
├── cart.tsx
├── index.tsx
├── switch-stores.tsx
GraphCommerce is built and optimized to use data coming from Magento's GraphQL API. GraphCommerce uses GraphQL Mesh, which adds the ability to add extra (micro)services as data sources. In the magento-graphcms example, a headless CMS called Hygraph is integrated.
By default, the GraphQL Mesh endpoint runs on route /api/graphql. You can query both the Magento GraphQL schema and the Hygraph GraphQL schema. Try out the GraphCommerce demo GraphQL Explorer ↗ with the following example query:
query {
products(search: "sock", pageSize: 3) {
items {
url_key
}
}
availableStores {
store_name
store_code
}
}
Every component that requires data from Magento or GraphCMS has its own
.graphql
file, containing a GraphQL query fragment. GraphQL Code Generator
(codegen) is used to convert query fragments to both the GraphQL document (query
or mutation) and Typescript type definitions, both captured in .gql(.ts)
files. .gql(.ts)
are generated at build time.
Pages run queries in the getStaticProps function and pass the response as props. Pages have a single page query, that combines multiple query fragments from components. These accumulating page queries are located in the /components/GraphQL directory.
With the use of fragments and GraphQL Mesh, GraphCommerce retrieves all data from both Magento and GraphCMS in a single GraphQL query. This improves performance.
GraphQL queries in the graphcommerce-magento example
├── GraphQL
└── CategoryPage.graphql
└── DefaultPage.graphql
└── PageLink.graphql
└── DefaultPage.graphql
└── PagesStaticPaths.graphql
└── ProductPage.graphql
└── ProductPage2.graphql
React is a very suitable framework for magento reactjs ecommerce projects. Magento 2 is a well established, widely used open source e-commerce solution. GraphCommerce brings the best of both, and includes the structure, components, and tooling you need to get started with react ecommerce. Using GraphCommerce minimizes the development effort required to launch a full featured reactjs e-commerce storefront with features like cart, search, layered navigation and category, product, account, checkout pages.
The GraphCommerce magento-graphcms template contains all needed components like cart, search, and layered navigation for a full-featured e-commerce storefront. It's easy to customize and includes the structure, components, and tooling you need to get started. With the extensive documentation, it is more efficient to understand and customize the template for your next react Magento 2 project, than to start from scratch.