Cloudflare Workers with Xata

Cloudflare is a content delivery network that optimizes website performance and mitigates security risks for sites. Cloudflare Workers enable you to run code directly on Cloudflare's network to reduce latency and improve performance, and can be used for tasks like customizing web content, handling API requests, or modifying web traffic.

A complete Cloudflare and Xata starter is available in the Xata examples repo on GitHub.

Before you begin

Ensure you install the Xata CLI and authenticate
Ensure you have a basic project with Cloudflare workers running

Install the Xata client

Run the following command in the root directory of your project:

xata init

Accept the default settings during the configuration process. After completion, a .env file will be generated in your app's folder. This file includes the necessary credentials for your Cloudflare Worker to access your database. It should look like this:

.env

XATA_API_KEY=<YOUR_API_KEY_HERE>
XATA_BRANCH=<YOUR_BRANCH_HERE>

A file called .xatarc should also be generated at the project root, with the following contents:

.xatarc

{
  "databaseURL": "<YOUR_DATABASE_URL_HERE>",
  "codegen": {
    "output": "src/xata.ts"
  }
}

Warning: You'll need to move these vars into a file called .dev.vars at your project root for local development. This file enables Cloudflare to access these values when running in development mode. For more information, see Cloudflare's documentation.

You should end up with a .dev.vars file that looks like this at your project root:

.dev.vars

XATA_API_KEY=<YOUR_API_KEY_HERE>
XATA_BRANCH=<YOUR_BRANCH_HERE>
XATA_DATABASE_URL=<YOUR_DATABASE_URL_HERE>

Initialize the Xata client

There are two methods for initializing the Xata client in Cloudflare Workers:

ES modules syntax (recommended): This is the current, recommended method for apps that are being developed or maintained actively.
Service workers syntax (deprecated): This older method is still available but not recommended for new projects.

ES modules syntax (recommended)

src/index.ts

import { XataClient } from './xata';

export interface Env {
  XATA_BRANCH: string;
  XATA_API_KEY: string;
  XATA_DATABASE_URL: string;
}

export default {
  async fetch(request: Request, env: Env, ctx: ExecutionContext): Promise<Response> {
    const xata = new XataClient({
      apiKey: env.XATA_API_KEY,
      branch: env.XATA_BRANCH,
      databaseURL: env.XATA_DATABASE_URL
    });
    // Note that the table name "Posts" may vary
    // depending on the shape of your schema
    const posts = await xata.db.Posts.getAll();
    return new Response(`Total Posts: ${posts.length}`);
  }
};

Service workers syntax (deprecated)

src/index.ts

import { XataClient } from './xata';

async function handler(request: Request) {
  const xata = new XataClient({
    apiKey: XATA_API_KEY,
    branch: XATA_BRANCH,
    databaseURL: XATA_DATABASE_URL
  });
  // Note that the table name "Posts" may vary
  // depending on the shape of your schema
  const posts = await xata.db.Posts.getAll();
  return new Response(`Total Posts: ${posts.length}`);
}

// Initialize Worker
addEventListener('fetch', (event) => {
  event.respondWith(handler(event.request));
});

Environment variables

Environment variables keep API keys and sensitive data safe, allowing you to easily manage and change app settings.

To add environment variables to a remotely deployed Worker, you have two options:

Use the one-click guided workflow provided in the Cloudflare dashboard (recommended).
Alternatively, you can set the variables manually via the Cloudflare dashboard.

One click guided workflow (recommended)

To integrate a Cloudflare Worker with an existing Xata database, follow these steps in the Cloudflare dashboard:

Navigate to the Cloudflare dashboard.
Click Workers & Pages > Overview
Choose a Worker from your Cloudflare account to integrate with.
Click Integrations.
Select the Xata card and click Add Integration. You're redirected to the "Add Xata to Worker" flow.
Guided Xata Cloudflare integration
Follow the flow to grant permissions, authorize Cloudflare, and configure your secrets. Choose a Xata workspace to connect with, and select the desired database and branch.
Click Add Integration.

The secrets are added to the environment variables of the Worker. Your endpoint response should be available remotely at <YOUR_WORKER>.<YOUR_SUBDOMAIN>.workers.dev.

Manually adding environment variables

Follow Cloudflare's docs for manually adding environment variables via the dashboard.

Adding environment variables manually

Create a new Cloudflare app (optional)

Hello world example