Developer preview
This is a developer preview of GraphCommerce. The documentation will be updated as GraphCommerce introduces new features and refines existing functionality.
Previously, you created a new GraphCommerce app. You're now ready to start working on your GraphCommerce custom storefront.
In this tutorial, you'll complete a series of tasks to add some specific functionality to your GraphCommerce app. Your final modification will be simple, but you’ll learn where to find resources to build more complex features on your own.
After you've finished this tutorial, you'll have accomplished the following:
You're using the most recent version of GraphCommerce. We recommend using the latest release to get the benefits of performance, new components, and other best practices.
You've completed the Create a GraphCommerce app tutorial.
<Typography variant='h1' gutterBottom sx={{ textAlign: 'center' }}>
Hello
</Typography>
import { Typography } from '@mui/material'
to the list of imports at the
top of the filehttps://user-images.githubusercontent.com/1251986/154980151-2039c027-c31f-4b99-86f2-8c2420053da8.mp4
<Typography variant='h1' gutterBottom sx={{ textAlign: 'center' }}>
Hello
</Typography>
<Typography
variant='h1'
gutterBottom
sx={{ textAlign: 'center', backgroundColor: 'red' }}
>
Hello
</Typography>
https://user-images.githubusercontent.com/1251986/154980686-3d2bf587-16d7-412b-b05f-8b0f7b40cbfd.mp4
You might want to make changes to a GraphQL query to fetch data from Magento for a specific need. For example, if you want to display a certain category property, you need to modify a query.
...CategoryQueryFragment
is included as a
fragment...CategoryQueryFragment
and add children_count
property:query CategoryPage($url: String!, $rootCategory: String!) {
...MenuQueryFragment
...FooterQueryFragment
...PageContentQueryFragment
...CategoryQueryFragment
categories(filters: { url_path: { eq: $url } }) {
items {
uid
children_count
...CategoryBreadcrumb
...CategoryDescription
...CategoryChildren
...CategoryMeta
...CategoryHeroNav
}
}
}
{ "kind": "Field", "name": { "kind": "Name", "value": "children_count" } }
{category?.name} - ({category?.children_count})
You can explore the Storefront API and run test queries in your GraphCommerce app. When you're running the GraphCommerce local development environment, you can visit the following URL to load the GraphQL Explorer:
http://localhost:3000/api/graphql