Enhance your tanstack/query keys with Proxy

Original post Treat it as an extension of the iconic blog post Effective react query keys . If you already use a similar structure (scope, keys, hooks) and have one shared context like shop in every key, this post is for you. Managing query keys As your application grows, you have to think about some design decisions. One of them can be managing your query keys in Tanstack Query . Recently I encountered this situation at work. I had a facade for all react-query hooks and used the strategy from Effective react query keys , so I felt pretty safe with my design decisions. It looked something like this: export function useQueryWithLocation < TQueryFnData = unknown , TErrorType = ErrorType , TSelectData = TQueryFnData , > ( queryKey : (( shop : string ) => QueryKey ) | QueryKey , queryFn : ( shop : string , context : QueryFunctionContext , ) => Promise < TQueryFnData > , options : Omit < UseQueryOptions < TQueryFnData , TErrorType , TSelectData > , " queryKey " | " queryFn " > & StatusHandl