Redux-toolkit: RTK Query: Multiple queries at once

[jonathanschad]

Today I played around a bit with RTK Query and I was wondering if there is a way to create multiple queries at once.

The usecase for our application is the following: We have a list of larger documents(could be easily < 10mb per document) that we dynamically load from an API. These documents are needed in many different places in the application. However, the length of the list is dynamic, which means we don't know how many API requests need to be sent at the time of writing the code. Also combining the individual requests into one large request is unfortunately not possible due to the size of the data.

React-Query offers a seemingly suitable solution for this with the hook useQueries.
Another possibility we have thought about would be to write the loaded data separately into the reduxstore and then subscribe to it using useSelector. However, this does not seem to me to be an acceptable solution, as it also unnecessarily inflates the store.
Hence my question if RTK Query also offers a solution for this problem or what would be the best approach in this case?

[markerikson]

This may not be 100% identical, but there was an SO question earlier today about an infinite scroll pagination scenario where it sounds like they want to keep showing _existing_ data, but also fetch _new_ data:

https://stackoverflow.com/questions/67909356/is-there-any-way-to-fetch-all-the-responses-stored-in-api-slice-rtk-query

[phryneas]

Yeah, useQueries is not really the most apparent use case when designing an API - I think react query also only added that in v3 or so :sweat_smile:

Right now, you would probably need to do the logic by hand, meaning something like

const runningQueries = useRef({})
useEffect(() => {
  for (const [query, arg] of queries) {
    if (!runningQueries.current[query]) {
      runningQueries.current[query] = {}
    }
    if (!runningQueries.current[query][arg]) {
      runningQueries.current[query][arg] = dispatch(api.endpoints[query].invoke(arg)
    }
  }
  for (const [query, args] of Object.entries(runningQueries.current)) {
    for (const [arg, promise] of Object.entries(args)) {
      if (!queries.some(([q,a]) => q == query && a == arg) {
        promise.unsubscribe()
      }
    }
  }
}, queries)

and then something similar with api.endpoint[query].selector.

[phryneas]

For the "infinite scrolling" approach that Mark mentioned, I answered that over in StackOverflow. I don't think that will need a generalized API, as it is quite easy to implement with just three useQuery calls and is easier to tailor to the individual API that way.

[jonathanschad]

Thanks a lot for your help. I really appreciate that. I'll try to incorporate your suggestions into our project tomorrow

[phryneas]

@jonathanschad if you come up with fully runnable code, it would be great if you could share that here with others - mine above is pretty much pseudocode from the back of my head, so there's definitely things to improve on it :)

[jonathanschad]

I have to admit defeat here. I tried converting your code in something usable but I just couldn't get it to work.

Unfortunately, I don't have time to deal with this problem any further. I think for my case it should be enough to manually fetch the data.

But thanks again for the help you guys provided :)

[lamo2k123]

also faced the problem of implementing endless data loading and did not find an opportunity to implement it without crutches. very sad

[markerikson]

@lamo2k123 hey, the library has only been out officially for just over a week :)

If you can show us examples of the specific use case you're trying to solve, we can look at providing answers or improving the API, but just saying "can't do it without crutches, very sad" isn't a response that will help us help you.

[lamo2k123]

Need an analogue useInfiniteQuery https://react-query.tanstack.com/guides/infinite-queries

I saw that now there is TODO on Infinite scrolling.

Upset by the absence of Infinite scrolling

Thanks for what you are doing and for developing the tools.

[markerikson]

@lamo2k123 Lenz showed one possible approach for an infinite query implementation in that Stack Overflow answer:

https://stackoverflow.com/questions/67909356/is-there-any-way-to-fetch-all-the-responses-stored-in-api-slice-rtk-query

Does something like that work for you?

[lamo2k123]

This option is not suitable in my case. I need an honest list of what has been uploaded

[markerikson]

@lamo2k123 can you give more specifics? what do you mean by an "honest list"?

The more details you can provide, the better we can understand what you're trying to do and what might be helpful.

Having said that, I'm going to go ahead and convert this into a discussion thread, which I think will work better.