full-example

Full Example: Webshop 💰

What it includes

• GraphQL type definitions
• Stripe Checkout Flow
• A GraphQL resolver function
• small seed script

Config

This example needs an environment variable called STRIPE_TEST_KEY. The STRIPE_TEST_KEY can be obtained by creating a stripe account and getting the token from the Account Settings.

Setup

Download the example or clone the repo:

curl https://codeload.github.com/graphcool/framework/tar.gz/master | tar -xz --strip=2 framework-master/examples/full-example
cd full-example

Install the CLI (if you haven't already):

npm install -g graphcool

You can now deploy the Graphcool service that's defined in this directory. Before that, you need to install the node dependencies for the defined functions:

yarn install      # install dependencies - alternatively npm install
graphcool deploy  # deploy service

When prompted which cluster you'd like to deploy, choose any of the Shared Clusters (shared-eu-west-1, shared-ap-northeast-1 or shared-us-west-2) rather than local.

Copy the Simple API endpoint for the next step.

Data Setup

You can run the seed script to get started. First, obtain the root token needed for the script:

graphcool root-token seed-script

Replace __ENDPOINT__ and __ROOT_TOKEN__ with the two copied values, and run the script to create a few product items:

node src/scripts/seed.js

Basic Workflow

• signup as a new user
• login by setting authorization header
• create a new order
• add a couple of items
• pay the order

Authentication

Signup as a new user and copy both the id and token for later use.

mutation signup {
  signupUser(
    email: "[email protected]"
    password: "password"
  ) {
    id
    token
  }
}

If you want to login again at a later point, you can use this mutation:

mutation login {
  authenticateUser(
    email: "[email protected]"
    password: "password"
  ) {
    token
  }
}

When you set the Authorization to Bearer <token>, your requests are authenticated. You can use this query to obtain the authenticated user id:

query loggedInUser {
  loggedInUser {
    id
  }
}

Checkout Process

First, we'll create a new order for the current user. Set the id of the user you created as the $userId: ID! variable and run this mutation:

mutation beginCheckout($userId: ID!) {
  createOrder(
    description: "Christmas Presents 2018"
    userId: $userId
  ) {
    id
  }
}

This will create a new order with order status NEW (note the orderStatus: OrderStatus! @defaultValue(value: NEW) field in types.graphql). Copy the obtained id of the order.

Now, we can add as many items as we want to the order. Make sure you've run the seed script from above, then first query existing products:

query existingProducts {
  allProducts {
    id
    price
    name
  }
}

For any product you'd like to add, copy its id and specify an amount:

mutation addOrderItem($orderId: ID!, $productId: ID!, amount: Int!) {
  setOrderItem(
    orderId: $orderId
    productId: $productId
    amount: $amount
  ) {
    itemId
    amount
  }
}

You can run setOrderItem multiple times to change the amount of a specific product, or to remove it from your order entirely. Once you're happy with the product selection in your order, you can pay (you'll need a valid Stripe token):

mutation pay($orderId: ID!, $stripeToken: String!) {
  pay(
    orderId: $orderId
    stripeToken: $stripeToken
  ) {
    success
  }
}

To get all orders of a specific user, you can use this query:

query orders($userId: ID!) {
  allOrders(filter: {
    user: {
      id: $userId
    }
  }) {
    description
    orderStatus
    items {
      amount
      product {
        name
      }
    }
  }
}