How use remote functions with singleton classes?

[paulhahayes]

Is it possible or recommended to use remote functions inside a singleton class? For example, I want a shared store that I can use in different components. But I cannot figure out how to achieve this with remote functions and have it be responsive to mutations.

<script lang="ts">
	import { getAllPrinters } from '$lib/services/printer/handler.remote'
</script>

class Printers {
	printers = $derived(await getAllPrinters())

	checkOnline() {
		for (const printer of this.printers) {
			console.log(printer.status)
		}
	}
}
export const printers = new Printers()

This doesn't even compile but this possibly captures what I am trying to achieve.

[phi-bre]

As you noticed already, classes cannot contain async initializers, but there is a synchronous API on remote function queries that should (in theory) work for your use-case:

class Printers {
	printers = $derived(getAllPrinters())

	checkOnline() {
		if (!this.printers.ready) return // ensures .current is not undefined

		for (const printer of this.printers.current) {
			console.log(printer.status)
		}
	}
}

There are synchronous values for:

• .current (which holds the current value of the query)
• .ready (for initial load and with type narrowing to ensure .current is not undefined)
• .loading (also true if currently refreshing and .current still holding the stale previous value)
• .error to get the error if exists

But the next problem you're likely to run into is that remote queries are not allowed to be called outside of a reactive context anymore, so this probably still wouldn't work unless you instantiate the class in a component tree and pass it down to components via context, as singletons are not recommended with SSR.

[paulhahayes]

thanks.