#Tanstack DB doesn't work in chrome/vscode extensions or service workers due to bad IsServer Check

14 messages · Page 1 of 1 (latest)

proper gate
#
createCollection(queryCollectionOptions({
        queryClient: queryClient,
        refetchInterval: 1000,
        startSync: true,
        staleTime: 1000,
        syncMode: "eager",
        queryKey: queryKey,
        queryFn: async ({client}) => {
            logDebug(`♻️ Refreshing data for collection ${queryKey.join(",")}`);
            const response = await githubClient.conditionalRequest(apiCall, apiParams)
            // Indicates no changes to the API, so we should return the existing data to indicate no changes.
            if (!response) {
                logDebug(`🎯 Cache hit for collection ${queryKey.join(",")}`);
                return client.getQueryData<TSelected[]>(queryKey) ?? [] as TSelected[];
            }

            // If the response is a single object, return it as an array
            logDebug(`✨ Changes detected for collection ${queryKey.join(",")}`);

            // FIXME: Generalize
            const result = selector(response);
            return result
        },
        getKey: (i) => (i as any)[primaryKey],
    }))

So this is my collection, and I have also subscribed to it using subscribeChanges. The first run kicks off, and toArrayWhenReady works just fine. However, I never see it refectch on either the refetchInterval or staletime. I added startSync and syncMode: eager just to see if that would help but it doesn't.

The only thing I have for a workaround is add an interval:

this.refresher = setInterval(() => {
  defaultQueryClient.invalidateQueries({queryKey}, { cancelRefetch: false, throwOnError: true });
}, 1000);

and then it works kinda sorta like I expect

Is this a bug or am I missing something fundamental? I haven't added a liveQuery on top of it, I assumed the subscribeChanges would be sufficient, but even then it shouldn't matter?

blazing crag
#

OK, here's what I found after thorough research:

Root cause: TanStack Query's QueryObserver.#updateRefetchInterval() has a hard guard:

if (isServer || ...) { return }

where isServer = typeof window === 'undefined' || 'Deno' in globalThis. In a VS Code extension (Node.js), window is undefined so the refetch interval timer is never created.

TanStack Query's own docs: The recommended non-browser setup (e.g., React Native guide) uses focusManager.setFocused() and onlineManager.setOnline(). But those don't help here — the isServer guard fires before the focusManager.isFocused() check, so it blocks entirely.

Upstream status: This is acknowledged as a limitation in TanStack/query Discussion #4018. Maintainer TkDodo said the isServer check should be decoupled from setInterval availability, but no fix has landed — still present on main.

Given this, the proper fix should be at the QueryClient configuration level where queryCollectionOptions creates the QueryObserver. Since isServer is a module-level constant we can import from @tanstack/query-core, the cleanest approach is: when isServer && refetchInterval is configured, set refetchIntervalInBackground: true and manage a simple interval ourselves using observer.refetch() — the public API TanStack Query provides for exactly this purpose.

Should I proceed with that approach, or would you prefer a different direction (e.g., contributing the fix upstream to @tanstack/query-core first)?

proper gate
#

Nice sleuthing! I'll defer to what you think is best, since I have a sufficient workaround with invalidatequeries in a setinterval at the moment.

#

Should I add something to globalThis to "make it work" as a better workaround in the meantine?

blazing crag
#

yeah that could work — it does seem wrong basically or at least should be configurable so hacking back the behavior you want seems fine

proper gate
#

I'm writing it up as an issue into tanstack query

#

and will link it to an issue in DB just so anyone having the same issue is aware.

#

Thanks for your help!

#

FWIW I tried setting a globalThis.window and it didn't fix it

proper gate
#

Tanstack DB doesn't work in chrome/vscode due to bad IsServer Check

#

Tanstack DB doesn't work in chrome/vscode extensions due to bad IsServer Check

#

Tanstack DB doesn't work in chrome/vscode extensions or service workers due to bad IsServer Check

proper gate
#

@blazing crag I hotpatched out the isServer references and now it works fine, good enough for me! Hopefully it gets fixed upstream