Decoupling Drupal Commerce with Gatsby

Welcome to yet another blog post! In this article, we will learn how to decouple Drupal Commerce with Gatsby to build an e-commerce site that includes product detail pages, product listing pages, and much more.

Let’s get started!

Decoupling Drupal Commerce with Gatsby

Setup our Drupal commerce site
Setup our Gatsby Site and fetch data from the Drupal site
Work with our data (Create pages dynamically, Add to cart functionality).

We will be covering the checkout functionality our next blog post.

Prerequisite

You should have some prior knowledge of Drupal Commerce and Gatsby.

Step 1: Setup Your Drupal Commerce Site

We can install our Drupal demo site with the below-mentioned command. This provides us with a starter project and all the required products we need to get started with. If you are not familiar with how to set up the commerce site from scratch, visit the Commerce documentation(https://docs.drupalcommerce.org/commerce2) to know more about it.


```composer create-project drupalcommerce/demo-project demo-commerce --stability dev --no-interaction```

Once you are done installing the site. You need to do a few more things:

Enable JSON API, JSON:API Resources, JSON API Hypermedia, and Commerce API module. For authentication, you can add the Simple OAuth module.
Allow read and write permissions for JSON API.
Edit your services.yml file to allow cross-origin headers.

Step 2: Setup Your Gatsby Site

Here is a link to the starter project. Go through the readme file to check how to set up your Gatsby site.

Let me walk you through the code and the flow:

Gatsby-config.js: We have just added two plugins that are not shipped by default with the Gatsby starter project.

gatsby-source-drupal: That fetches data from drupal end.
gatsby-plugin-styled-components: To style our components.

2. Gatsby-node.js:

By default, the gatsby-drupal-source plugin does not create product listing resources. If you visit your GraphQL endpoint you won’t find it. We are using OnCreateNode hook with some custom logic to create the allCommerceProduct listing resource at our GraphQL endpoint.

Here we are querying allProducts to create product pages dynamically by, passing the product id to our ProductDetail.js template. Then by using the context id in our template file we can query the product data for each product.

If you go to ProductDetail.js template file you can see how we are using the context id to query our product data.


export const productQuery = graphql`

 query($id: String!) {

   allCommerceProduct (filter: {drupal_id: {eq: $id}}) {

     nodes {

     ....query your data

     }
   }
 }
`;

The rest of the code is self-explanatory if you have worked with React before.

Essentially these are the components that require your attention:

ProductDetail.js template - This is where we fetch the data for each product and pass it below the component tree as props to display it.
products.js page - This creates a Product listing page. We are fetching all the products here and passing the data below the component tree as props to display it.
cart.js page - This displays the Cart Component that fetches our cart data from Drupal end. Checkout the CartService.js file to see how the cart data is being fetched from a JSON endpoint.

Then we use it in our cart Component like this:


// Fetching Data from Drupal end.

 // The function exits in CartService.js file.

 const getData = async () => {

   const getItems = await CartHandler.getCartItem();

   const data = getItems.included.filter(cartItem => cartItem.type.startsWith('order'));

   setCartData(data);

 };

You can similarly modify your cart. Checkout Commerce API to learn more. You can integrate the user authentication functionality similarly. I have already written a blog post regarding this. Here is the link.

This is all for now. Will come back with another blog post that will cover the payment integration. Till then see ya!

P.S - Please mention your queries in the comments section. Happy to answer.