Do we have any library to help write default query function in a nice way?

[bglgwyng]

I prefer writing a single default query function that handles the entire set of queries to writing each single query function for each query each time.
Fortunately, I found that react-query provide a way to do what I want.
https://react-query.tanstack.com/guides/default-query-function
I tried this option and it worked well, however, the default query function I wrote contains repeating if-else statements for matching query keys.

The code was like this.

const queryFn = ({ queryKey })=> {
  if (queryKey[0] === 'user') {
    // ...
  } else if (queryKey[0] === 'post') {
    // ...
  } else {
    // ...
  }
}

I think I can write a small utility function that helps make this code better by separating the matching part and the fetching part.

switch-case syntax is not enough. Query keys can be more complex.

But before doing so, I want to know if someone has already made a good solution because the problem seems quite common to me.

[TkDodo]

I think the default query function shines when the queryKey basically only gets an already pre-built url passed in, like in the docs. For anything else, I likely wouldn't use it, as I don't really see the advantage of having big switches inside one queryFn over having each query make its own network request.

That being said, the middle ground would likely be utilizing queryClient.setQueryDefaults to set a queryFn per query key "group", something like:

queryClient.setQueryDefaults(['user'], { queryFn: ({ queryKey: [_, params] }) => fetchUser(params) }
queryClient.setQueryDefaults(['post'], { queryFn: ({ queryKey: [_, params] }) => fetchPosts(params) }

the key ['user', { id: 1 }] would trigger the first fn, while ['post', { id: 2 }] would get the second