react-query-kit icon indicating copy to clipboard operation
react-query-kit copied to clipboard

Support custom base query hook (Expose createBaseQuery)

Open awhite opened this issue 6 months ago • 3 comments

Summary

I’d like the ability to configure a custom base query hook in place of the default useQuery from @tanstack/react-query. This would allow teams to define shared defaults and behaviors (e.g., auth tokens, retry logic, logging) in a single location and apply them across all queries.

Use Case

In my application, I have a wrapper around useQuery called useFooQuery which sets up some default config values we want to apply globally. I’d like to use this as the base hook for all queries we create.

Ideally, I would be able to do something like:

import { createBaseQuery } from 'react-query-kit';
import { useFooQuery } from './useFooQuery';

export const createFooQuery = (options) => createBaseQuery(options, useFooQuery);

However, createBaseQuery is currently not exported, so I’m unable to use this approach.

Proposed Solution

Expose createBaseQuery from the package so that consumers can create custom query factories using their own base hooks.

Alternatives Considered

  • Wrapping every individual query hook to inject custom defaults, but this adds unnecessary boilerplate and defeats the purpose of react-query-kit’s streamlined DX.
  • Forking the library to expose createBaseQuery, which we’d rather avoid.

Benefits

  • Promotes better abstraction and DRY code
  • Maintains compatibility with react-query-kit’s design while allowing for greater flexibility
  • Empowers teams to enforce consistent behavior across all query hooks

Let me know if this would be feasible or if you’d consider supporting this in the core API. Happy to provide a PR if helpful!

awhite avatar May 13 '25 15:05 awhite

I suppose a possible alternative would be to just use middleware:

export const fooer: Middleware<QueryHook<any, any>> = (useQueryNext) => {
  return (options) => {
    const foo = useFoo()

    return useQueryNext({
      ...options,
      enabled: foo && options.enabled,
    })
  }
}

awhite avatar May 13 '25 15:05 awhite

But I can't figure out how to get createBaseQuery to work with TypeScript if exposed

liaoliao666 avatar May 14 '25 06:05 liaoliao666

Using middleware seems the most idiomatic way to share behaviour between hooks.

denisborovikov avatar May 14 '25 21:05 denisborovikov