[UI v2] feat: Use queryOptions API to define queries

[devinvillarosa]

What does this PR do and why?

This PR wraps queryKey and queryFn objects using the queryOptions API.
Opting to use the queryOptions wrapper due to its Typescript benefits (see attachment).
Additionally, all tanstack router + query uses queryOptions in their latest documentation examples

Overall, by using the queryOptions wrapper, our codebase knows what the expected return type is based on the query keys provided in the queryClient

And a good blog read: https://tkdodo.eu/blog/the-query-options-api

(Without the wrapper, TS assumes any type that is associated with the provided queryKey. With the wrapper, TS magically 🧙 knows what the expected type is for this cache)

Screen.Recording.2024-11-27.at.9.19.29.AM.mov

Checklist

• This pull request references any related issue by including "closes <link to issue>"
  • If no issue exists and your change is not a small fix, please create an issue first.
• If this pull request adds new functionality, it includes unit tests that cover the changes
• If this pull request removes docs files, it includes redirect settings in mint.json.
• If this pull request adds functions or classes, it includes helpful docstrings.

Related to #15512

[desertaxle]

✨