rival-black

Multiple modules - hook factory?

Hey folks! I wanted to ask you if you have any battle tested solutions for a scenario like so. In my app I have many modules - let's say it's about 20 of them. Each module communicates with the corresponding backend module, which typically consists of the same set of enpoints - POST, GET paginated data, GET full list, GET single item, PATCH & DELETE. So for each frontend module I'm creating a bunch of Tanstack Query hooks which end up being quite similar (they accept the same set of parameters but of different types, query keys are obviously different and so on). Is it ok for me to just create all those hooks manually and accept violating the DRY rule, or do you have some tips on how to approach this? Maybe a function that spits out a set of hooks? A class? Can't wait to see your suggestions! Thank you upfront!

9 Replies

rival-blackOP•4y ago

Hey @Maintainer - Query sorry to bother you directly but I'd love to hear your opinion about this 🙏

correct-apricot•4y ago

Hi @Jakub Figlak ! I personally am not usually concerned with making dry code. I don't mind the small amt of boilerplate, especially with custom query hooks. So i much prefer many specific hooks over one hook with with options, parameters, etc. It makes consuming them so much more straightforward. useTodoDetail() vs useDetail(key, {type:'todo'}) Have you looked into the query client config to possibly set up your fetcher/mutate fn as a default globally?

rival-blackOP•4y ago

Hey @babycourageous ! Thank you for your answer. I definitely agree that hooks consumed inside components should be specific, as you've written. I was testing something like this:

export function usePaginatedData<
  ParamsType extends Record<string, TValue>,
  DataType,
>(
  key: string,
  params: ParamsType,
  queryFn: (params: ParamsType) => Promise<TPaginatedData<DataType>>,
) {
  const { setAlert } = useAlertsState()
  const queryClient = useQueryClient()

  return useQuery([key, { ...params }], () => queryFn(params), {
    keepPreviousData: true,
    onSuccess: data => {
      queryClient.setQueryData([key], data.docs)
    },
    onError: (err: ApiError) =>
      setAlert({
        msg: err.response.data.message,
        type: 'error',
      }),
  })
}

export function usePaginatedData<
  ParamsType extends Record<string, TValue>,
  DataType,
>(
  key: string,
  params: ParamsType,
  queryFn: (params: ParamsType) => Promise<TPaginatedData<DataType>>,
) {
  const { setAlert } = useAlertsState()
  const queryClient = useQueryClient()

  return useQuery([key, { ...params }], () => queryFn(params), {
    keepPreviousData: true,
    onSuccess: data => {
      queryClient.setQueryData([key], data.docs)
    },
    onError: (err: ApiError) =>
      setAlert({
        msg: err.response.data.message,
        type: 'error',
      }),
  })
}

and then

export const useNotes = (params: FindAllNotesParams) =>
  usePaginatedData<FindAllNotesParams, NoteDto>(moduleName, params, getNotes)

export const useNotes = (params: FindAllNotesParams) =>
  usePaginatedData<FindAllNotesParams, NoteDto>(moduleName, params, getNotes)

and use useNotes inside components. Or maybe even create a class that creates all hooks I need? What do you think about something like this? Could you please explain a little bit more what you mean by setting up fetcher as a default globally?

correct-apricot•4y ago

oh - just that you can set up a default query function - https://react-query-v3.tanstack.com/guides/default-query-function

Default Query Function

correct-apricot•4y ago

(or https://tanstack.com/query/v4/docs/guides/default-query-function if you are on v4)

Default Query Function | TanStack Query Docs

If you find yourself wishing for whatever reason that you could just share the same query function for your entire app and just use query keys to identify what it should fetch, you can do that by providing a default query function to React Query: `tsx

rival-blackOP•4y ago

Oh I missed that option 🙈 Side question, what do you think about a solution like this https://github.com/scoutmaker/scoutmaker-web-v2/pull/96 ? I have a page file in which I'm calling five hooks and it became hard to read so I created another hook that orchestrates all the other ones and prepares the data I need.

extended-salmon•4y ago

Hi, you could have a look here for an example of how we combine key factories and query defaults => https://codesandbox.io/s/react-query-and-queries-composition-fi882o

GLabat

CodeSandbox

react-query and queries composition - CodeSandbox

Illustrate how queries can be composed into a new one to simplify usage.

extended-salmon•4y ago

As a general thought, I prefer easy-to-read hooks rather than obscure abstractions. So +1 for useTodoDetail() vs useDetail(key, {type:'todo'}). But of course there are no rules here. If you have a lot of entities/modules, either could you have a hook factories or make it be a rule to use useDetail. You could also have a mix of specific vs generic hooks to avoid the hook factories while still minimising the code duplication.

generous-apricot•3y ago

I see that this question was asked 28 days ago, but I'm new to this forum, and was wondering about this too. I also feel like my code is crying out for a factory. But I feel nervous about it because I'm not seeing it done elsewhere. What I'm experimenting with is, I think, a bit different from what you have in mind. Mainly, I have two factory functions for making queries and mutations, respectively. Then I have a file where I define all the queries I need using these factories, and import those queries into my components. Does this make sense? Does the pattern strike you as sensible? Any alternatives?

Gaming

Programming

Multiple modules - hook factory?

Did you find this page helpful?