Giter VIP home page Giter VIP logo

commerceql's Introduction

CommerceQL

Website โ€ข Demo Store โ€ข Watch the video demo

CommerceQL is a minimalist serverless eCommerce template, designed to run on Graphcool.

Contents

Setup

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

Configure

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 key
  • SENDGRID_API_KEY: Your SendGrid API key
  • STORE_NAME: The name of your store, used for system emails
  • STORE_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=

Integrate

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 ๐Ÿ’ฐ.

Deploy

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.

Typical Application Flow

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:

  • addItemToBasket(productId: ID!, basketId: ID, quantity: Int)

    This mutation will add a product to the Basket as a BasketItem. If you do not provide a basketId, one will be assigned in the response. You can use this to add additional BasketItem's.

  • getBasketMeta(id: ID)

    This query will provide you with details about the Basket, including subTotal, totalItems and uniqueItems.

  • Checkout(...)

  • Pay(checkoutId: ID!, stripeToken: String!)

TODO: Cleanup

Will clean this up later.

1. createBasket

mutation {
  createBasket {
    id
  }
}

2. addItemToBasket(productId: ID!, basketId: ID!, quantity: Int)

mutation {
  addItemToBasket(productId: "cj8j26cweq8wb0166lp32ujz4", basketId: "cj8j27lkvx8rg0130m43s1w7n", quantity: 3) {
    id
  }
}

3. getBasket(id: ID!)

mutation {
  getBasket(id: "cj8j27lkvx8rg0130m43s1w7n") {
    id
    items {
      id
      orderedItem {
        name
        sku
        amount
      }
      quantity
    }
  }
  }
}

5. Checkout(...)

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
    }
}

commerceql's People

Contributors

notrab avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.