Add GraphQL Edge Caching to Dgraph Cloud

Grafbase is the easiest way to extend and cache existing APIs with custom code that lives next to the user at the edge.

If you're using Dgraph for your database you will want to add GraphQL Edge Caching to improve performance and user experience by reducing calls to the origin.

Grafbase makes it very easy to connect the Dgraph GraphQL API to the Grafbase Edge Gateway and enable GraphQL Edge Caching. If you need to extend the Dgraph GraphQL API with your queries, and fields on Dgraph types, you can do that at the edge with Grafbase using Edge Resolvers.

In this guide, we will add GraphQL Edge Caching to Dgraph Cloud. Make sure you have a deployed project to Dgraph Cloud to continue.

Get started locally

Begin by creating a new Grafbase project locally using the CLI:

npx grafbase init --template graphql-dgraph

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

Add Dgraph as a data source
Cache all queries for 60 seconds
Enable public access to the Grafbase Edge Gateway

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

const dgraph = connector.GraphQL({
  url: g.env('DGRAPH_API_URL')
})

g.datasource(dgraph)

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

💡

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

If your Dgraph GraphQL API is protected by an API Key you can add that to the configuration in one of two ways;

Forward a header sent to Grafbase to Dgraph

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

Set a fixed header for auth when sending requests to Dgraph

const dgraph = connector.GraphQL({
  url: g.env('DGRAPH_API_URL'),
  headers: (headers) => {
    headers.set('Authorization', g.env('DGRAPH_API_KEY') })
  }
})

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

DGRAPH_API_URL=

# Only if you set the Authorization header with a static value
# DGRAPH_API_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 Dgraph! 🎉

You can execute any GraphQL query or mutation you normally would with Dgraph using the new endpoint (locally): http://127.0.0.1:4000/graphql).

💡

Grafbase Pathfinder can be found at http://127.0.0.1:4000 where you can explore the Grafbase Edge Gateway API and schema.

💡

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

Deploy to Production

You can and should use the Grafbase CLI when building locally (or in a branch) to proxy your Dgraph instance but you will need to deploy to Grafbase to take advantage of GraphQL Edge Caching.

Follow these steps to deploy to production:

Signup for an account at grafbase.com
Visit grafbase.com/new to create a new project
Connect and deploy your application where the grafbase was added
Make sure to add your DGRAPH_API_URL (and optional DGRAPH_API_KEY) 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/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 Dgraph API with custom fields in another post.