NMiddleware order matters in express I believe
NtRPC is handling the request before cors even sees it
NHave a read of the tRPC docs for react, and then the react-query docs for more detail
NAh I see you're using it
NI think you need to learn some react fundamentals
NYou should know that anything starting useX is a hook, and cannot be called conditionally
NAlso react query is there to hide away promises, you don't need to wrap it in async
NHave a look at the react-query docs, you need to change your mindset a little but it's much better than calling promises in useEffect as it eliminates a whole load of potential bugs
NUse the enabled option if you want a query to fire conditionally
Non useQuery. Again definitely have a look at the react-query docs directly, tRPC's docs assume a certain level of knowledge in that department
NIt's very very powerful
NOnce it clicks you'll never want to go back 
NAt least their getting started pages
NThose docs are excellent
NtRPC has a standard client you can use, it's just not necessarily recommended in a frontend because react-query solves a lot of frontend problems, but you can use it alongside the react client https://trpc.io/docs/vanilla
The magic of tRPC is making strongly typed API calls without relying on code generation. With full-stack TypeScript projects, you can directly import types from the server into the client! This is a vital part of how tRPC works.
