Forem: Jamie Barton

Top 5 tools every frontend developer should be using with GraphQL in 2023

Jamie Barton — Wed, 31 May 2023 08:33:01 +0000

Every week, a bunch of fresh tools, services, and libraries make their debut, claiming to take the GraphQL developer experience to the next level.

Here are my top 5 tools every frontend developer should be using with GraphQL in 2023:

1. Grafbase OpenAPI Connector

Maximize the power of web and mobile app development by effortlessly blending REST and GraphQL APIs with Grafbase. Say goodbye to complexity and hello to a unified GraphQL API that supercharges your app development process.

Enter OpenAPI, formerly known as Swagger - the ultimate game-changer for API definition and documentation. It simplifies things by describing APIs in a format that machines understand, making it easier for developers to work with all kinds of APIs. And with Grafbase Edge Gateway, you can seamlessly merge OpenAPI-driven REST APIs and transform them into GraphQL, taking your stack to a whole new level of awesomeness.

extend schema
  @openapi(
    name: "Stripe"
    schema: "https://raw.githubusercontent.com/stripe/openapi/master/openapi/spec3.json"
    headers: [
      { name: "Authorization", value: "Bearer {{ env.STRIPE_API_KEY }}" }
    ]
  ) {
  query: Query
}

It's free to get started and you don't even need an account to build locally:

npx grafbase init --template openapi-stripe

2. GraphQL Code Generator — Client Preset

The type system in GraphQL is a major game-changer. We can leverage the GraphQL Code Generator to use that same type system to generate TypeScript types so we can build better frontends without error.

In the past, we relied on the GraphQL Code Generator to generate hooks for our existing GraphQL clients. But it was a pain when we wanted to switch to new clients.

The GraphQL Code Generator recommends using the client-preset and TypedDocumentNode to level up our functions and make sure we're getting the correct operation and variable types.

Plus, it's all about keeping operations and fragments in their own components. This approach reduces code complexity, keeps things tidy, and makes it a breeze to switch to any GraphQL client that supports TypedDocumentNode.

export const LessonFragment = graphql(/* GraphQL */ `
  fragment LessonItem on Lesson {
    title
  }
`)

export function Lesson(props: { lesson: FragmentType<typeof LessonFragment> }) {
  const lesson = useFragment(LessonFragment, props.lesson)

  return (
    // Fully typed!
    <li>{lesson.title}</li>
  )
}

3. GQty

Are you tired of the hassle of writing GraphQL operations and configuring codegen for TypeScript? Say goodbye to all that and switch to GQty!

With GQty, you don't even need a separate GraphQL client. It's like magic! GQty takes care of transforming your code into a GraphQL operation behind the scenes. So sit back, relax, and let GQty handle all the heavy lifting for you.

import type { FunctionComponent } from 'react'
import { useQuery } from '../gqty/'

