Add GraphQL Edge Caching to Shopify

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!

Benefits include:

1. Speed — Get even faster responses and lessen server load with Grafbase Edge Caching.
2. Flexibility — Combine data from multiple APIs effortlessly using Grafbase Edge Gateway.
3. Savings — Stay within your API limits and save money.
4. Insights — Monitor your data in real-time with Grafbase Analytics.

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.

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

npx grafbase init --template graphql-shopify-storefront

Next, open the file grafbase.config.ts and make any adjustments.

By default, Grafbase 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

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

const g = graph.Standalone()

const shopify = connector.GraphQL('Shopify', {
  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, { namespace: false })

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

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('Shopify', {
  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 .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 (locally): http://127.0.0.1:4000/graphql.

You can and should use the Grafbase CLI when building locally (or in a branch) to proxy your Shopify store but you will need to deploy to Grafbase to take advantage of GraphQL Edge Caching.

Follow these steps to deploy to production:

• Signup for a Grafbase account
• 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.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 API with custom fields in another post.