Add GraphQL Edge Caching to Tinybird

Tinybird is a modern real-time data platform designed specifically for data engineers.

It empowers data teams to effortlessly ingest streaming & batch data, develop data products using standard SQL, and publish the results as high-concurrency, low-latency HTTP APIs.

If you're a Tinybird user though, you're probably wondering how you can add GraphQL Edge Caching to a non-GraphQL API. What you probably didn't know is that Grafbase can automatically create GraphQL APIs for Tinybird using its OpenAPI spec.

As well as automatically creating a GraphQL API from Tinybird's OpenAPI spec, we can also 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.

You'll need your OpenAPI 3.0 API Endpoint from the share docs screen of a pipe, it should look something like this:

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

npx grafbase init --template openapi-tinybird

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

By default, Grafbase will:

• Add Tinybird as a data source
• Automatically generate GraphQL schema/API from OpenAPI schema
• Cache all queries for 60 seconds
• Enable public access to the Grafbase Edge Gateway
• Forward Authorization header to Tinybird

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

const g = graph.Standalone()

const tinybird = connector.OpenAPI('Tinybird', {
  schema: g.env('TINYBIRD_API_SCHEMA'),
  headers: headers => {
    headers.set('Authorization', { forward: 'Authorization' })
  },
  transforms: { queryNaming: 'OPERATION_ID' },
})

g.datasource(tinybird, { 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 tinybird = connector.OpenAPI('Tinybird', {
  schema: g.env('TINYBIRD_API_SCHEMA'),
  headers: headers => {
    headers.set('Authorization', `Bearer ${g.env('TINYBIRD_API_TOKEN')}`)
  },
  transforms: { queryNaming: 'OPERATION_ID' },
})

Now make sure to add your Tinybird API Schema URL (and optional API Token) to .env:

TINYBIRD_API_SCHEMA=

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

You can execute any GraphQL query or mutation you normally would with Tinybird 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 Tinybird Pipes 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 TINYBIRD_API_SCHEMA (and optional TINYBIRD_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 Tinybird API with custom fields in another post.