Add GraphQL Edge Caching to Shopify's Storefront API

Shopify has taken over the world of commerce but some would say their headless commerce journey is just getting started with the release of Hydrogen and Remix acquisition.

Shopify provides a blazing-fast API but what if we could make it faster, and add custom logic at the edge by extending the Shopify Storefront GraphQL API?

We can do just that with Grafbase!

In this guide, we will add Shopify as a data source to the Grafbase Edge Gateway where we can later add other APIs and extend the schema with custom code.

💡

If you don't yet have a Shopify store you can explore the test GraphQL API and schema.

Get started locally

Inside a new or existing Remix, Hydrogen or custom application run the following:

npx grafbase init --template graphql-shopify-storefront

💡

This command will generate a new folder grafbase in the root of your project.

Open the file grafbase/grafbase.config.ts to review the configuration, it should look something like this:

import { g, connector, config } from '@grafbase/sdk'

const shopify = connector.GraphQL({
  url: `https://${g.env('SHOPIFY_STORE_NAME')}.myshopify.com/api/2023-04/graphql.json`,
  headers: (headers) => {
    headers.set('X-Shopify-Storefront-Access-Token', {
      forward: "X-Shopify-Storefront-Access-Token"
    })
  }
})

g.datasource(shopify)

export default config({
  schema: g,
  cache: {
    rules: [
      {
        types: ['Query'],
        maxAge: 60
      }
    ]
  },
  auth: {
    rules: (rules) => {
      rules.public()
    }
  }
})

By default, the configuration above will:

Adds Shopify as a data source
Cache all queries for 60 seconds
Enable public access to the Grafbase Edge Gateway
Forward X-Shopify-Storefront-Access-Token header to Shopify

💡

If you plan to add other data sources, you should use a namespace to prevent schema conflicts.

If you'd prefer not to pass the X-Shopify-Storefront-Access-Token header with requests from the client, you can also set the X-Shopify-Storefront-Access-Token to be an environment variable stored by Grafbase:

const shopify = connector.GraphQL({
  url: `https://${g.env('SHOPIFY_STORE_NAME')}.myshopify.com/api/2023-04/graphql.json`,
  headers: (headers) => {
    headers.set(
      'X-Shopify-Storefront-Access-Token',
      `Bearer ${g.env('SHOPIFY_STOREFRONT_ACCESS_TOKEN')}`
    )
  }
})

Now make sure to add your Shopify Store Name (and optional Access Token) to grafbase/.env:

SHOPIFY_STORE_NAME=

# Only if you set the X-Shopify-Storefront-Access-Token header with a static value
# SHOPIFY_STOREFRONT_ACCESS_TOKEN=

Finally, run the Grafbase development server by using the command below:

npx grafbase dev

You now have a GraphQL API running locally that acts as a proxy to Shopify! 🎉

You can execute any GraphQL query or mutation you normally would with Shopify using the new endpoint: http://127.0.0.1:4000/graphql.

💡

Make sure you update any queries to use the namespace shopify if you kept that inside the configuration.

Grafbase Pathfinder can be found at http://127.0.0.1:4000 where you can explore the Grafbase Edge Gateway API and schema.

💡

Make sure to commit the grafbase folder with the rest of your application.

Deploy to Production

You can continue to use the Grafbase CLI when building locally to proxy the Shopify Storefront API but you will need to deploy to production to take advantage of GraphQL Edge Caching.

Follow these steps to deploy to production:

Signup for an account at grafbase.com
Visit grafbase.com/new to create a new project
Connect and deploy your application where the grafbase was added
Make sure to add your SHOPIFY_STORE_NAME (and optional SHOPIFY_STOREFRONT_ACCESS_TOKEN) when deploying
Update your host (Netlify, Vercel, Fly, etc.) with the new GraphQL API endpoint that Grafbase supplied for your new project.

That's it!

Grafbase is programmed to autonomously deploy a fresh gateway each time it identifies a change to grafbase/grafbase.config.ts. Consequently, if you need to adjust any cache settings, including parameters like maxAge, staleWhileRevalidate, and mutationInvalidation, you’re free to do so.

Grafbase will handle the rest of the process seamlessly. We'll explore extending the Shopify Storefront API with custom fields in another post.