hygraph / gatsby-graphcms-ecommerce-starter

Swag store built with GraphCMS, Stripe, Gatsby, Postmark and Printful.

THIS REPO IS ARCHIVED. YOU SHOULD NOW VISIT https://github.com/GraphCMS/graphcms-commerce-starter

---

gatsby-graphcms-ecommerce-starter

Minimalist dropshipping swag store built with GraphCMS, Stripe, Gatsby, Postmark and Printful.

Read more

The stack

Why settle for monolithic ecommerce platforms when you can make the most of the best APIs to build what you want. In this example we use a variety of services to perform your typical ecommerce tasks. #DIYCommerce

• GraphCMS: Localised product content, reviews, and order management.
• Stripe: Used to securely process payments and Strong Customer Authentication.
• Gatsby: Statically build product pages and handle cart/checkout logic.
• Postmark: Deliver order received and dispatched email notifications to customers.
• Printful: Create inventory and drop ship with ease.

How it works

1. Gatsby will source products from Printful, and together with GraphCMS, Gatsby will enrich the product nodes. This means we can use Printful for inventory and GraphCMS for presentation data.

2. The "Add to Cart" function is handled client side, this is typically where you might reach to implement your own commerce API if you want to perform sophisticated logic around item taxes and handling discount codes.

3. The checkout is handled by a custom GraphQL server which creates an order with Printful, handles 3D Secure 2 payments with Stripe and sends the order details onto GraphCMS.

4. Orders are then automatically fulfilled with Printful once a payment is received, and in return updates GraphCMS via a webhook to set the order to fulfilled.

⚠️ You must have a payment method registered with Printful for orders to be fulfilled automatically. You will be charged for Printful orders once they are created via the API, it's your responsibility to capture payments/manage payouts any funds from the customer via Stripe.

How to use

If you wish to extend and work with this example locally, follow the instructions below.

If you'd rather check out a demo or deploy to your own Netlify, you can do that too.

First, you will need accounts at GraphCMS, Stripe, Gatsby, Postmark and Printful.

1. Download and install dependencies

git clone [email protected]:graphcms/gatsby-graphcms-ecommerce-starter.git
cd gatsby-graphcms-ecommerce-starter
yarn # npm install
cp .env.sample .env

2. Setup development environment variables

You will need to create a project from template inside GraphCMS to carefully match what is expected from GraphCMS.

You'll need an account with GraphCMS, Stripe and Printful for this demo to fully work. It's recommended you use separate API keys for development and production.

Add the necessary variables to .env.

3. (optional): Configure Stripe/Printful webhooks

More details coming soon

4. Run locally

Once all dependencies and environment variables are satisfied, you can run Gatsby locally to build in development:

yarn dev

gatsby-graphcms-ecommerce-starter's Issues

Create CartItemList component

Deliverables

• Create <CartItemList /> component that can renders the CartItem /> component with items from the cart context.
• Render <CartItemList /> component inside CartPage() component
• Display a 'no items' message is list is empty

Create CartButton component

Deliverables
There must be a <CartButton /> component that accepts the following props:

• id
• image
• name
• slug
• price
• quantity

This button must also be exported via the theme for use inside the gatsby-theme-storefront theme.

How to configure Stripe/Printful webhooks ?

I have readed the docs of stripe and printful，but how to use the functions/order-created,order-dispatched to trigger the postmark？

Use CartQL

Create ProductGrid component

The <ProductGrid /> component will render <Product /> components passed via the function props.

Create Product component

