Lots of duplicate network requests -- What am I missing here?

[ghost]

Hello there Tanner.

First off, thank you for the incredible library. I just moved one of our projects at HP 3D software over from redux to react-query. Was able to remove about 6000 lines of code!

Anyways, the reason for this post is to understand what is going on under the covers with the network traffic. I feel like I may have missed a configuration setting or am just not understanding the entire flow. Please note that I have made no changes to the default configuration whatsoever.

Here is what I am seeing in the Network tab in Chrome when loading the page initially:

https://imgur.com/7ZxeNnf

Here is the react-query code:

    const { data: deviceDetailsData } = useQuery(['deviceDetails', deviceId], loadDeviceDetails);
    const { data: recentActivitiesData } = useQuery([deviceDetailsData && 'recentActivities', deviceId], loadRecentActivities);
    const { data: productivityData } = useQuery([deviceDetailsData && 'productivity', deviceId], loadProductivity);
    const { data: recentStatusesData } = useQuery([deviceDetailsData && 'recentStatuses', deviceId], loadRecentStatuses);
    const { data: aboutData } = useQuery([deviceDetailsData && 'about', deviceId], loadAbout);

    const prefetchSupplies = async () => {
        await queryCache.prefetchQuery(['suppliesBuildUnit', deviceId], loadBuildUnit);
        await queryCache.prefetchQuery(['suppliesLamps', deviceId], loadLamps);
        await queryCache.prefetchQuery(['suppliesLampsHistorical', deviceId], loadLampsHistorical);
        await queryCache.prefetchQuery(['suppliesCleaningRoll', deviceId], loadCleaningRoll);
        await queryCache.prefetchQuery(['suppliesCleaningRollHistorical', deviceId], loadCleaningRollHistorical);
        await queryCache.prefetchQuery(['suppliesFilters', deviceId], loadFilters);
        await queryCache.prefetchQuery(['suppliesFiltersHistorical', deviceId], loadFiltersHistorical);
        await queryCache.prefetchQuery(['suppliesPmks', deviceId], loadPmks);
        await queryCache.prefetchQuery(['suppliesPmksHistorical', deviceId], loadPmksHistorical);
        await queryCache.prefetchQuery(['suppliesPrintheads', deviceId], loadPrintheads);
        await queryCache.prefetchQuery(['suppliesPrintheadsHistorical', deviceId], loadPrintheadsHistorical);
    };

You can see that I am getting multiple of the same API calls when there should only be one for each, unless I am missing something.

Please let me know if this is normal and if you could link me to some documentation to understand why this is happening if it is normal.

Thank you for your time!

• Shane

[tannerlinsley]

Hi Shane! I can’t see that screenshot very well so if you could embed it on here that would be great. As for the issue. Let’s work through it step by step. Just to make sure, did you read this section of the docs? https://github.com/tannerlinsley/react-query#defaults-to-keep-in-mind

RQ is pretty aggressive out of the box. The next steps I would like to take is make sure that your query keys are matching up with each other the way you expect them to. Can you download and install the react-query-devtools? Using those, I would like to see a screenshot of your active queries during the fetching of all of these requests. After that, if we still haven’t found the issue, you can jump on my discord server and ping me to set up a screen share.

[t-ashraf]

Adding the link to defaults for newcomers: https://tanstack.com/query/v4/docs/react/guides/important-defaults

[ghost]

@tannerlinsley Thank you so much for the quick response boss! I managed to solve the issue.

I needed to set the following config options:

const useQueryOptions = {
    refetchOnWindowFocus: false,
    staleTime: 300000
};

The refetch was what was getting me. On top of that, we only fetch from our DAL (data access layer) every 5 minutes because we have to wait for a firmware push to that layer before we will have newer data.

So, all is good!

Thanks again!

[tannerlinsley]

You bet!

[ghost]

@tannerlinsley Turns out I am still having issues with this. Would it be possible to jump on discord with you to hash it out when you have time?

[tannerlinsley]

Sure

[ammarRajabA]

It would be interesting and helpful to share the solution here guys :) .. I have similar issue where the useQuery function is being called a lot although I already set :

refetchOnWindowFocus: false,
refetchOnmount: false,
refetchOnReconnect: false,
notifyOnChangeProps: 'tracked',
retry: false,

[TkDodo]

please share a codesandbox link showing your issue