A simple utility for using TanStack Query in Remix v3

remixQuery.ts

function makeQuery(handle: Handle, options: QueryObserverOptions) {
	const observer = new QueryObserver(queryClient, options);
	const unsubscribe = observer.subscribe(() => {
		if (handle.signal.aborted) {
			return unsubscribe();
		}
		handle.update();
	});
	handle.signal.addEventListener("abort", () => unsubscribe(), { once: true });
	observer.refetch();

	return function getData() {
		return observer.getCurrentResult();
	};
}

function DataFetcher(handle: Handle) {
	const getData = makeQuery(handle, {
		queryKey: r.flight.active.getQueryKey(),
	});
	return () => {
		const data = getData();

		if (data.isLoading) return <div>Loading...</div>;
		return <pre>{JSON.stringify(data.data)}</pre>;
	};
}