Are concurrent queries via same endpoint possible using useLazyQueryHook in Redux Toolkit

[olikari87]

The problem: When doing multiple requests to the same endpoint (5 per sec), useLazyQueryHook will return a response only with the latest query with status set to 'fulfilled' and response data, while other requests made before are stuck with status 'pending' and without response data.

Desired functionality: The lazy query hook does not overwrite the previous returns (if overwrite is the case) but returns data from each query which can be accessed in a useEffect hook f.ex. Is this possibly not the correct approach for this use case when using RTK?

I have the following endpoint within createAPI...

  getLoggerCheck: builder.query<any, any>({
        query: ({ loggerId }) => ({
            url: '/scan/check',
            method: 'GET',
            params: {
                logger: loggerId,
            }
        }),
        transformResponse(data: any) {
            console.log(data);   // <---- Correct data for each request is logged out here
            return data;
        }
    })

... but when using the generated useLazyGetLoggerCheckQuery hook like so and making approx 5 requests / sec with runLoggerChecks({loggerId: XXXXX}) only the most recent query is returned with data and status 'fulfilled'.

const [runLoggerCheck, loggerCheckResponse] = useLazyGetLoggerCheckQuery();

useEffect(() => {
    console.log(loggerCheckResponse)
}, [loggerCheckResponse]);

[phryneas]

The others should eventually also resolve, but all of them should resolve with the same result, from the first query that was started.

If that is not the case, please create a reproduction, that would be a bug.

But generally: the point of queries is that cache results for the same request are shared. If you want completely independent results for multiple calls with the same argument, you probably should be using a mutation instead.

[olikari87]

Ahh okay I understand.

So how would one go about resolving data from multiple queries to the same endpoint, with different query params and different response from each query, using RTK? Is there any RTK "native" way of doing this?

[phryneas]

Can you please describe what you actually want to do? What is the workflow here?

[olikari87]

Real life situation just for fun: Hardware is being scanned through UI and added to a list, a call is made for each hardware to a Service that runs some checks.

I want to make multiple async requests to the same endpoint with different query params via RTK endpoint & subscribe to the results of each request when they are resolved.

Again, thanks for taking our time to answer me.

[phryneas]

Hmm. The usual "calling React hooks in a loop without violating the rules of hooks" solution:
Keep an array of hardware ids in local component state. Render one child component with a useHardwareScanQuery(id) for each element.

[olikari87]

Okey I feel you. Thanks Phryneas for your help, have a great weekend 🤝

[marcusjwhelan]

@phryneas is there a way to execute these in their individual components without using the lazy version? I want to fire these off for each component. But also need to save their return so as to not make the same request for the same response which might be done several dozen times if I were to simply use the normal query hook. Also coming back to the same page would then refire them all again. So saving their response to state to see if the requests have been saved before to not send out the request again would be beneficial.

So it would have to be something that wouldn't be fired until called, not set directly on the root of the component but in a useEffect

[marcusjwhelan]

Nvm I was able to accomplish this. @olikari87 I was able to sort of do what you are wanting with

const handleExecutionLater = () => {
  dispatch(api.endpoints.get.initiate(arg))
}

[phryneas]

That will create a subscription that will never go away, so your data will stay in the cache forever.

You might need to describe why you are actually doing this - right now my answer would be "copy-paste the useQuery hook 12 times".

[marcusjwhelan]

An input that takes in a list of items from an api. Except that input can be of many different lists all with the same model. To cut down on writing an api endpiont for each list item I made a single endpoint.

The list inputs are many and can be several on each page and different ones and the same ones on other pages. So having it be a useQuery hook is not ideal as I do not want to make the request for the same data if I have already made it. Making so many requests is not a good thing when trying to support high network latency location/devices. So I need a way to store the request data, the RTK api does not allow a way to, as far as I know, to store response data via a key from the same endpoint.

So I store the response data via a key into a slice instead and only make the request to get that key data if it doesn't exist in the slice.

I don't think it is an issue that the cache will be stored forever on that single endpoint for one request because that endpoint will be used again in a matter of minutes and the cache replaced. Also if I refresh the page the cache should be cleared?

[phryneas]

I think you have a very skewed mental model of what is actually happening there, but I can't put my finger on it without a code example of what you are trying.

Nothing you are saying here "RTK Query does not allow" is not possible.

You can have one useQuery hook, use it in 20 different places and you will have 20 different cache entries that will not overwrite each other. And if you call it twice with the same argument it will not make two queries.

I really don't know what is your actual problem. Can you please provide a code example?

[marcusjwhelan]

I see, I went back to test this and can confirm what you say is true. I can use the hook to get the data with several parallel components getting similar data without any of the data colliding and also caching each of the unique requests as well. There is no need for a slice to hold the data to prevent multiple requests of the same data.

I would like to state that I couldn't find this information in the docs, there is also no where that says what I proposed would cause the cache to stick around forever just that it is an option. There is seemingly much more done behind the scenes that is not really stated in the docs for clarification. If it is stated some place that this functionality exists I definitely missed it.