Lightweight wrapper around RTKQ hook that preserves the ability to provide options

[agusterodin]

I'm trying to wrap an RTKQ hook so that I don't need to retrieve the uid query parameter from the router every time I use it. Unfortunately, all properties disappear from the return type except for refetch.

import { useRouter } from 'next/router'
import { useGetResultsByUidQuery } from 'api/example'

export function useGetResultsQuery(options?: Parameters<typeof useGetResultsByUidQuery>[1]) {
  const { query: queryParameters } = useRouter()
  const queryUid = typeof queryParameters?.uid === 'string' ? queryParameters.uid : ''

  return useGetResultsByUidQuery(queryUid, options)
}

[markerikson]

You may want to type that hook as a TypedUseQuery type. (Which... I don't think we have documented, but is probably mentioned elsewhere in the issues.)

[agusterodin]

Unless I am over-complicating things, I'm not sure how to get TypedUseQuery to work without the massive complexity of trying to gather and provide the 3 generic arguments to it.

---

Not an ideal solution, but the most reasonable thing I can come up with is to manually construct a TypeScript interface that contains all of the options you would pass to a useQuery hook (other than selectFromResult which obviously needs knowledge of the endpoint definition). I can abstract UseQueryOptions out of my file so that is reusable. The return type of this wrapped useQuery hook works fine with this technique!

import { useRouter } from 'next/router'
import { SubscriptionOptions } from '@reduxjs/toolkit/query'
import { useGetEnrichmentStatusesByQueryUidQuery } from 'api/queryResults'

export interface UseQueryOptions extends SubscriptionOptions {
  skip?: boolean
  refetchOnMountOrArgChange?: boolean
}

export function useGetEnrichmentStatusesQuery(options?: UseQueryOptions) {
  const { query: queryParameters } = useRouter()
  const queryUid = typeof queryParameters?.uid === 'string' ? queryParameters.uid : ''

  return useGetEnrichmentStatusesByQueryUidQuery(queryUid, options)
}

[EskiMojo14]

@agusterodin

import { useRouter } from "next/router";
import {
  fetchBaseQuery,
  SubscriptionOptions,
  TypedUseQueryStateOptions,
  TypedUseQueryStateResult,
} from "@reduxjs/toolkit/query/react";
import { useGetEnrichmentStatusesByQueryUidQuery } from "api/queryResults";

// for example - whatever you're using as base query
type BaseQuery = ReturnType<typeof fetchBaseQuery>;
// whatever you passed like getEnrichmentStatusesByQueryUid: build.query<ResultType, QueryArg>({
type ResultType = { foo: string };
type QueryArg = string

export function useGetEnrichmentStatusesQuery<
  SelectedResult extends Record<string, any> = TypedUseQueryStateResult<
    ResultType,
    QueryArg,
    BaseQuery
  >,
>(
  options?: SubscriptionOptions &
    TypedUseQueryStateOptions<ResultType, QueryArg, BaseQuery, SelectedResult>,
) {
  const { query: queryParameters } = useRouter();
  const queryUid =
    typeof queryParameters?.uid === "string" ? queryParameters.uid : "";

  return useGetEnrichmentStatusesByQueryUidQuery(queryUid, options);
}