Add GraphQL Edge Caching to Stripe

Millions of businesses trust Stripe to accept payments. Like every developer product, there are APIs and SDKs you can use to accept payments, create orders, retrieve customers, and more.

Stripe doesn't have a GraphQL API but we can generate one automatically using its OpenAPI spec and add GraphQL Edge Caching using Grafbase.

Get started locally

Begin by executing the command below inside a new or existing project directory:

npx grafbase init --template openapi-stripe

This will generate a new folder grafbase with the file grafbase/config.ts that looks something like this:

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

const stripe = connector.OpenAPI({
  schema:
    'https://raw.githubusercontent.com/stripe/openapi/master/openapi/spec3.json',
  headers: (headers) => {
    headers.set('Authorization', { forward: 'Authorization' })
  },
  transforms: { queryNaming: 'OPERATION_ID' }
})

g.datasource(stripe)

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

This configuration will:

• Add Stripe as a data source

  • Automatically generate a GraphQL schema using the OpenAPI schema

• Cache all queries for 60 seconds

• Enable public access to the Grafbase Edge Gateway

• Forward Authorization header to Fauna

If you'd prefer not to pass the Authorization header with requests from the client, you can also set the Authorization to use an environment variable stored by Grafbase:

const stripe = connector.OpenAPI({
  schema:
    'https://raw.githubusercontent.com/stripe/openapi/master/openapi/spec3.json',
  headers: (headers) => {
    headers.set('Authorization', `Bearer ${g.env('STRIPE_SECRET_KEY')}`)
  },
  transforms: { queryNaming: 'OPERATION_ID' }
})

If you don't use header forwarding, make sure to add your FAUNA_API_KEY to the file grafbase/.env:

# Only if you set the Authorization header with a static value
# STRIPE_SECRET_KEY=

Finally, use the Grafbase CLI to start the development server and automatically generate a GraphQL API for Tinybird:

npx grafbase dev

You now have a GraphQL API running locally that acts as a proxy to Stripe via a custom GraphQL API! 🎉

You can execute any GraphQL query using the new endpoint: http://127.0.0.1:4000/graphql.

Deploy to Production

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

Follow these steps to deploy to production:

1. Signup for an account at grafbase.com

2. Visit grafbase.com/new to create a new project

3. Connect and deploy your application where the grafbase was added

4. Make sure to add your STRIPE_SECRET_KEY when deploying, unless you made it optional by using header forwarding.

5. 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 Stripe API with custom fields in another post.