Usage of query-core with Qwik.js

[omerman]

I recently started using Qwik.js. I love Tanstack Query, and decided I wanted to write a little something to handle deduplication and caching.

Since in Qwik the serverside and clientside line is vague to non-existent almost.. I created a shared Fetcher class to be used both for client fetches and for SSR fetches. and created a copy of QueryClient in both the server and client with different defaults(longer caching in the server).
It works perfectly

P.S - If you do make it your own, be sure to add some kind of cache persistor in the Server so that the memory consumption will not be too large, I will implement my own soon and might add it here

If you need something like this, you are more than welcome to make it your own:

import { isServer } from '@builder.io/qwik';
import { QueryClient } from '@tanstack/query-core';

const _72_HOURS = 1000 * 60 * 60 * 72;
const _24_HOURS = 1000 * 60 * 60 * 24;
const _30_MINUTES = 1000 * 60 * 30;
const _10_MINUTES = 1000 * 60 * 10;
export const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      refetchOnWindowFocus: false,
      gcTime: isServer ? _72_HOURS : _30_MINUTES,
      staleTime: isServer ? _24_HOURS : _10_MINUTES,
    },
  },
});

export const myFavoriteTracksFetcher = new Fetcher<MyFavoriteTracksQueryItem[]>(
  'api/me/favorites',
).withAuthRequired();

import { isServer } from '@builder.io/qwik';
import { Cookie } from '@builder.io/qwik-city';
import { secondsToMilliseconds } from 'date-fns';
import { isNil } from 'lodash-es';
import { RequestError } from './errors';
import { queryClient } from './queryClient';
import { stringifyCookies } from './stringifyCookies';

export class Fetcher<
  ResponseData extends GenResponseData,
  Arg = void,
  Catcher = never,
  Data extends ResponseData = ResponseData,
> {
  private catcher?: (err: RequestError) => Catcher;

  private defaults: Omit<RequestInit, 'signal'> = {};
  private isAuthRequired = false;
  private readonly buildPath: (arg: Arg) => string;


  constructor(path: void extends Arg ? string : (arg: Arg) => string) {
    this.buildPath = typeof path === 'function' ? path : () => path;
  }

  withDefaults(defaults: NonNullable<typeof this.defaults>) {
    this.defaults = {
      ...this.defaults,
      headers: { ...this.defaults?.headers, ...defaults.headers },
    };

    return this;
  }

  withAuthRequired() {
    this.isAuthRequired = true;
    return this;
  }

  withCatcher(catcher?: (err: RequestError) => Catcher) {
    this.catcher = catcher;

    return this;
  }

  async fetch(...args: FetchArgs<Arg>) {
    let arg!: Arg;
    let options!: FetcherOptions;

    options = args[0];
    if (args.length === 2) {
      arg = args[1];
    }

    const path = this.buildPath(arg);
    const serverBaseUrl = process.env['PUBLIC_SERVER_SIDE_BASE_URL'] ?? '';
    const baseUrl = path.startsWith('http')
      ? ''
      : `${isServer && serverBaseUrl ? `${serverBaseUrl}/` : '/'}`;
    const absoluteUrl = `${baseUrl}${path}`;
    const isInternalRequest = absoluteUrl.startsWith(serverBaseUrl);

    const headers = options?.headers ?? {};

    const headersObj = Object.entries(headers);
    const queryKey = [
      { path },
      headersObj.length && { path, headers: Object.entries(headers) },
      this.isAuthRequired && { cookie: options.cookie },
    ].filter(Boolean);

    const requestInit = this.buildRequestInit(options, isInternalRequest);

    let dev__queryStateStatus: 'success' | 'pending' | 'error' | undefined;
    let dev__didFetch = false;

    if (process.env.PUBLIC_STAGE === 'development') {
      const queryState = queryClient.getQueryState(queryKey);
      dev__queryStateStatus = queryState?.status;
    }

    return queryClient
      .fetchQuery({
        queryKey,
        gcTime: this.isAuthRequired ? secondsToMilliseconds(30) : undefined,
        queryFn: () => {
          dev__didFetch = true;

          return fetch(absoluteUrl, requestInit)
            .then(async (res) => {
              const data = await this.extractData(arg, res);
              return data;
            })
            .catch(this.catcher);
        },
      })
      .then((res) => {
        this.dev__printQueryState(arg, dev__queryStateStatus, dev__didFetch);

        return res;
      });
  }

  private dev__printQueryState(
    arg: Arg,
    queryStateStatus: 'success' | 'pending' | 'error' | undefined,
    didFetch: boolean,
  ) {
    if (process.env.PUBLIC_STAGE !== 'development') return;

    let fetchText = '';
    if (didFetch) {
      fetchText = queryStateStatus === 'success' ? 'Refetched' : 'Fetched';
    } else {
      fetchText = 'Cached';
    }

    console.log(`${this.buildPath(arg)}::${queryStateStatus}::${fetchText}`);
  }

  private buildRequestInit(opts: FetcherOptions, isInternalRequest: boolean) {
    return {
      ...this.defaults,
      // @ts-ignore
      signal: AbortSignal.any([AbortSignal.timeout(40000), opts.signal]),
      headers: {
        ...(isServer && isInternalRequest
          ? { secret: process.env['API_SECRET']! }
          : {}),
        ...this.defaults?.headers,
        ...(this.isAuthRequired
          ? { Cookie: stringifyCookies(opts.cookie) }
          : {}),
        ...opts?.headers,
      },
    } satisfies RequestInit;
  }

  private async extractData(arg: Arg, response: Response) {
    if (!response.ok) {
      let errInfo: any;
      try {
        const clonedRespone = response.clone();
        errInfo = await clonedRespone.text();
      } catch {
        errInfo = '__clonedRespone.text()__FAILED__';
      }

      if (response.status !== 401 && response.status !== 404) {
        console.error('Request failed', {
          url: safeDecodeURI(this.buildPath(arg)),
          errInfo,
          status: response.status,
        });
      }

      throw new RequestError({
        status: response.status,
        statusText: response.statusText,
      });
    }

    return response.json();
  }
}

function safeDecodeURI(uri: string): string {
  try {
    return decodeURI(uri);
  } catch {
    return uri;
  }
}

type FetcherOptions = {
  headers?: RequestInit['headers'];
  signal: NonNullable<RequestInit['signal']>;
  cookie?: Cookie | string;
};

type FetchArgs<Arg> = Arg extends void
  ? [options: FetcherOptions]
  : [options: FetcherOptions, arg: Arg];

type GenResponseData =
  | object
  | number
  | string;