Add GraphQL Edge Caching with Grafbase

Community Guides
1

Hey :wave:

Grafbase offers the simplest approach to creating and deploying your personal GraphQL APIs to the edge. By using the Grafbase Edge Gateway, you can effortlessly link, deploy, and augment new or existing APIs and databases.

As a Strapi user, the Grafbase Edge Cache can be a great boon. By connecting your project’s GraphQL API endpoint to Grafbase, you can enhance the speed and efficiency of applications that rely on Strapi.

This concise guide will help you understand how to connect Strapi to Grafbase on a local environment, and then guide you to deploy it in a production setting.

Furthermore, if you wish to enrich any existing Strapi queries or types with additional fields, Grafbase Edge Resolvers offer an efficient solution.

Working in development

Begin by executing the command below in the root of your project:

npx grafbase init --template graphql-strapi

Next, open the file grafbase/grafbase.config.ts and make any adjustments. By default, Grafbase will:

  • Set maxAge to 60 seconds for any query
  • Set staleWhileRevalidate to 60 seconds

The template comes preconfigured to forward the Authorization header from your client application.

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

const strapi = connector.GraphQL({
  url: g.env('STRAPI_API_URL'),
  headers: (headers) => {
    headers.set('Authorization', { forward: 'Authorization' })
  }
})

g.datasource(strapi, { namespace: 'Strapi' })

export default config({
  schema: g,
	cache: {
    rules: [
      {
        types: ['StrapiQuery'],
        maxAge: 60,
        staleWhileRevalidate: 60
      }
    ]
  }
})

If you’d prefer not to pass the Authorization header with client requests, you can also set the Authorization header to use an environment variable:

const strapi = connector.GraphQL({
  url: g.env('STRAPI_API_URL'),
  headers: (headers) => {
    headers.set('Authorization', g.env('STRAPI_API_KEY') })
  }
})

Now make sure to add your Strapi API URL (and optional API KEY) to grafbase/.env:

STRAPI_API_URL=

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

Finally, run the Grafbase development server by using the command below:

npx grafbase dev

You now have the Grafbase Edge Gateway ready to use! :tada: Now open http://127.0.0.1:4000 and execute any GraphQL query or mutation you would normally with Strapi.

Make sure to commit the grafbase folder with the rest of your application.

Deploy to Production

You can use the Grafbase CLI when building locally to proxy your Strapi API, but you will need to deploy to production to take advantage of caching.

It’s easy to do:

  1. Signup for an account at http://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 STRAPI_API_URL (and optional STRAPI_API_KEY) when deploying
  5. Update your host (Netlify, Vercel, Fly, etc.) with the new GraphQL API endpoint that Grafbase supplied for your new project.

That’s all there is to 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.

In another guide, we’ll learn how to extend the Strapi entities with custom code! :star_struck: