Fetch Runtimes

The default @ts-rest/serverless/fetch handler is able to handle and route requests for any runtime that follows the WinterCG Minimum Common Web Platform API.

This includes but is not limited to:

• Cloudflare Workers
• Netlify Functions
• Vercel Functions

Platform Context

Some platforms provide additional context arguments that you may want to pass to your handler functions. You need to first instantiate a router object with the correct context type, and then pass it with that type to the fetchRequestHandler function.

import { fetchRequestHandler, tsr } from '@ts-rest/serverless/fetch';
import { contract } from './contract';

export const router = tsr
  .platformContext<{ customContext: PlatformContext }>()
  .router(contract, {
    getPost: async ({ params: { id } }, { customContext }) => {
      console.log(platformContext);
      return {
        status: 200,
        body: {
          id: id,
          title: 'Hello, World!',
        },
      };
    },
  });

Handler Examples

Cloudflare Workers

import type { Request as WorkerRequest, ExecutionContext, KVNamespace } from '@cloudflare/workers-types/experimental';
import { fetchRequestHandler, tsr } from '@ts-rest/serverless/fetch';
import { contract } from './contract';

interface Env {
  MY_KV_NAMESPACE: KVNamespace;
}

const router = tsr
  .platformContext<{
    workerRequest: WorkerRequest;
    workerEnv: Env;
    workerContext: ExecutionContext
  }>()
  .router(contract, {
    getPost: async ({ params: { id } }, { workerRequest, workerEnv, workerContext }) => {
      return {
        status: 200,
        body: {
          id: id,
          title: await workerEnv.MY_KV_NAMESPACE.get(`post_${id}`),
          country: workerRequest.cf?.country,
        },
      };
    },
  });

export default {
  async fetch(request: Request, env: Env, ctx: ExecutionContext): Promise<Response> {
    return fetchRequestHandler({
      request,
      contract,
      router,
      platformContext: {
        workerRequest: request as unknown as WorkerRequest,
        workerEnv: env,
        workerContext: ctx,
      },
    });
  },
};

Netlify Functions

import type { Context } from '@netlify/functions';
import { fetchRequestHandler, tsr } from '@ts-rest/serverless/fetch';
import { contract } from './contract';

const router = tsr
  .platformContext<{ netlifyContext: Context }>()
  .router(contract, {
    getPost: async ({ params: { id } }, { netlifyContext }) => {
      return {
        status: 200,
        body: {
          id: id,
          title: 'Hello, World!',
          ip: netlifyContext.ip,
        },
      };
    },
  });

export default async (request: Request, netlifyContext: Context) => {
  return fetchRequestHandler({
    request,
    contract,
    router,
    platformContext: {
      netlifyContext,
    },
  });
}

Vercel Functions

import type { RequestContext } from '@vercel/edge';
import { fetchRequestHandler, tsr } from '@ts-rest/serverless/fetch';
import { contract } from './contract';

const router = tsr
  .platformContext<{ vercelContext: RequestContext }>()
  .router(contract, {
    getPost: async ({ params: { id } }, { vercelContext }) => {
      return {
        status: 200,
        body: {
          id: id,
          title: 'Hello, World!',
        },
      };
    },
  });

const handler = async (request: Request, vercelContext: RequestContext) => {
  return fetchRequestHandler({
    request,
    contract,
    router,
    platformContext: {
      vercelContext,
    },
  });
};

export {
  handler as GET,
  handler as POST,
  handler as PUT,
  handler as PATCH,
  handler as DELETE,
};