Support Cloudflare Workers

[bensenescu]

Support Cloudflare Workers by Default

Hello, just writing down this CF workers bug. @KyleAMathews said that this was likely best as a standalone package, but I wanted to share this draft PR fixing it within TanStack DB itself just in case. Hopefully, this could prevent some headaches for Cloudflare users moving forwards.

Happy to chat more about improving my PR / alternative approaches like exporting the lazyInitForCFWorkers from TanStack DB itself instead of my janky package.
bensenescu#2

Problem

When you deploy a code using TanStackDB to Cloudflare Workers, it results in a 500 error due to:

Error: Disallowed operation called within global scope. Asynchronous I/O (ex: fetch() or connect()),
setting a timeout, and generating random values are not allowed within global scope. To fix this error, 
perform this operation within a handler. https://developers.cloudflare.com/workers/runtime-apis/handlers/

Work Arounds

Singleton Pattern

https://discord.com/channels/719702312431386674/1369767025723052134/1418222870752133201

let collectionInstance;

export function getMissionsCollection() {
    if (!collectionInstance) {
        collectionInstance = createCollection(
            queryCollectionOptions({
                queryKey: orpc.missions.list.queryKey(),
                queryFn: () => orpc.missions.list.call(),
                queryClient,
                getKey: (item) => item.id,
            })
        );
    }
    return collectionInstance;
}

// Reset between requests if needed
export function resetCollections() {
    collectionInstance = null;
}

Proxy Pattern

I've made a very small npm package implementing this lazyInit function: https://www.npmjs.com/package/lazy-init-for-cf-workers

Here is the code (60 lines): https://github.com/bensenescu/lazy-init-for-cf-workers/blob/main/src/index.ts

export const myCollection = lazyInitForCFWorkers(() =>
  createCollection(queryCollectionOptions({
    queryKey: ["myData"],
    queryFn: async () => fetchData(),
    // ... other options
  }))
);

Potential Solution

• Use navigator.userAgent to detect if we're in the CF Runtime
  • https://developers.cloudflare.com/workers/runtime-apis/web-standards/#navigatoruseragent
• If CF Runtime, use the proxy pattern when creating the collection in TanstackDB so that people using CF don't run into this.

Here is a draft PR implementing this: bensenescu#2

Unknowns

• I don't know anything about how TanstackDB works with SSR. I've only tested this in projects where we only use TanstackDB client side. We're just hitting this error on Workers due to the collection definitions making its way into the server bundle.