[Background] service worker environment with QueryObservers

[ElGrecode]

I'm exploring using the core Query objects in a Chrome Extension environment. One of the nice features of a Chrome Extension is that comes with a sandboxed background service worker. This service worker has access to its own slice of private storage that's functionally equivalent to local storage.

I've gotten a lot of the code to get this up and running:

• Defined my own storagePersister using createAsyncStoragePersister to feed into chrome's local storage
• Created a QueryClient
• Created a QueryObserver that caches on a queryKey and fetches using a queryFn

The problem is that I can't get a QueryObserver to refetch on an interval. This limitation makes it so that my background service worker can not actually manage refetching natively. The piece of code that prevents this is:

query/packages/query-core/src/queryObserver.ts

Lines 353 to 375 in f6eeab0

	private updateRefetchInterval(nextInterval: number | false): void {
	this.clearRefetchInterval()
	this.currentRefetchInterval = nextInterval
	if (
	isServer ||
	this.options.enabled === false ||
	!isValidTimeout(this.currentRefetchInterval) ||
	this.currentRefetchInterval === 0
	) {
	return
	}
	this.refetchIntervalId = setInterval(() => {
	if (
	this.options.refetchIntervalInBackground ||
	focusManager.isFocused()
	) {
	this.executeFetch()
	}
	}, this.currentRefetchInterval)
	}

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

   ...
   this.refetchIntervalId = setInterval(

isServer is imported from core utils and its check is just typeof window === 'undefined'. Based on how transpilation needs to happen, this can't be redefined at runtime. My assumption is that the code does this because later we use [global].setInterval and assume we must have a window to do this. In a background service worker environment however they have the same setInterval but it lives on global object self i.e. self.setInterval or plain setInterval.

Since I'm new to this library I'm wondering if there are any other considerations about being in a browser environment that this library relies on? If not, can we be more specific about global object feature detection so that QueryObservers can live in background service workers?

Code proposal for a simple fix here would be:

typeof setInterval !== 'function'

[TkDodo]

yes, good catch. we only check for setInterval because it shouldn't run on the server. The server check is pretty basic. Feel free to change this specific check to check if setInterval is defined. not sure if typeof setInterval is enough, maybe it needs typeof globalThis.setInterval or something?

[ElGrecode]

Awesome! Thanks for the response @TkDodo

Quick question before I make a PR. It seems like we want this behavior to be excluded from server functionality.

It sounds like the proposal then changes to updating our concept of isServer but still ensuring that non-server environments with setInterval can invoke an interval (such as a background service worker)

[TkDodo]

No, I think we can decouple setInterval calls from isServer checks. None if this code runs on the server anyways, because subscriptions are only created on the client (they run in effects / useSyncExternalStore, so not on the server)

[thianphat]

@ElGrecode Hi, have you managed to share a single cache between the background script, popup, and content script in a chrome extension?

Thanks!