Custom Hook

[hossein-jorfi]

Hi, i wrote a custom hook for my workplace project and i want to ask is this pattern ok to use?

the point for this hook:
you dont need to create or write a fetcher function(even if you have a shared one you need to import it every time)
you just pass the query key and this hook generate the api url

import useAuthStore from 'src/store/auth/useAuthStore';
import { api } from './api';
import {
  queryOptions,
  useQuery,
  UseQueryOptions,
} from '@tanstack/react-query';

type Method = 'get' | 'post' | 'put' | 'patch' | 'delete';

interface Options extends UseQueryOptions {}

interface BackendResponse<T = unknown> {
  Result: T;
  Error: unknown;
  Success: boolean;
}

export const useFetchData = <T,>(givenOptions: Options, method?: Method) => {
  const accessToken = useAuthStore((state) => state.tokens)?.accessToken;
  const { queryKey } = givenOptions;
  const options = queryOptions({
    queryKey,
    queryFn: async () => {
      return (await api(accessToken || '')[method || 'get'](queryKey.join('/')))
        .data as BackendResponse<T>;
    },
  });

  return useQuery(options);
};

[TkDodo]

I see a couple of issues with this hook:

• you pass in givenOptions, but they don’t become part of the result. That means I an pass in an additional option like staleTime, and it will be ignored

• low-level abstractions like this are usually much more complex because UseQueryOptions has 4 generics on type-level. Without those, you can e.g. never use the select option

• it also means you can never get type inference, as you always have to provide the type for the result on every call-side: useFetchData<Array<Todo>>({ queryKey: ['api', 'todos'] })

• the method isn’t part of the key, so changing methods from the call-side will result in different requests that will share the same cache, and can lead to stale closures.

• same stale closure problem with accessToken. You likely don’t want to reactively depend on it, but you need to imperatively read it from inside the queryFn. If this is a zustand store, change it to: const accessToken = useAuthStore.getState().tokens?.accessToken inside the queryFn to avoid stale closures and always read the latest token

---

My general advice is to not build such low level abstractions, unless you’re absolutely sure you understand the trade-offs. If you build them, build them in a way that they only return queryOptions. That way, you can call useQuery(myQueryOptions(...)) on the call-sides and can also pass additional options. Also, try to build a type-safe mapping between an allowed url and what it can return to get some type inference of your return type.

And please use our eslint-plugin to avoid stale closure issues.

[hossein-jorfi]

thank you 🙏