const Query: FunctionComponent = () => {
  const {
    me: { name, friends }
  } = useQuery()

  return (
    <>
      Hello {name}!
      <ol>
        {friends().map(user => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ol>
    </>
  )
}

export default Query

4. GraphQL Network Inspector

The days of struggling to identify /graphql requests in the Network Inspector are over!

GraphQL Network Inspector, an awesome extension for developer tools that makes debugging a breeze.

It categorizes requests into queries, mutations, and subscriptions and even uses the GraphQL operation name. Say goodbye to confusion and hello to simplified debugging.

5. GraphMan

GraphMan takes away all the boring and time-consuming aspects of crafting queries and mutations for a GraphQL API.

With GraphMan, you can effortlessly generate a comprehensive collection from a single GraphQL endpoint. Each collection includes requests for every query and mutation, all conveniently pre-filled variables.

To create a collection, just pass your Grafbase API URL to the command below. It's that easy!

deno run https://deno.land/x/graphman@v1.2.1/src/cli.ts GRAFBASE_API_URL_HERE

Join us at GraphQL Conf

Do you want to learn more about GraphQL? Join us at GraphQL Conf this year. Get your tickets now.

Grafbase Public Beta

Jamie Barton — Mon, 24 Apr 2023 08:44:38 +0000

Grafbase is now in Public Beta!

Since launching the Private Beta in July 2022, thousands of early adopters have joined our growing community to help shape and improve the Grafbase platform.

// Detect dark theme var iframe = document.getElementById('tweet-1650416869927534592-845'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1650416869927534592&theme=dark" }

The core feature of the Grafbase platform is the Edge Gateway, a programmable realtime GraphQL API deployed to the edge.

Grafbase January 2023 Update

Jamie Barton — Thu, 02 Feb 2023 14:06:25 +0000

Hey Dev.to!

We are thrilled to share with you all of the latest product updates, resources, and a preview of what we’re working on next.

Let’s get right to it…

Product Updates

January has been an exciting month packed with lots of feature updates.

Live Queries Grafbase becomes the first hosted GraphQL platform to provide Live Queries. GraphQL Live Queries enable developers to build and deploy realtime apps with ease.
Product Roadmap Since launching the private beta last year, users have been asking about the future of Grafbase product roadmap. We’re super excited to share the public roadmap that you can follow, and even upvote features to be worked on first!
Examples Directory With new examples being created every week we have made it even easier to find the example you’re looking for.
Guides Directory Learn how to build the next generation of web and mobile apps with new guides added every week!

You can see what’s new even quicker by following us on Twitter, browsing the changelog, or joining our Discord server.

Resource Updates

Also in January, there were lots of new documentation, guides, videos, tutorials, and code examples.

[VIDEO]: Serverless GraphQL API with Grafbase by Simon Grimm Learn how to build a mobile application from scratch using Ionic with popular YouTuber Simon Grimm.
[PLUGIN]: URQL Exchange for Live Queries To celebrate the launch of Live Queries we made it even easier so developers don’t need to mess around configuring SSE. Install the custom URQL exchange and go!
[PLUGIN]: Apollo Link for Live Queries We also made it easier for developers using Apollo Client to get going with Live Queries. Add the custom Apollo Link by Grafbase and go!
[EXAMPLE]: Qwik + Qwik City Everyone is talking about how “Qwik” this new framework is so Heather created an example to show how you can fetch data with GraphQL with Qwik City.
[GUIDE]: Build your own low-code GraphQL Admin UI with Retool In this guide, Jamie shows how you can build your own Admin UI to manage Grafbase content using Retool.
[GUIDE]: Working with Eleventy and GraphQL In this guide, Jamie shows how you can use the popular Static Site Generator Eleventy with GraphQL to fetch data from Grafbase.
[WORKSHOP]: Building GraphQL Backends with SDL In this weekly JS Drop by This Dot Labs, Jamie releases a video on you build a GraphQL backend with Grafbase using SDL.

What’s next?

We’re working on lots of new features, including a new directive that lets you write your own resolvers, as well as CLI deploys, data explorer, and much more.

That’s it for January!

PS. If you like what we’re building we’d love to hear more about what you think. Join us on Discord, Twitter, YouTube, and GitHub.

Build realtime GraphQL backends with Grafbase

Jamie Barton — Mon, 16 Jan 2023 16:01:35 +0000

There are developers who don't want the hassle of building a backend, managing deployments, configuring continuous integration, juggling connection pooling, and more.

Grafbase was built to manage all of the above. You get a distributed GraphQL API at the edge by creating a single grafbase/schema.graphql file in your project.

Your schema contains models with special directives to relate data, set default values, validation, and more.

# grafbase/schema.graphql
type Post @model {
  title: String!
  slug: String! @unique
}

In 2021, Laurin Quast introduced a collection of packages to support the use of GraphQL Live Queries on the server and client.

Today, Grafbase is happy to announce it now supports GraphQL Live Queries!

This means that all you need to do to start using GraphQL Live Queries is add @live to your query!

query @live {
  postCollection(first: 10) {
    edges {
      node {
        id
        title
      }
    }
  }
}

The @live directive will observe any changes to the data and send a message using Server-Sent Events with the patch to update the current query state.

The event is in the format of JSON Patch:

{
  "patch": [
    {
      "op": "add",
      "path": "/postCollection/edges/3",
      "value": {
        "node": {
          "id": "post_01GJMDWJ2M6WWTM26S7C1KKYBE",
          "title": "Instant serverless GraphQL backends"
        }
      }
    }
  ],
  "revision": 1
}

Together with The Guild, Grafbase is also releasing 2 new packages (with more on the way) to further abstract the effort needed to implement Live Queries on the frontend.

Starting with support for Apollo Client and URQL, you can add Live Queries with the following packages:

Developers not using either of those libraries can still use Live Queries with the native EventSource API.

Try It Now!

You can try Live Queries by building your own backend in one simple command:

npx grafbase init

Once you've modelled your data using the schema you can run your backend locally to build:

npx grafbase dev

This Week @ Grafbase - Dec 9

Jamie Barton — Fri, 09 Dec 2022 13:18:26 +0000

Happy Friday 🥳

It’s been a few weeks since our last update about what’s going on at Grafbase, and for good reason...

What’s new?

🎮 Dashboard tweaks
We’ve made some significant changes to our Dashboard UI. You should start to see updates rolling out every few days.

🛠️ Bulk Environment Variables
We've made it even easier to add environment variables. Check it out!

🛰️ GraphQL Galaxy
Grafbase Founder & CEO Fredrik Björk spoke at GraphQL Galaxy with other industry experts on the future of server-side GraphQL.

📢 Base64 cursors
Collection queries returning edges will now return a base64 encoded cursor value you can use with the before/after pagination arguments. Learn more about pagination.

🧰 New home for examples
There's a new GitHub repo for all examples! Go check it out.

What’s next?

⚡️ Live Queries
We’re putting the final touches on our realtime GraphQL support. Next week we will introduce this officially. For those keen enough, you can try it out today if you dig around the documentation 😉.

🔢 Improved numeric operations
We’ve made it easier to increment and decrement numeric fields. This change is live in production now but coming to CLI support next week with an official changelog.

GraphQL Galaxy Workshop
In this workshop, we'll cover the basics of GraphQL, and then use that knowledge to build a backend using SDL. Once we've created our schema, we'll run it locally, deploy to production, and create deployment branches for any changes to our schema. We'll finish the workshop by fetching data from our backend from the frontend, as well as adding authentication to lock down data access!
https://graphqlgalaxy.com/workshops-3h

Next week we will introduce some significant changes, including Live Queries, Numeric operations, Improved Documentation, and lots more!

We love to hear from our users what we can be doing better. No matter how small you might think it is, we want to hear from you!

Make sure to click Feedback once logged in and share your thoughts. We read them all!

Have a great weekend! 💚

This Week @ Grafbase - Nov 25

Jamie Barton — Fri, 25 Nov 2022 10:51:57 +0000

Happy Friday 🥳

These posts provide a summary of everything we've been working on this week at Grafbase.

What's new?

🔑 JWT Provider
Today we announced the release of a new auth provider strategy that lets you set a secret to verify JWTs as part of your authorisation strategy.
https://grafbase.com/changelog/jwt-authorization-provider-added

⚒️ New examples!
We've 3 new examples - Fresh, SolidStart, and NextAuth.js Credentials.

📚 New guides!
We have got some new guides! Working with TypeScript, React, and Apollo Client, Username and Password authentication with NextAuth.js.

💚 NuxtNation
The NuxtNation conference was last week and you can replay
https://vi.to/hubs/nuxtnation

We also have a small competition for those who joined NuxtNation. So make sure to checkout the swag link in the email if you attended.

🔥 Cloudflare
We’re excited to continue building Grafbase for scale with Workers by joining the Cloudflare Workers Launchpad!
https://blog.cloudflare.com/launchpad-fall-22/

What's next?

⚡️ Live Queries
General availability for Live Queries is coming very soon! If you'd like early access, please let us know.

🏎️ Performance
We're working on improving the already fast deployment, and API response times.

🎮 Dashboard Updates
You should start to see some improvements to the Dashboard soon.

Stay tuned 👀

Have a great weekend! 👋

This Week @ Grafbase - Nov 11

Jamie Barton — Fri, 11 Nov 2022 16:54:07 +0000

Happy Friday 🥳

This Week @ Grafbase has been all about product, conferences, and realtime!

What's new?

💅 New homepage!!
We wanted to share with everyone what we're building. The homepage shares more about we've created already as well as what's coming next. Check it out and let us know of any feedback.
https://grafbase.com

📆 Date scalar added
You can now use the Date scalar for fields in your models.
https://grafbase.com/changelog/date-scalar-added

🔢 @length directive added
You can now set min and max values for the length of a field value or list.
https://grafbase.com/changelog/length-directive-added

🔐 Model-level authorization rules
You can now override the global @auth rules for each @model in your schema.
https://grafbase.com/docs/reference/directives#model-level-authorization-rules

🗝️ Auth groups claim configuration
You can now set the groupsClaim for group-based auth to use a custom claim different from the default groups claim.
https://grafbase.com/docs/reference/directives#operations

🌉 Jamstack Conf

This week was all about Jamstack Conf! It was a blast to meet the community and see people IRL once again!

Be sure to check jamstack.org/conf to watch all of the the talks when they're published!

What’s next?

💚 NuxtNation is happening!
This event happens November 16 & 17, online!
https://nuxtnation.com

💗 We’re close to releasing the initial version of @live queries! We should have something to show you very, very soon!
Subscribe to the changelog

More exciting updates coming next week!

Have a great weekend 👋

This Week @ Grafbase - Nov 4

Jamie Barton — Fri, 04 Nov 2022 10:10:00 +0000

Happy Friday 🥳

This Week @ Grafbase has been all about product and documentation!

What's new?

🛠️ Docs Quickstart
There is now a Quickstart that you can follow to get up to speed with Grafbase in a few short steps.
https://grafbase.com/docs/quickstart/get-started

🔍 Update and Delete by unique fields
You can now update and delete data by id and any @unique field.
https://grafbase.com/changelog/update-and-delete-by-unique

▲ Next.js conf
We recently sponsored Next.js conf and have a free workshop you can join happening later this month — more info

📈 Funding announcement
You may have already seen but we announced a $7.3m raise to build the data platform of the future.
https://grafbase.com/blog/announcing-7-3m-funding

What's next?

🫐 We're attending and sponsoring Jamstack Conf. There's still tickets available for any last minute attendees. Get 40% off your ticket with code: GRAFBASE40.
https://jamstack.org/conf

💚 We're also sponsoring Nuxt Nation! This event happens November 16 & 17, online!
https://nuxtnation.com

🔓 We're working on more Data Validation topics and investigating how to properly implement migrations, resolvers, and more. Join the community on Discord to have your say on how we should build the data platform for the future!

More exciting updates coming next week!

Have a great weekend 👋

Working with HTTPie and GraphQL

Jamie Barton — Tue, 30 Aug 2022 16:27:05 +0000

HTTPie just announced support for GraphQL! This is huge.

I've been using HTTPie via the Terminal for years, but the latest support for GraphQL inside their Web & Desktop client is a great addition.

You'll want to first enter the URL for your GraphQL API (in this case I'm using https://api.cartql.com, and then select from the list GraphQL in the bottom left:

Right now there's no support for fetching the schema. This means when you're writing queries, or mutations you'll not get too much help on the available fields (or variables):

Once you're ready to go you can click Send! The response, as well as the response headers, status code, and timings will be shown:

HTTPie also makes it really easy to add your GraphQL requests to collections, and save for later!

Once the schema support lands this could be my new favourite for working with GraphQL.

Instant serverless GraphQL backends with Grafbase

Jamie Barton — Fri, 26 Aug 2022 14:19:12 +0000

Building GraphQL backends has always involved a considerable amount of wiring together a bunch of dependencies. It doesn’t matter if you’re solving the n+1 problem with DataLoader, or subscribing to data changes with GraphQL Subscriptions, it’s been a challenge for many years to get it right.

Libraries and frameworks like Yoga, Strawberry, Apollo, and many more have given us some great foundations.

As a developer I’ve loved learning from the open source community by exploring how others do it on GitHub, and then applying that knowledge to my own projects. Most importantly, I’ve always learned from my mistakes which have gone on to help me build better servers.

But, there comes a time where building your own backend gets increasingly difficult. I often find myself at some point asking;

How do I manage CI/CD?
How do I handle caching?
How do I see what schema changes are breaking?
How do I check this works in production, without pushing to production?
Where do I host this?
Is my database in the same location as my API?

For many years I’ve used Heroku Pipelines, and where possible used AWS to host my serverless GraphQL. But all of that required setup, configuration, and things I had to invest time to manage.

Today I’d like to walkthrough creating a serverless GraphQL backend with Grafbase.

Grafbase provides a seamless developer experience for building backends. Your backend is deployed to the edge.

Getting started

Inside a new or existing project directory, run npx grafbase init.

Then add to grafbase/schema.graphql a schema for a new Todo model:

type Todo @model {
  id: ID!
  title: String!
  complete: Boolean!
}

Now you’re done! That’s all you need to build instant GraphQL backends.

To run the backend locally, run npx grafbase dev. Now head to [http://localhost:4000](http://localhost:4000) to try it out.

From there you can use GraphQL in the way you’re used to!

Let’s create a new Todo using the todoCreate mutation:

mutation {
  todoCreate(input: { title: "Hello Dev.to!", complete: false }) {
    todo {
      id
      title
      complete
    }
  }
}

That’s it!

I’ve gone ahead and made a simple cheatsheet to share with your friends and colleagues:

Deploy to production with GitHub

Running Grafbase locally is great, but what about when you want to deploy to production?

You’ll want to make sure you have an account with GitHub, and Grafbase. Grafbase is currently in private beta, but you can request access to join from the homepage.

You’ll next want to commit your code to a new GitHub repository. You can read the docs if you’ve not done this before. Committing your code will look a little something like:

git remote add origin https://github.com/notrab/dev-to-grafbase.git
git branch -M main
git push -u origin main

ℹ️ https://github.com/notrab/dev-to-grafbase is the URL of my repo.

Import your repository

Once you’ve logged into Grafbase, it’ll look a little something like the image below. Here we’ll click Import your repository to get started.

Next you’ll want to find the repository from your personal, or organization account. Here I’m searching for the repository dev-to-grafbase I created previously.

Click Import to continue.

Once you’ve imported the repository, Grafbase will automatically detect grafbase/schema.graphql and import your schema.

Click Deploy to continue.

That’s it! You now have a GraphQL backend deployed to the edge with Grafbase. 🎉

From the Grafbase Dashboard you can discover your API endpoint, API Keys, Branches, and the hosted Playground to execute GraphQL operations.

Propose changes to the schema with Pull Requests

Just like you would use GitHub to propose changes to code with Pull Requests, you can use GitHub to suggest changes to grafbase/schema.graphql and Grafbase will automatically deploy a new serverless GraphQL backend at the edge!

To get started, create a new branch. If you’re using the command line, it’ll look a little something like this:

git switch -c my-first-schema-change

Now inside of grafbase/schema.graphql add description to your Todo model:

type Todo @model {
  id: ID!
  title: String!
  description: String
  complete: Boolean!
}

Save the file, commit, and push to GitHub. If you’re using the command line, it’ll look something like this:

git commit -am 'feat: add description field'
git push

Next you’ll want to create a new Pull Request. You can do this via the command line, or GitHub.com — here’s mine from earlier.

Grafbase will then comment on the Pull Request with the deployment status:

Clicking on the link provided by Grafbase will take you to that branch inside of your projects dashboard.

From there you can see an overview of the changes (new field added), and the endpoint for that specific change:

That’s it! How cool. A fully isolated deployment preview for your schema change. You can then use this endpoint to test against your frontend to make sure everything works before merging with production.

Once you’re happy that the changes can be added, merge the Pull Request in GitHub, and Grafbase will automatically merge the changes to your production backend API.

Going further

If you’re keen to learn more about Grafbase, I’d recommend reading the documentation. There’s support for OpenID Connect, and more.

Make sure to join the community on Discord to share feedback, ideas, and what you’ve been building.

See you on Discord! ❤️

Build your next commerce store with SvelteKit

Jamie Barton — Tue, 13 Jul 2021 08:56:15 +0000

In this short article we'll explore building a storefront with SvelteKit.

If you're new to Svelte, or SvelteKit, you should take a look at this article by Rich Harris explaining what the deal with SvelteKit is.

SvelteKit boasts a simple setup, run the following to initialize a new project:

npm init svelte@next my-commercejs-storefront
cd my-commercejs-storefront
npm install
npm run dev -- --open

Once your project is up and running, you'll want to install the @chec/commerce.js dependency.

npm install @chec/commerce.js

Then inside of the directory src/lib (you'll need to create it) add the file commerce.js. Here you'll want to instantiate @chec/commerce.js and add your PUBLIC API KEY.

import CommerceSDK from '@chec/commerce.js';

export const client = new CommerceSDK('pk_184625ed86f36703d7d233bcf6d519a4f9398f20048ec');

Storefront Index Page

Then all that's left to do inside of your .svelte files (such as index.svelte) is import the client and call the usual Commerce.js methods to get your products, categories, etc.

If we wanted to get all of our categories and products, it would look something like:

<script context="module">
  import { client } from '$lib/commerce.js';

  export async function load() {
    const { data: categories } = await client.categories.list();
    const { data: products } = await client.products.list();

    return {
      props: {
        categories,
        products
      }
    };
  }
</script>

<script>
  export let categories;
  export let products;
</script>

If you've used Sapper with Svelte before the above will look somewhat familiar, and if you've used other frontend frameworks like Next.js then returning your props will look even more so.

Then using the variables categories and products we'll output the values to a list.

<ul>
  {#each categories as category}
    <li>
      <a rel="prefetch" href="/categories/{category.slug}">{category.name}</a>
    </li>
  {/each}
</ul>

<ul>
  {#each products as product}
    <li>
      <a rel="prefetch" href="/product/{product.permalink}">{category.name}</a>
    </li>
  {/each}
</ul>

Category Pages

Now we'll create the page for each of our categories.

Inside of a new file src/routes/categories/[slug].svelte we'll add the following script module:

<script context="module">
  import { client } from '$lib/commerce.js';

  export async function load({ page }) {
    const { slug } = page?.params;

    const category = await client.categories.retrieve(slug, {
      type: 'slug'
    });

    const { data: products } = await client.products.list({ category_slug: [slug] });

    return {
      props: {
        category,
        products
      }
    };
  }
</script>

<script>
  export let category;
  export let products;
</script>

You'll notice above we're fetching the slug from the page params.

We then use this slug to retrieve the category from Commerce.js:

const category = await client.categories.retrieve(slug, {
  type: 'slug'
});

The same slug is used when fetching products from Commerce.js, but it is used as a filter:

const { data: products } = await client.products.list({ category_slug: [slug] });

Then all that's left to do on this page is return our category.name and list out the products belonging to that category:

<h1>{category.name}</h1>

<ul>
  {#each products as product}
    <li>
      <a rel="prefetch" href="/products/{product.permalink}">{product.name}</a>
    </li>
  {/each}
</ul>

That's it! You'll notice here we're returning a list of links to our products, so we'll create those pages next!

Product Pages

Similar to how we created the individual category pages, we'll do the same for products. But this time we'll call the file [permalink].svelte since we're linking to the product permalink from the index and category pages.

Add the following code to src/routes/products/[permalink].svelte:

<script context="module">
  import { client } from '$lib/commerce.js';

  export async function load({ page }) {
    const { permalink } = page?.params;

    const product = await client.products.retrieve(permalink, {
      type: 'permalink'
    });

    return {
      props: {
        product
      }
    };
  }
</script>

<script>
  export let product;
</script>

<h1>{product.name}</h1>

<p>{product.price.formatted_with_symbol}</p>

That it for our product! You now can link users to your individual product pages 😅

7. Create individual product pages - Create a Commerce.js store with Svelte

Jamie Barton — Sat, 17 Oct 2020 14:27:52 +0000

Now we've individual pages for categories, it's now time to create the important pages for products.

We can do this by creating a new file with the name [permalink].svelte inside the src/routes/products directory.

The file is called [permalink] because we'll be fetching Commerce.js products by their permalink. You could alternatively use the product id, but the permalink when customized is a bit more friendly.

Inside this file we'll make a call to commerce.products.retrieve() and pass into the first argument the permalink (from params), and then in the 2nd argument, we'll tell it the type is permalink.

Once we've retrieved the product by permalink, we'll export the necessary variables, and return the product name, and formatted price to the page.

<script context="module">
  import commerce from "../../lib/commerce.js";

  export async function preload({ params }) {
    const { permalink } = params;

    const product = await commerce.products.retrieve(permalink, {
      type: "permalink",
    });

    return {
      product,
    };
  }
</script>

<script>
  export let product;
</script>

<h1>{product.name}</h1>

<p>{product.price.formatted_with_symbol}</p>

🎉 Great!

You should see after running npm run dev all of what we've built so far at http://localhost:3000.

We'll next explore using Commerce.js to add products to cart, and checkout.