Make isServer configurable

[Maxim-Mazurok]

I'm using TanStack query with @vue/reactivity in a NodeJS environment, but isServer checks like this

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

Line 77 in a1b1279

export const isServer = typeof window === 'undefined' || 'Deno' in globalThis

are preventing me from using some features, like refetchInterval + refetchIntervalInBackground.

I loved the simplicity and declarativeness of Vue+Query in FE, and I brought this into NodeJS.

I'm using this simple wrapper:

import {
  type QueryClient,
  QueryObserver,
  type QueryObserverOptions,
} from "@tanstack/query-core";
import { ref, shallowRef } from "@vue/reactivity";

export function useCoreQuery<
  TData = unknown,
  TError = unknown,
>(
  client: QueryClient,
  options: QueryObserverOptions<TData, TError>,
) {
  const data = shallowRef<TData | undefined>(undefined);
  const error = ref<TError | null>(null);
  const status = ref<"success" | "error" | "pending">(
    "pending",
  );
  const isFetching = ref(false);

  const observer = new QueryObserver<TData, TError>(
    client,
    options,
  );

  const unsubscribe = observer.subscribe((result) => {
    data.value = result.data;
    error.value = result.error;
    status.value = result.status;
    isFetching.value = result.isFetching;
  });

  const refetch = () => observer.refetch();
  const stop = () => {
    unsubscribe();
  };

  return { data, error, status, isFetching, refetch, stop };
}

Defining my queries:

import { getSeries } from "../../../weather/nyc/trade/node/gamma/client";
import { queryClient } from "./client";
import { useCoreQuery } from "./vue-query";

export function useSeriesQuery(
  parameters: Parameters<typeof getSeries>[0],
) {
  return useCoreQuery(queryClient, {
    queryKey: ["series", parameters],
    queryFn: () => {
      console.log("Fetching series with", parameters);
      return getSeries(parameters);
    },
    refetchInterval: 3000,
    refetchIntervalInBackground: true,
    staleTime: 3000,
  });
}

and then using them:

import { computed } from "@vue/reactivity";
import { config } from "../../config";
import { useSeriesQuery } from "../query/get-series";

const series = useSeriesQuery({ slug: config.SERIES_SLUG });

const activeEvents = computed(() => {
  return series.data.value
    ?.flatMap((series) => series.events)
    .filter(
      (event) =>
        event.active === true && event.closed === false,
    );
});

The problem that I'm running into is that if I want to use automatic refresh - it doesn't work. Because it doesn't pass isServer checks. If I make this function always return false - then it works fine.

I undersatnd this was added to detect SSR, but perhaps we could make this configurable flag, and rename to isServerSSR or something? Because in my case I'm "server", but have nothing to do with SSR, just want to enjoy the awesome reactivity of vue retriability of query :)

Thank you!

[Maxim-Mazurok]

This is my patch with a workaround (hardcode isServer=false):

diff --git a/node_modules/@tanstack/query-core/build/modern/utils.cjs b/node_modules/@tanstack/query-core/build/modern/utils.cjs
index 9475320..3199e53 100644
--- a/node_modules/@tanstack/query-core/build/modern/utils.cjs
+++ b/node_modules/@tanstack/query-core/build/modern/utils.cjs
@@ -46,7 +46,7 @@ __export(utils_exports, {
   timeUntilStale: () => timeUntilStale
 });
 module.exports = __toCommonJS(utils_exports);
-var isServer = typeof window === "undefined" || "Deno" in globalThis;
+var isServer = false;
 function noop() {
 }
 function functionalUpdate(updater, input) {