In this guide, we will focus on adding Vendure as a Grafbase 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.

Get started locally

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,
      },
    ],
  },
})

If you plan to add other data sources, you should enable namespaces to prevent schema conflicts.

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.

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

Deploy to production

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

• Sign up 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.