The <Product /> component will be used inside the <ProductGrid /> (#13). It must display:

• The name
• Formatted price
• At least once photo
• On sale label

using a stripe alternative

Hi,
This is great, can be used as a merch store.
But i would like to inquire,
i live in a country not supported by stripe, how can i use paypal with this instead of stripe.
P.S Stripe Atlas is a bit too expensive

Cannot read property 'messages' of undefined

Create addItem function

Deliverables
Since carts are handled via the UI, we need to take into consideration the following restrictions:

• Items in the array are unique by id
• If a duplicate item is added, the quantity is increased by the given amount or 1 if not provided.
• Added items must contain the necessary data to render the <CartItem /> component. This would include the image, name, price and slug.

Create CartItemQuantity component

Deliverables

• Create context handler for updateItemQuantity
• Add chevrons to increase or decrease item quantity
• Show current quantity amount

"gatsby-source-graphcms" threw an error while running the sourceNodes lifecycle

I just clone the repo and using Swag Store Template.

It would be good to have a better guide for initial setup.

yarn run v1.22.5
$ gatsby develop
success open and validate gatsby-configs - 0.041s
success load plugins - 0.631s
success onPreInit - 0.002s
success initialize cache - 0.035s
success copy gatsby files - 0.208s
success onPreBootstrap - 0.009s
success createSchemaCustomization - 0.004s

 ERROR #11321  PLUGIN

"gatsby-source-graphcms" threw an error while running the sourceNodes lifecycle:

Field "__typename" at path "Order,payments,0" has no parent type. This may indicate that your remote schema had changed and your fragment "Order" must be updated.     



  Error: Field "__typename" at path "Order,payments,0" has no parent type. This may indicate that your remote schema had changed and your fragment "Order" must be upda  ted.

  - build-type-usages-map.js:70 Object.enter
    [****]/[gatsby-graphql-source-toolkit]/dist/compile-node-queries/analyze/build-type-usages-map.js:70:27

  - build-type-usages-map.js:47 Object.buildTypeUsagesMap
    [****]/[gatsby-graphql-source-toolkit]/dist/compile-node-queries/analyze/build-type-usages-map.js:47:15

  - compile-node-queries.js:146 createCompilationContext
    [****]/[gatsby-graphql-source-toolkit]/dist/compile-node-queries/compile-node-queries.js:146:48

  - compile-node-queries.js:44 compileNodeQueries
    [****]/[gatsby-graphql-source-toolkit]/dist/compile-node-queries/compile-node-queries.js:44:21

  - gatsby-node.js:121 createSourcingConfig
    [****]/[gatsby-source-graphcms]/gatsby-node.js:121:21


warn The gatsby-source-graphcms plugin has generated no Gatsby nodes. Do you need it?
success source and transform nodes - 4.924s
warn `createResolvers` passed resolvers for type `GraphCMS_Product` that doesn't exist in the schema. Use `createTypes` to add the type before adding resolvers.
warn `createResolvers` passed resolvers for type `GraphCMS_Review` that doesn't exist in the schema. Use `createTypes` to add the type before adding resolvers.        
success building schema - 0.309s

 ERROR #85901  GRAPHQL

There was an error in your GraphQL query:

Cannot query field "allGraphCmsCategory" on type "Query".

File: src\gatsby\node\createPages.js:7:13


 ERROR #85901  GRAPHQL

There was an error in your GraphQL query:

Cannot query field "allGraphCmsCollection" on type "Query".

File: src\gatsby\node\createPages.js:7:13


 ERROR #85901  GRAPHQL

There was an error in your GraphQL query:

Cannot query field "allGraphCmsProduct" on type "Query". Did you mean "allPrintfulProduct"?

File: src\gatsby\node\createPages.js:7:13


 ERROR #11321  PLUGIN

"gatsby-node.js" threw an error while running the createPages lifecycle:

Cannot destructure property `categories` of 'undefined' or 'null'.



  TypeError: Cannot destructure property `categories` of 'undefined' or 'null'.

  - createPages.js:6 Object.createPages
    C:/*****/src/gatsby/node/createPages.js:6:5


failed createPages - 0.167s
success createPagesStatefully - 0.106s
success onPreExtractQueries - 0.005s
success update schema - 0.015s   

 ERROR #85901  GRAPHQL

There was an error in your GraphQL query:

Unknown type "GraphCMS_Locale".

File: src\templates\CategoryPage.js:24:48


 ERROR #85901  GRAPHQL

There was an error in your GraphQL query:

Unknown type "GraphCMS_Locale".

File: src\templates\CollectionPage.js:24:50


 ERROR #85901  GRAPHQL

There was an error in your GraphQL query:

Unknown type "GraphCMS_Locale".

File: src\templates\ProductsPage.js:23:32


 ERROR #85901  GRAPHQL

There was an error in your GraphQL query:

Unknown type "GraphCMS_Locale".

File: src\templates\ProductPage.js:183:41


 ERROR #85901  GRAPHQL

There was an error in your GraphQL query:

Cannot query field "allGraphCmsCategory" on type "Query".

GraphQL request:3:5
2 |   query NavQuery {
3 |     categories: allGraphCmsCategory(filter: { locale: { eq: en } }) {
  |     ^
4 |       nodes {

File: src\components\Header.js:11:5


 ERROR #85901  GRAPHQL

There was an error in your GraphQL query:

Cannot query field "allGraphCmsCollection" on type "Query".

GraphQL request:10:5
 9 |     }
10 |     collections: allGraphCmsCollection(filter: { locale: { eq: en } }) {
   |     ^
11 |       nodes {

File: src\components\Header.js:18:5

failed extract queries from components - 0.742s
success write out requires - 0.036s
success write out redirect data - 0.010s
success onPostBootstrap - 0.002s
⠀
info bootstrap finished - 10.241 s
⠀
success run queries - 0.114s - 8/8 70.11/s
warn Browserslist: caniuse-lite is outdated. Please run next command `yarn upgrade`

 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed


C:\Users\****\src\components\Header.js
  11:5   error    Cannot query field "allGraphCmsCategory" on type "Query"
 graphql/template-strings
  98:17  warning  onBlur must be used instead of onchange, unless absolutely necessary and it causes no negative consequences for keyboard only or screen reader users 
 jsx-a11y/no-onchange

✖ 2 problems (1 error, 1 warning)


File: src\components\Header.js

failed Building development bundle - 7.340s

Create RemoveCartItem component

Deliverables

• Create function inside CartContext to remove the item by id
• Add and export button for intuitive component shadowing

Build fails on GraphQL query 'cms'

yarn dev and yarn build fails due to graphql query of 'cms' in Header.js. Tried changing to align with my GraphCMS setup of my store but still fails.

ERROR #85901 GRAPHQL

There was an error in your GraphQL query:

Cannot query field "ShakaSurf" on type "Query".

GraphQL request:3:5
2 | query NavQuery {
3 | cms {
| ^
4 | categories {

File: src/components/Header.js:11:5
It could be my understanding of GraphCMS and not naming my fields correctly, any pointers here greatly appreciated.

Create CartItem component

Deliverables

• Show Product image
• Show item name
• Link product image to product page is slug provided for item
• Show item unit price
• Show item sub total
• Show quantity
• Hook up <CartItemQuantity /> component with item id
• Hook up <RemoveCartItem /> component with item id

Configure price with locales

Using the locales functionality for product prices might be a simple (albeit hacky) way to showcase the feature.

Add Twilio

Send SMS order confirmation, fulfilment if a phone number is provided during checkout.

Create QuantitySelect component

We need a <QuantitySelect /> component to show alongside the <CartButton /> inside the <Product /> component so the user can select the quantity of the item they wish to add to the cart.

This component will belong to the cart theme, but be exported for use inside the catalog theme.

TypeError: Cannot read property 'activities' of undefined

I clone the project, ran yarn then cp .env.sample .env and put the endpoint form GraphCMS. I think this error is not something related to other environment variables if I'm not wrong.

Then I ran yarn dev to start up but got this error.

...\node_modules\yoga-layout-prebuilt\yoga-layout\build\Release\nbind.js:53
        throw ex;
        ^

TypeError: Cannot read property 'activities' of undefined

Optionally create cart page based on theme config

Deliverables
The cart page should only be created if the theme option enableCartPage is true.

Add Algolia

Postmark emails not sending

The functions to send Postmark emails for order confirmation and dispatch aren't firing. Requires investigation.

Create updateItem function

Deliverables
There must be an updateItem(itemId, data) function provided by CartContext for use inside <CartItem />.

This function will accept itemId and data arguments. data can contain a new quantity that will override the quantity. Everything else must use Object.assign.

Create Cart component

Deliverable
The <Cart /> component should contain everything to render the <CartItemList />, and <CartMeta /> components.

This allows the Cart to be used wherever (on a page, or in a modal) for better theme customisation.

Something like...