Hello, I'm engineer Kawashima.
After a long period of vacancy from the second post in this series describing headless commerce implementation, I will finally deliver it to you.
Thank you very much for your message from the comments section.

In this third article, we will explain the structure of Gatsby-Shopify-Starter, a Gatsby starter for headless commerce that was introduced in our first series and how it can be useful to implement.

vaginal supplementation
Gatsby v3.0.0 was released on March 2nd during this article!
The content of this article is based on Gatsby's v2, but we plan to try out the transition to v3 soon so if there are any fixes I will add.

The Basic Structure of Gatsby-Shopify-Starter

Gatsby-Shopify-Starter is a Gatsby starter with Shopify integration and carting capabilities.
You can see how it works in the demo store below.
https://gatsby-shopify-starter.alexanderhoerl.de/

If you create a new Gatsby site using Gatsby-Shopify-Starter, the internal structure is as follows (as of February 2021):* A partial omission such as cache files.

emotion

In gatsby-shopify-starter, Emotion of the CSS-in-JS library is used.
In this series, we will advance styling with CSS Modules and Sass rather than CSS-in-JS.If you want to implement it in CSS-in-JS, I hope that you can change the relevant place as appropriate.

Introducing plugins

Add a Gatsby plugin and extend the starter to make it easier to implement.

Before you get started, let’s update each plugin with the yarn upgrade command to the gatsby-shopify-starter immediately after installation: If the gatsby development command fails after an update, it is better to delete the cache once using the gatsby clean command.

installation of gatsby-plugin-sass

Since it is very hard to use Sass because you are writing the Sass regularly, I will introduce it in Gatsby site as well (if you want to write with CSS-in-JS please skip this section).

Install it with the command below.

yarn add sass gatsby-plugin-sass

Once installed, let’s add a description to gatsby-config.

plugins: [`gatsby-plugin-sass`],

Now you can write Sass in Gatsby :)
We will discuss the implementation of Gatsby components using CSS Module and Sass in our next article.

Gatsby official guide to introducing Sass Yes.

Introducing and installing plugins that are useful to implement

In addition, it is an introduction of the plug-in that I often use.
We will link to Gatsby official site, so please install it as necessary.

role of each directory and file

The structure of Gatsby itself is explained in the official guide So, in this section we will introduce an overview of the important files when dealing with gatsby-shopify-starter.

gatsby-config.js

A file that describes the configuration of Gatsby as a whole. The Gatsby formula describes gatsby-config.js as well. 。
You can also set the option of gatsby-source-shopify plugin (such as versioning your Shopify Storefront API).

js after installing the various plugins introduced so far will be described as follows.

See the Pen
gatsby-config.js by sayaka (@river_is_land)
on CodePen.

gatsby-node.js

It is a file that describes the function of Gatsby Node API to be executed when building Gatsby site.
In gatsby-shopify-starter, the process of generating individual product details pages based on GraphQL to get products from Shopify and acquired data is described from the beginning.

The Page Generation API More information about createPages can be found in the Gatsby documentation. please.

src/context/StoreContext.js ｜src/provider/ContextProvider.js

Gatsby's global data handling site. context It is a file that describes ().
js, you will find some work related to the shopify-buy plugin that is responsible for bridging with Shopify’s checkout capabilities.
Basically, we can continue development without any problems with the initial description of gatsby-shopify-starter.

Here's how the shopify-buy plugin works You can check it.

src/layouts/index.js

on the Gatsby site Layout Components Yes.
In addition to the ContextProvider mentioned above, there are also header components for the entire site and GraphQL via StaticQuery.

src/pages

Components placed in this directory are automatically converted to a URL page based on the file name.
In gatsby-shopify-starter, indexes, 404 pages and cart pages are prepared from the beginning; in actual cases we often add an About page or a query page as well.

src/templates/ProductPage

js's createPage API, this is a template for the product details page.
GraphQL in the template allows us to get data for each of our Shopify products.
Commonly required data such as product prices, descriptions, images and variations are described from the beginning. If there is a shortage, please rewrite it appropriately; if you want to pass metafields information here.

src/components/ProductForm

This component is responsible for quantity selection, variation selection and cart addition on the product detail page.
React Hooks also capture and update state and context.
Until now, the implementation had been based on a single variation of product, so we have not yet confirmed the details, but according to developer comments in the component...

Using this in parallel with a select input for variants can cause a bug where the buy button is disabled, this happens when only one variant is available and it's not the first one in the dropdown list.

In fact, there’s a bug that can happen in limited situations when determining the stock status of the variation selection column.
Please keep in mind when implementing it.

src/components/Cart/index.js｜src/components/Cart/LineItem/index.js

It is the component responsible for drawing a cart page and passing Shopify payment screen of goods in the cart.
Based on the data passed to context, display current items in cart.
When you click the Buy button, it will transition to Shopify’s payment screen and can be purchased just like a regular Shopify store.

instead

I think that the introduction of additional plugins to gatsby-shopify-starter has also ended, and you can grasp about the structure of files in starters.
Next time we're going to implement the original components using CSS Modules and JSX. If you are unfamiliar with Gatsby site, you may find it easier to understand the relationship between each component if you look at this chapter from time to time in future implementations:)