Is adding an optional configuration options in custom useQuery hook still discouraged?

[mwskwong]

Saw this discussion #3227. At that time, something like this is discouraged, because of how problematic the TS type can get:

const useUserQuery = (id: number, options?: WhateverType) => useQuery({
  queryKey,
  queryFn: () => fetchUser(id),
  ...options
);

Instead we should only offers a slection of options that we actually want the user to be able to override, e.g.

const useUserQuery = <T = Data["user"]>(options?: {
  select?: (data: Data["user"]) => T;
  onError?: (error: AxiosError) => void;
}) => useQuery({
  queryKey,
  queryFn: () => fetchUser(id),
  ...options 
});

Is it still the case? Or am I better of using the constructXQuery pattern, which allows me to have full access to the options if needed? i.e.

export const constructUserQuery = () => ({
  queryKey: userKeys.current,
  queryFn: async () => {
    // data fetching
  },
  staleTime: 1000 * 60 * 15,
  cacheTime: 1000 * 60 * 20,
});

// in component
const { data } = useQuery({
  ...constructUserQuery(),
  select: (data) => {
    // map data
  }
}

[TkDodo]

my recommendation still stands, not only because of TS, but because it creates low level abstractions that are likely too low-level.

The construct pattern is fine, and we'll provide a queryOptions function in v5 to make this more type-safe

[ArturKustyaev]

provide an example of using the useQuery hook and passing options into it using queryOptions

[TkDodo]

https://tanstack.com/query/v5/docs/react/typescript#typing-query-options

[ArturKustyaev]

I implemented such a system using custom hooks. Defined the main hook options, wrote a basic hook without additional options. In situations where I need additional options, I use the useQuery/useInfiniteQuery hook, pass in the base options I defined earlier, and add the options I need. Are there any other use cases?

type UseGetBranches = Omit<GetBranchesRequest, 'page'>;

// basic options
export const getBranchesInfiniteQueryOptions = ({ companyID, count = BASE_FETCH_COUNT, query }: UseGetBranches) =>
  infiniteQueryOptions({
    queryKey: ['infiniteBranches', { companyID, query }],
    initialPageParam: 1,
    queryFn: ({ pageParam }) =>
      newBranchesApi
        .getBranches({ companyID, page: pageParam, count, query: query || undefined })
        .then((res) => res.data),
    getNextPageParam: (lastPage, allPages) => (lastPage.data.length === count ? allPages.length + 1 : undefined),
  });
  
// basic custom hook without using options
export const useGetBranches = ({ companyID, count = BASE_FETCH_COUNT, query }: UseGetBranches) => {
  return useInfiniteQuery(getBranchesInfiniteQueryOptions({ companyID, count, query }));
};

// using without options
const { data } = useGetBranches({ companyID: 1 });
//        ^? InfiniteData<GetBranchesResponse, unknown> | undefined

// using with options
const { data: data2 } = useInfiniteQuery({
  //             ^? { pageParams: string[]; pages: Branch[]; } | undefined

  // spread base query options
  ...getBranchesInfiniteQueryOptions({ companyID: 1 }),

  // using other options (example)
  select: ({ pageParams, pages }) => ({
    pageParams: pageParams.map((p) => p.toString()),
    pages: pages.flatMap((page) => page.data),
  }),
});

data?.pages.map((p) => p.data);
data2?.pages.map((p) => p.id);