Add GraphQL Edge Caching to Storyblok

Add GraphQL Edge Caching to Storyblok

Storyblok is a headless Content Management System (CMS) that allows developers to create, manage, and deliver digital content across multiple channels and platforms.

Boost Storyblok's already fast REST and GraphQL APIs with GraphQL Edge Caching. Benefits include:

  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.

In this guide, we will focus on improving the performance of the GraphQL API by implementing Grafbase's GraphQL Edge Caching on top of the Storyblok GraphQL Content Delivery API.

You should already have a project with Storyblok setup, you can follow their getting started if you haven't yet.

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

npx grafbase init --template graphql-storyblok

This command will generate a new folder grafbase in the root of your project.

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

By default, Grafbase will:

  • Add Storyblok as a data source
  • Cache all queries for 60 seconds
  • Enable public access to the Grafbase Edge Gateway
  • Forward Authorization and Token headers to Storyblok
import { config, connector, graph } from '@grafbase/sdk' const g = graph.Standalone() const storyblok = connector.GraphQL('Storyblok', { url: '', headers: headers => { headers.set('Token', { forward: 'Token' }) headers.set('Version', { forward: 'Version' }) }, }) // Disabling namespace may cause conflicts with other connectors g.datasource(storyblok, { namespace: false }) export default config({ graph: g, cache: { rules: [ { types: ['Query'], maxAge: 60, }, ], }, auth: { rules: rules => { rules.public() }, }, })

If you plan to add other data sources, you should use a namespace to prevent schema conflicts.

If you'd prefer not to pass the Token and Version headers with requests from the client, you can also set the values to use an environment variable stored by Grafbase:

const storyblok = connector.GraphQL('Storyblok', { url: '', headers: headers => { headers.set('Token', g.env('STORYBLOK_TOKEN')) headers.set('Version', g.env('STORYBLOK_VERSION')) }, })

If you don't use header forwarding, make sure to add your STORYBLOK_TOKEN and STORYBLOK_VERSION values to the file .env:

# Only if you set the Token and Version header with a static value # STORYBLOK_TOKEN= # STORYBLOK_VERSION=

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

You can execute any GraphQL query or mutation you normally would with Storyblok using the new endpoint (locally):

Grafbase Pathfinder can be found at where you can explore the Grafbase Edge Gateway API and schema.

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

You can and should use the Grafbase CLI when building locally (or in a branch) to proxy your Storyblok project 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 STORYBLOK_TOKEN and STORYBLOK_VERSION 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 Storyblok API with custom fields in another post.

Get Started

Build your API of the future now.