Add GraphQL Edge Caching to WunderGraph Cosmo

WunderGraph Cosmo is the open-source Apollo GraphOS alternative, available on-prem and in the cloud. Grafbase makes it easy to add GraphQL Edge Caching to the WunderGraph Cosmo router resulting in less server load for your subgraphs and quicker response times globally.

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

npx grafbase init --template graphql-wundergraph-cosmo

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

By default, Grafbase will:

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

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

const g = graph.Standalone()

const cosmo = connector.GraphQL('Cosmo', {
  url: g.env('COSMO_API_URL'),
  headers: headers => {
    headers.set('Authorization', { forward: 'Authorization' })
    headers.introspection('Authorization', `Bearer ${g.env('COSMO_API_TOKEN')}`)
  },
})

// Disabling namespace may cause conflicts with other connectors
g.datasource(cosmo, { namespace: false })

export default config({
  graph: g,
  cache: {
    rules: [
      {
        types: ['Query'],
        maxAge: 60,
        staleWhileRevalidate: 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 cosmo = connector.GraphQL('Cosmo', {
  url: g.env('COSMO_API_URL'),
  headers: headers => {
    headers.set('Authorization', g.env('COSMO_API_TOKEN'))
    headers.introspection('Authorization', `Bearer ${g.env('COSMO_API_TOKEN')}`)
  },
})

Make sure to add your COSMO_API_TOKEN to the file grafbase/.env, you'll need it for introspection, and optionally, Authorization:

COSMO_API_URL=
COSMO_API_TOKEN=

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 Wundergraph Cosmo! 🎉

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 Wundergraph Cosmo Router 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 COSMO_API_URL and COSMO_API_TOKEN when deploying
• 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 Wundergraph Cosmo Router with custom fields, queries and mutations in another post.