Website • Demo Store • Watch the video demo
CommerceQL is a minimalist serverless eCommerce template, designed to run on Graphcool.
CommerceQL is designed to be used with the Graphcool Framework.
You will need to be running the latest version of the Graphcool CLI to get started with CommerceQL.
npm install -g graphcool@next
mkdir my-online-store-platform && cd "$_"
graphcool init # use this to create a new Graphcool service
graphcool add-template commerceql/commerceql
Once setup, you will need to uncomment lines in graphcool.yml
and types.graphql
to enable the platform inside your Graphcool service.
The following environment variables are required:
STRIPE_KEY
: Your Stripe keySENDGRID_API_KEY
: Your SendGrid API keySTORE_NAME
: The name of your store, used for system emailsSTORE_EMAIL
: The main email where people can reach you, used for system emails
You can easily configure these by using a .envrc
file and direnv.
export STRIPE_KEY=
export SENDGRID_API_KEY=
export STORE_NAME=
export STORE_EMAIL=
CommerceQL can be used to build a custom GraphQL backed online store, without the limitations of hosted solutions.
You can extend the CommerceQL platform by adding additional functions, types and permissions, or you can use it "as is" and start selling 💰.
Once you're finished integrating CommerceQL with any additional functionality, it's time to deploy.
You will need to have the environment variables set during each deployment.
graphcool deploy
You can deploy locally, to your own server or use Graphcool to host your service/database. See the Graphcool CLI for more details.
CommerceQL provides a basic Product
, Basket
, Order
& Checkout
API, leaving the rest up to you. Every store is different and you shouldn't be forced to build your store around a complicated set of constraints.
CommerceQL ships with a CRUD API out of the box, so you're free to perform mutations like createProduct
and updateProduct
, etc 🙌.
When using the CommerceQL Platform template, we recommend the following flow inside your applications:
-
This mutation will add a product to the
Basket
as aBasketItem
. If you do not provide abasketId
, one will be assigned in the response. You can use this to add additionalBasketItem
's. -
This query will provide you with details about the
Basket
, includingid
,subTotal
anditems
. If you don't have abasketId
, one will be assigned in the response.
Will clean this up later.
mutation {
createBasket {
id
}
}
mutation {
addItemToBasket(productId: "cj8j26cweq8wb0166lp32ujz4", basketId: "cj8j27lkvx8rg0130m43s1w7n", quantity: 3) {
id
}
}
mutation {
getBasket(id: "cj8j27lkvx8rg0130m43s1w7n") {
id
items {
id
orderedItem {
name
sku
amount
}
quantity
}
}
}
}
mutation {
Checkout(
stripeToken: "tok_visa_debit"
basketId: "cj8j27lkvx8rg0130m43s1w7n"
firstName: "..."
lastName: "..."
email: "..."
billingName: "..."
billingLine1: "..."
billingLine2: ""
billingCity: "..."
billingState: "..."
billingPostalCode: "..."
billingCountry: "..."
shippingName: "..."
shippingLine1: "..."
shippingLine2: ""
shippingCity: "..."
shippingState: "..."
shippingPostalCode: "..."
shippingCountry: "..."
shippingInstructions: "Leave in porch"
) {
id
stripeCustomerId
firstName
lastName
email
}
}