Add GraphQL Edge Caching to Vendure

Vendure is an open-source platform that gives you unparalleled flexibility to build any commerce application.

Together with Grafbase we can extend and join other APIs so data can be fetched from multiple sources in one GraphQL request. In this guide, we will focus on adding Vendure as a data source and enabling GraphQL Edge Caching to improve commerce experiences as well as:

1. Speed — Get globally fast response times and reduce server load with Edge Caching.
2. Flexibility — Combine data from multiple APIs effortlessly using Connectors.
3. Savings — Stay within your API limits and save money.
4. Insights — Monitor your API in real-time with Grafbase Analytics.

Begin by executing the following command inside a new or existing project's directory:

npx grafbase@latest init --template graphql-vendure

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

By default, Grafbase will:

• Add Vendure as a data source
• Cache all queries for 60 seconds
• Enable public access to your GraphQL API

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

const g = graph.Standalone()

const vendureUrl =
  process.env.VENDURE_GRAPHQL_API_URL || 'https://demo.vendure.io/shop-api'

const vendure = connector.GraphQL('Vendure', {
  url: vendureUrl,
})

g.datasource(vendure, { namespace: false })

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

The configuration above uses the environment variable VENDURE_GRAPHQL_API_URL. Make sure to create the file .env with the correct value:

# VENDURE_GRAPHQL_API_URL=

Finally, start the Grafbase development server by running the command below:

npx grafbase@latest dev

You now have a GraphQL API running locally that sits in front of your Vendure API! 🎉

You can execute any GraphQL query or mutation you normally would with Vendure using your local endpoint: http://127.0.0.1:4000/graphql.

Follow these steps to deploy your GraphQL API to production using the Grafbase CLI:

• Signup for a Grafbase account
• Create a new project
• Connect and deploy your application where the grafbase was added
• Make sure to add your VENDURE_GRAPHQL_API_URL environment variables when deploying
• Update your host (Netlify, Vercel, Fly.io, etc.) with the new GraphQL API endpoint that Grafbase supplied for your new project.

That's it! Your customers will now experience faster load times which translates to higher conversions.

Grafbase automatically deploys a new version of your API 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.