7

The problem: When doing multiple requests to the same endpoint, 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',
            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]);

enter image description here

Olafur Kari
  • 103
  • 4

0 Answers0