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 to benefit from:

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.

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

npx grafbase init --template openapi-stripe

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

By default, Grafbase will:

• Add Stripe as a data source
• Cache all queries for 60 seconds
• Enable public access to the Grafbase Edge Gateway
• Forward Authorization header to Stripe

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

const g = graph.Standalone()

const stripe = connector.OpenAPI('Stripe', {
  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)

// Disabling namespace may cause conflicts with other connectors
// g.datasource(stripe, { 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 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('Stripe', {
  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 STRIPE_SECRET_KEY to the file .env:

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

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 Stripe! 🎉

You can execute any GraphQL query 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 Stripe 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 STRIPE_SECRET_KEY when deploying, unless you made it optional
• 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 Stripe API with custom fields in another post.