Introducing TypeScript configuration

Grafbase has always provided support for configuration-as-code through GraphQL SDL, allowing developers to extend schemas, configure authentication, permissions, serverless search, edge caching, database models, and more.

The "SDL as configuration" approach often slowed down developers who had to reference the documentation to understand formatting and order of each directive. Additionally, there is a lack of type safety when composing different services and data sources with Grafbase, which can further complicate the development experience.

We are thrilled to introduce the new TypeScript SDK — @grafbase/sdk.

The Grafbase SDK provides full support for all Grafbase features, eliminates the need to deploy or start the local development server to validate configurations, and is part of the Grafbase CLI:

npx grafbase init --config-format typescript

Once a new Grafbase project has been initialized you can now configure your project inside the file grafbase/grafbase.config.ts.

Here's an example that shows how to:

• Connect an API using OpenAPI
• Cache all queries
• Restrict API access to signed in users
• Connect a custom GraphQL mutation resolver

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

const g = graph.Standalone()

const clerk = auth.OpenIDConnect({
  issuer: g.env('ISSUER_URL'),
})

const shopify = connector.GraphQL('Shopify', {
  url: g.env('SHOPIFY_STORE_API_URL'),
  headers: headers => {
    headers.set(
      'X-Shopify-Storefront-Access-Token',
      g.env('SHOPIFY_STOREFRONT_ACCESS_TOKEN'),
    )
  },
})

g.datasource(shopify, { namespace: 'Shopify' })

const input = g.input('AuthInput', { email: g.email(), password: g.string() })

g.mutation('login', {
  args: { input: g.inputRef(input) },
  returns: g.string(),
  resolver: 'login',
})

export default config({
  graph: g,
  cache: {
    rules: [
      {
        maxAge: 60,
        types: 'Query',
      },
    ],
  },
  auth: {
    providers: [clerk],
    rules: rules => {
      rules.private()
    },
  },
})

If you have an existing project, you can install @grafbase/sdk using your Node.js package manager, learn more.

We'd also love to hear any of your feedback and ideas, so join us on Discord.