New pattern for query factories

Hi @TkDodo

, I was reading your latest article and I'm very curious about the new pattern you propose at the end of the article. I've been using react query for the past 3 years but I've never used query key factories, I'm 100% aligned with keeping the queryKey and queryFn as closed together as possible.

most of my queries look like

useTickets = ({params, config}) => useQuery({
queryKey: ['tickets', params],
queryFn: () => fetchTickets (params),
...config
})

useTickets = ({params, config}) => useQuery({
queryKey: ['tickets', params],
queryFn: () => fetchTickets (params),
...config
})

useTickets = ({params, config}) => useQuery({
queryKey: ['tickets', params],
queryFn: () => fetchTickets (params),
...config
})

useTickets = ({params, config}) => useQuery({
queryKey: ['tickets', params],
queryFn: () => fetchTickets (params),
...config
})

I'm now starting a new project and I want to adopt a pattern to use consistently. And I'm curious about if I should keep doing like this and what's the best way to use typescript with this type of function signature

could you please take a look at my attached screenshots and tell me if this is a correct implementation of a queryKey factory in your opinion? and can you tell me more if using custom hooks will still be encouraged or are you going to encourage using useQuery directly in the components?

New pattern for query factories

Similar Threads

Similar Threads

Similar Threads