kevinkaK
tRPC3y ago
4 replies
kevinka

how can I globally set a "middleware" callback for all onErrors on my React Query calls?

this is a little specific but Im struggling on it

Im using the TRPC server as a BFF for my backend and for every call on the client I'm sending a token so backend can authenticate it, when the token is not valid anymore api return status code 403 (forbidden).

what I want to do in my FE is that every onError call I check the status to see if it is forbidden and if it is I will redirect the user and do some stuff (like remove the token from storage and redirect)

since Im using ReactQuery I know that where I instantiate the QueryClient I can pass some default options and there's a callback for onError, but I cannot follow this way cause its on the top of the application and the rest "arent loaded" such as the router cause its bellow the QueryClient provider, so I can not access the Navigator from react router dom because it dont exist on that scope.

I think what I can do is maybe impossible, but Im asking that because I would like suggestion for what I can do instead
16b3ca99-d2a2-4a26-8831-741933ddbe42.png
Was this page helpful?