{"id":10270,"date":"2026-07-02T13:21:36","date_gmt":"2026-07-02T18:21:36","guid":{"rendered":"https:\/\/master.dev\/blog\/?p=10270"},"modified":"2026-07-02T13:21:38","modified_gmt":"2026-07-02T18:21:38","slug":"cloudflare-workers-and-hyperdrive-with-tanstack-start","status":"publish","type":"post","link":"https:\/\/master.dev\/blog\/cloudflare-workers-and-hyperdrive-with-tanstack-start\/","title":{"rendered":"Cloudflare Workers and Hyperdrive with TanStack Start"},"content":{"rendered":"\n

Welcome to Part 2 of our series on using Cloudflare for Web Apps (and specifically TanStack Start). In Part 1<\/a>, we covered the absolute basics. We deployed a web app to Cloudflare, saw how our Wrangler file works, set up some secrets, and we saw Cloudflare generate typings to keep TypeScript happy.<\/p>\n\n\n

\n
\n

Article Series<\/h3>\n <\/header>\n
\n
    \n
  1. \n Introduction to Cloudflare Workers\u00a0for Web Apps<\/a>\n <\/li>\n
  2. \n Cloudflare Workers and Hyperdrive with TanStack Start<\/a>\n <\/li>\n <\/ol>\n <\/div>\n<\/div>\n\n\n\n

    Now, we’ll set up a database. We’ll look at Hyperdrive<\/a> and why it’s needed, as well as some potentially counterintuitive ways we need to set up our database object (or any I\/O object). We’ll use TanStack Start specifically here, but these principles apply to any web framework, though some implementation details might differ slightly.<\/p>\n\n\n\n

    Preliminaries<\/h2>\n\n\n\n

    I love Drizzle<\/a> and use it for all my projects. It’s an outstanding, unique ORM that’s essentially a thin TypeScript layer on top of SQL. I’ve written about it here<\/a> and here<\/a>.<\/p>\n\n\n\n

    I’ll be using Postgres, so we’ll also install some utilities.<\/p>\n\n\n

    npm i drizzle-orm@rc drizzle-kit@rc pg @types\/pg<\/code><\/span>Code language:<\/span> Bash<\/span> (<\/span>bash<\/span>)<\/span><\/small><\/pre>\n\n\n
    Next, add a drizzle.config.ts<\/code> file.<\/p>\n\n\n
    import<\/span> { defineConfig } from<\/span> \"drizzle-kit\"<\/span>;\n\nconst<\/span> connectionString = process.env.POSTGRES!;\n\nexport<\/span> default<\/span> defineConfig({\n  dialect<\/span>: \"postgresql\"<\/span>,\n  dbCredentials<\/span>: {\n    url<\/span>: connectionString,\n  },\n  out<\/span>: \".\/src\/drizzle\"<\/span>,\n});<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
    Then run:<\/p>\n\n\n
    npx drizzle-kit pull<\/code><\/span>Code language:<\/span> Bash<\/span> (<\/span>bash<\/span>)<\/span><\/small><\/pre>\n\n\n
    That will generate our Drizzle schema. We won’t cover those specifics here. See the Drizzle posts above if you’re curious, but really you can query your data however you want; for the purposes of this post, it makes no difference which, if any, ORM you use.<\/p>\n\n\n\n\n  
    \n          
    \n                  \"TanStack\n        <\/a>      <\/div>\n    \n    
    \n      \n              
    \n                      TanStack Start & TanStack Query<\/a>\n                  <\/h3>\n      \n      \n              
    \n                      \"Adam\n                    
    \n                          Adam Rackis<\/span>\n                                      Spotify<\/span>\n                      <\/div>\n        <\/div>\n      \n    <\/div>\n  <\/div>\n\n\n\n\n
    The Wrong Way (for Cloudflare)<\/h2>\n\n\n\n
    For now, let’s do something fairly common that usually works well enough. We’ll add a db.ts<\/code> module, with this code<\/p>\n\n\n
    import<\/span> { drizzle } from<\/span> \"drizzle-orm\/node-postgres\"<\/span>;\nimport<\/span> { Pool } from<\/span> \"pg\"<\/span>;\n\nconst<\/span> pool = new<\/span> Pool({\n  connectionString<\/span>: process.env.POSTGRES!,\n});\n\nexport<\/span> const<\/span> db = drizzle({ client<\/span>: pool });<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
    Again, this has nothing to do with Drizzle. Export a connection to your database however you’d like. The issues will be the same.<\/p>\n\n\n\n
    Issue 1: Performance<\/h3>\n\n\n\n
    Remember, Cloudflare workers spin up very quickly, on demand, as needed to serve requests. As these (potentially numerous) workers come into existence, each of them establishing a connection to your database poses two problems.<\/p>\n\n\n\n
    The first is performance. Opening a fresh database connection is a relatively slow operation. We don’t want that happening every time a worker spins up. This is not a concern limited to Cloudflare; any cloud function solution would have the same problem. A web application running atop AWS Lambda would not want to exacerbate existing cold starts by adding TCP database connection overhead, and, of course, low-latency Cloudflare workers would not want to introduce cold-start characteristics in this way.<\/p>\n\n\n\n
    The second is the sheer number of<\/em> connections that would be stood up in this way. Again, this applies to any platform that works via cloud functions. As your app grows in traffic, the number of cloud functions (Cloudflare workers, AWS Lambda, etc) would grow to a large number, as would the number of connections open on your database. And databases always have a limit on the number of connections they support.<\/p>\n\n\n\n
    This is, of course, a solved problem. Solutions like PgBouncer pool pre-warm connections and act as a proxy to your database. Your application connects to PgBouncer, and PgBouncer provides an open connection. Cloudflare provides its own version of this called Hyperdrive, which we’ll look at shortly.<\/p>\n\n\n\n
    Issue 2: Per-Request Cleanup<\/h3>\n\n\n\n
    Here’s this code again:<\/p>\n\n\n
    import<\/span> { drizzle } from<\/span> \"drizzle-orm\/node-postgres\"<\/span>;\nimport<\/span> { Pool } from<\/span> \"pg\"<\/span>;\n\nconst<\/span> pool = new<\/span> Pool({\n  connectionString<\/span>: process.env.POSTGRES!,\n});\n\nexport<\/span> const<\/span> db = drizzle({ client<\/span>: pool });<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
    The second issue with this code is that it violates Cloudflare’s rule on what is allowed to persist between requests. Long-lived I\/O resources such as Node.js connection pools do not fit the Workers execution model and can trigger runtime errors like this<\/p>\n\n\n\n
    \"Cloudflare<\/figure>\n\n\n\n
    Let’s solve both of these problems.<\/p>\n\n\n\n
    Hyperdrive<\/h2>\n\n\n\n
    No matter how<\/em> we create our database object in code, we don’t want to connect directly to our source database; we want to connect to a pre-warmed connection pool. Cloudflare provides one for us called Hyperdrive. To get started, go to the Cloudflare dashboard, and under Storage and databases, find the option for “Postgres & MySQL (Hyperdrive)”.<\/p>\n\n\n
    \n
    \"\"
    Amusingly, the Hyperdrive in the menu option may be truncated with how they display it.<\/figcaption><\/figure>\n<\/div>\n\n\n
    Hit the connect to database button.<\/p>\n\n\n\n
    \"\"<\/figure>\n\n\n\n
    You’ll be greeted with a few options for how to proceed. For this post, I’ll be using PlanetScale<\/a>.<\/p>\n\n\n
    \n
    \"\"<\/figure>\n<\/div>\n\n\n
    Follow the prompts, authenticate if needed, select your database, and most importantly, be sure to fill in your database name; you almost certainly do not want the default value of the postgres<\/code>.<\/p>\n\n\n\n
    \"\"<\/figure>\n\n\n\n
    Once complete, you should be greeted with a new Wrangler entry.<\/p>\n\n\n\n
    \"\"<\/figure>\n\n\n\n
    That’s what mine looks like, and no, there’s nothing secret or private about that data. In fact, you\u2019ll need it in your Wrangler file and to have committed in Git if you want Cloudflare\u2019s GitHub integration to work.<\/p>\n\n\n\n
    Copy that into your Wrangler file.<\/p>\n\n\n
    {\n  \"$schema\"<\/span>: \"node_modules\/wrangler\/config-schema.json\"<\/span>,\n  \"name\"<\/span>: \"fitness-tracker\"<\/span>,\n  \"compatibility_date\"<\/span>: \"2025-09-02\"<\/span>,\n  \"compatibility_flags\"<\/span>: [\"nodejs_compat\"<\/span>],\n  \"main\"<\/span>: \"@tanstack\/react-start\/server-entry\"<\/span>,\n  \"hyperdrive\"<\/span>: [\n    {\n      \"binding\"<\/span>: \"HYPERDRIVE\"<\/span>,\n      \"id\"<\/span>: \"dd0103f82a11410b91c8fb5752050a21\"<\/span>\n    }\n  ],\n  \"observability\"<\/span>: {\n    \"enabled\"<\/span>: true<\/span>\n  },\n  \"upload_source_maps\"<\/span>: true<\/span>\n}<\/code><\/span>Code language:<\/span> JSON \/ JSON with Comments<\/span> (<\/span>json<\/span>)<\/span><\/small><\/pre>\n\n\n
    Now update your typings by running npx wrangler types<\/code>.<\/p>\n\n\n\n
    Connect to Hyperdrive<\/h3>\n\n\n\n
    And now, via your same\u00a0env<\/code>\u00a0object, you can connect to your database through Hyperdrive.<\/p>\n\n\n\n
    \n
    \n
    If you haven’t read Part 1 of this, you can grab the env<\/code> object in a TanStack project with this special import\u00a0<\/p>\n\n\n
    import<\/span> { env } from<\/span> \"cloudflare:workers\"<\/span>;<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre><\/div><\/div>\n<\/div><\/div>\n\n\n
    const<\/span> pool = new<\/span> Pool({\n  connectionString<\/span>: env.HYPERDRIVE.connectionString,\n});<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
    But there’s one more thing to do. When you attempt to run your app, you’ll likely see this error<\/p>\n\n\n\n
    \"\"<\/figure>\n\n\n\n
    To fix this, add this connection string to your dev database with that key to your\u00a0.env<\/code>\u00a0file.<\/p>\n\n\n\n
    CLOUDFLARE_HYPERDRIVE_LOCAL_CONNECTION_STRING_HYPERDRIVE='postgresql:\/\/docker:docker@localhost:5432\/your_db'<\/pre>\n\n\n\n
    Fixing Per-Request Cleanup<\/h2>\n\n\n\n
    Our database connections will be much snappier now. But Cloudflare will still error out since our database object is created and exported by a module. That means it will continue to live between requests.<\/p>\n\n\n\n
    Let’s see how to fix that.<\/p>\n\n\n\n
    What we need is a fresh database connection per request<\/em>. And it turns out TanStack Start has a feature just for that: global request middleware<\/a><\/p>\n\n\n\n
    Note that I’m using the word “connection” loosely here. We’re creating a conceptual “connection” to our database per request, but we’re really connecting through Hyperdrive, which pools and reuses actual database TCP connections between requests. The goal is not to literally create a fresh TCP connection to our database for each request; it’s to avoid long-lived I\/O resources between requests.<\/p>\n\n\n\n
    The focus of this post is Cloudflare, so we’ll breeze through the code; check the docs for more info.<\/p>\n\n\n
    <em>\/\/ src\/start.ts<\/em><\/span>\nimport<\/span> { Pool } from<\/span> \"pg\"<\/span>;\nimport<\/span> { createCsrfMiddleware, createMiddleware, createStart } from<\/span> \"@tanstack\/react-start\"<\/span>;\nimport<\/span> { getDb } from<\/span> \".\/data\/db\"<\/span>;\n\nconst<\/span> globalContextMiddleware = createMiddleware().server(async<\/span> ({ next }) => {\n  try<\/span> {\n    const<\/span> pool = new<\/span> Pool({\n      connectionString: process.env.POSTGRES!,\n    });\n\n    const<\/span> db = getDb(pool);\n\n    return<\/span> next({\n      context: {\n        db,\n      },\n    });\n  } catch<\/span> (error) {\n    console<\/span>.log({ msg: \"Error in root context middleware\"<\/span>, error });\n    throw<\/span> error;\n  }\n});\n\nconst<\/span> csrfMiddleware = createCsrfMiddleware({\n  filter: ctx<\/span> =><\/span> ctx.handlerType === \"serverFn\"<\/span>,\n});\n\nexport<\/span> const<\/span> startInstance = createStart(()<\/span> =><\/span> ({\n  requestMiddleware: [csrfMiddleware, globalContextMiddleware],\n  functionMiddleware: [],\n}));<\/code><\/span>Code language:<\/span> TypeScript<\/span> (<\/span>typescript<\/span>)<\/span><\/small><\/pre>\n\n\n
    This middleware will run once per request<\/em>, which is exactly what we want. We create our database object and then add it to the context.<\/p>\n\n\n
    return<\/span> next({\n  context<\/span>: {\n    db,\n  },\n});<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
    Now you can access the db<\/code> object from any server functions, or server routes (API routes) via the context<\/code> object that’s passed in.<\/p>\n\n\n\n
    \"\"<\/figure>\n\n\n\n
    Odds and Ends<\/h2>\n\n\n\n
    If you’re connecting to a database that’s hosted in a particular region, you’ll almost always want your web app served from the same region. Putting the workers serving your app closer to your users might seem appealing, but that only serves to make the workers further from your database, increasing the latency of your queries and updates, and your app will likely need to make multiple<\/em> requests to your database in the process of serving a request.<\/p>\n\n\n\n
    My PlanetScale database is in AWS’s us-east-1 region, and so I can pin my Cloudflare app to the same region with this entry in my Wrangler file.<\/p>\n\n\n
    \"placement\"<\/span>: {\n  \"region\"<\/span>: \"aws:us-east-1\"<\/span>,\n},<\/code><\/span>Code language:<\/span> JSON \/ JSON with Comments<\/span> (<\/span>json<\/span>)<\/span><\/small><\/pre>\n\n\n
    It can make a large difference. I saw the latency in running a very simple query against a small table explode from about 7ms when placed in the same region as my database, up to over 10X (about 80ms) when placed on the United States West Coast.<\/p>\n\n\n\n
    Concluding Thoughts<\/h2>\n\n\n\n
    I absolutely love Cloudflare’s development platform. Workers are an outstanding, low-latency way to host your web application. I hope this post has provided the tools you need to get your first app up and running there.<\/p>\n\n\n
    \n  
    \n    
    Article Series<\/h3>\n  <\/header>\n  
    \n            
      \n                      
    1. \n              Introduction to Cloudflare Workers\u00a0for Web Apps<\/a>\n            <\/li>\n                      
    2. \n              Cloudflare Workers and Hyperdrive with TanStack Start<\/a>\n            <\/li>\n                  <\/ol>\n        <\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"
      In Part 2 of the series on using Cloudflare with Web Apps, the focus is on setting up a database and addressing key issues like performance and connection management.<\/p>\n","protected":false},"author":21,"featured_media":10206,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_post_was_ever_published":false},"categories":[1],"tags":[334,501,507,240],"class_list":["post-10270","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog-post","tag-cloudflare","tag-cloudflare-workers","tag-hyperdrive","tag-tanstack"],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/master.dev\/blog\/wp-content\/uploads\/2026\/06\/tanstack-workers-1.jpg?fit=2000%2C1200&ssl=1","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/master.dev\/blog\/wp-json\/wp\/v2\/posts\/10270","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/master.dev\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/master.dev\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/master.dev\/blog\/wp-json\/wp\/v2\/users\/21"}],"replies":[{"embeddable":true,"href":"https:\/\/master.dev\/blog\/wp-json\/wp\/v2\/comments?post=10270"}],"version-history":[{"count":15,"href":"https:\/\/master.dev\/blog\/wp-json\/wp\/v2\/posts\/10270\/revisions"}],"predecessor-version":[{"id":10329,"href":"https:\/\/master.dev\/blog\/wp-json\/wp\/v2\/posts\/10270\/revisions\/10329"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/master.dev\/blog\/wp-json\/wp\/v2\/media\/10206"}],"wp:attachment":[{"href":"https:\/\/master.dev\/blog\/wp-json\/wp\/v2\/media?parent=10270"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/master.dev\/blog\/wp-json\/wp\/v2\/categories?post=10270"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/master.dev\/blog\/wp-json\/wp\/v2\/tags?post=10270"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}