React-query and support for useQueries

[IanDuncanson]

Is there built in support for the useQueries hook, rather than useQuery with jotai/query? I couldn’t see it. We have a fairly complex use case where the result of several queries (they are actually subscriptions, like a websocket or a streaming grpc connection) need to be transformed, possibly using some combination of optics and/or selectors before passing the result to the UI components.

Thanks for the awesome library by the way, the combination of jotai and react-query is very nice indeed

[dai-shi]

I assumed useQueries is provided in RQ to avoid violating the rules of hooks.
Jotai atoms don't have such rules, so we can compose atoms.

const queryAtom1 = atomWithQuery(...)
const queryAtom2 = atomWithQuery(...)
const queriesAtom = atom((get) => [get(queryAtom1), get(queryAtom2)]) // or whatever shape. can make it writable too.

This feels more minimalistic.
Does this fill your needs?
(I'm not strongly against providing atomWithQueries, if it gives better DX.)

cc @aulneau

[IanDuncanson]

Actually, yes, you could be right. Our solution is very dynamic, meaning the actual queries created and the data transformations used on the results of those queries (the number of them and their parameters) is not known at build time, it is actually created dynamically using the results of other queries, but I think a combination of atomWithQuery creators, a sprinkling of some sort of selector atoms to transform the results, and then on to the aggregator result atom (your queriesAtom above) will work. Thanks for the quick response!

[aulneau]

Yeah I would echo what @dai-shi said -- you realistically should not be using any of the hooks that react-query exports (aside from maybe mutation related hooks) when using jotai query atoms. The big difference between using standard react-query versus using it in jotai is with RQ you are bound to using them in the context of hooks. With jotai, atoms become queries and thus you can get a much higher degree of composability. I often will use many query atoms to derive some new state, whereas when i was using the react-query hooks, it was much harder to achieve the same outcome.

Hope this helps!

[IanDuncanson]

Thanks for the additional detail @aulneau . Are there any examples kicking around of using jotai/query in anger? The examples on the website are good for a very simple use case, but was wondering if you know of any GitHub or other OSS projects that use it a bit more heavily, particularly ones that may involve some transformation of the data shape post query - selector based derived data in redux terms I guess.

[aulneau]

sure! i maintain this library that i use in most of my projects, https://github.com/fungible-systems/jotai-query-toolkit, and then additionally i am one of the main engineers working on this cryptocurrency wallet https://github.com/blockstack/stacks-wallet-web which uses jotai/query heavily