pollingInterval broken

[mauriceoc]

Hi, I'm trying to get some basic polling working:

const { data, isSuccess } = usePollingQuery('test', { pollingInterval: 3000 });

useEffect(() => {
     console.log('data', data); // I'm assuming it will output with each response
}, [data]);

The network requests are being sent every three seconds and are successful.

My API is returning the same data each time but nothing in the console except for the first time the query is run.

Any tips on how to fix this? I want to output the data for every polling response (shouldn't matter if it's the same data).

It seems like if we add a response transformer and add a timestamp to the response, it will trigger the useEffect. That seems hacky though? I should mention also that there is a providesTags on the API definition.

[markerikson]

@mauriceoc : this sounds like expected behavior to me.

By default, making an API call via fetch or XHR and then parsing the JSON response will result in new object references being created, even if the contents of the response is conceptually the same.

In other words:

const jsonString = '{"a": 1}';
const obj1 = JSON.parse(jsonString);
const obj2 = JSON.parse(jsonString);
console.log(obj1 === obj2) // FALSE, they are two different objects in memory

However, if you have a query that keeps fetching the "same" data, this would create a problem. If we always replaced the existing data entirely, then your component would always re-render every time the polling request came back due to the new references, even though the data was conceptually the same.

So, RTKQ tries to intelligently merge the fetched data into the existing data, and reuses the existing references as much as possible if the contents appear to be the same. That way, your component will only re-render if the contents have meaningfully changed.

Beyond that, I'm not sure what you're trying to accomplish by having a useEffect with console.log(data). What are you trying to check there?

[mauriceoc]

The example is contrived (the API I am working with is somewhat strange - I cannot change it), but I would like to respond to the polling response in the component if the response has a particular payload and is same as previous - two of same in a row.

I would like the component to re-render in this case. The code is more akin to this:

const { data, isSuccess } = usePollingQuery('test', { pollingInterval: 3000 });

const prevRef = useRef(null);
useEffect(() => {
       if(prevRef.current.foobar && data?.foobar) {
               doStuff();
       }

       prevRef.current = data;
}, [data, doStuff]);

So rtk-query is doing a deep comparison on the response preventing re-rendering and will not allow this to be overridden, we need to bust the cache somehow by modifying the response (or implement polling inside the query definition).

[markerikson]

I think the better option is to use the RTK "listener" middleware (either inside a useEffect, or outside the component entirely, depending on what your use case is), have it kick off when it sees this particular endpoint's fulfilled action, and watch for successive requests. Select the latest value for that query, and see if it's the same reference.

• https://redux-toolkit.js.org/api/createListenerMiddleware

[mauriceoc]

Oh that looks interesting, hadn't considered using listeners this way, thanks!