Using Tanstack Start with Cloudflare Workers D1 bindings triggers refresh

[GarrisonBates]

I'm running into a tricky issue using Cloudflare Workers / Tanstack Start.

I've set up my bindings as outlined in Cloudflare's docs:

// https://developers.cloudflare.com/workers/framework-guides/web-apps/tanstack/

let cachedEnv: Env | null = null
console.log('SSR: ', typeof window === 'undefined')

// This gets called once at startup when running locally
const initDevEnv = async () => {
  const { getPlatformProxy } = await import('wrangler')
  const proxy = await getPlatformProxy()
  cachedEnv = proxy.env as unknown as Env
}

if (import.meta.env.DEV) {
  await initDevEnv()
}

/**
 * Will only work when being accessed on the server. Obviously, CF bindings are not available in the browser.
 * @returns
 */
export function getBindings(): Env {
  if (import.meta.env.DEV) {
    if (!cachedEnv) {
      throw new Error(
        'Dev bindings not initialized yet. Call initDevEnv() first.',
      )
    }
    return cachedEnv
  }

  return process.env as unknown as Env
}

So now I can access the D1 instance at getBindings().db.

I create the DB in db/db.ts:

import { getBindings } from '@/utils/bindings'
import { drizzle } from 'drizzle-orm/d1'

export const db = drizzle(getBindings().db)

But any time I await a call to db.query... within my serverFn, it triggers the client to reload upon completion of the serverFn. It prints to the console:
Navigated to http://localhost:3000/admin/login

Which is the same page I was on before. I'm at a loss as to why this could be happening. I've verified that it's an issue with the D1 object specifically, since calling getBindings().db.exec(<sql statement>) triggers the same behavior. Whereas creating a local SQLite Drizzle DB and querying it does not.

Does anyone here have experience using D1 with tanstack start or an explanation as to why this is happening? To my understanding everything in the handler should (and does, based on my logging) execute on the server. So then, what could be triggering a refresh / navigation?

I can repro if necessary but I figure it can't hurt to go ahead and ask and see if anyone has run into this before sinking time into that.

[GarrisonBates]

Finally figured this one out. Had to update my vite config to ignore the DB file. Writes to the local DB were triggering HMR or whatever, causing the behavior:

import tailwindcss from '@tailwindcss/vite'
import { tanstackStart } from '@tanstack/react-start/plugin/vite'
import { defineConfig } from 'vite'
import tsConfigPaths from 'vite-tsconfig-paths'

export default defineConfig({
  server: {
    port: 3000,
    watch: {
      // Ignore wrangler files, namely local D1 SQLite DB. Otherwise these trigger reload when written to:
      ignored: ['**/.wrangler/**'],
    },
  },
  plugins: [
    tsConfigPaths({
      projects: ['./tsconfig.json'],
    }),
    tanstackStart({
      target: 'cloudflare-module',
      spa: {
        enabled: true,
      },
    }),
    tailwindcss(),
  ],
})