other-emerald

React query data lost after running 'navigate(...)'

I have a React web app using react-query and react router. I have a URLs that look like: '[main domain]/pricelists/active' and '[main domain]/pricelists/active/25' where the first loads a lists of price lists and the second loads the pricelists but open a sliding modal displaying the pricelist with that id. My issue is with that second url that opens the modal. If I load that URL directly in the browser, IE typing it in and hitting enter, everything works fine. All the querydata is there and working. However, when I click on a pricelist in the table from the other URL, I am running navigate(...); and then all querydata is lost/missing. I can see in the 'ReactQueryDevtools', that there is no data, it is completely blank. What am I doing wrong here?

3 Replies

other-emeraldOP•10mo ago

To add some more info, in my modal component, towards the top, I do have this code:

const {
        data: quoteList,
        isLoading: gettingQuotes,
        status: quotesStatus
    } = useQuery<
        | {
        tableData: { mainHeader: string; chemicals: { load: string; name: string; quotes: any[] }[] }[];
        editableQuoteData: {
            quoteNo: string;
            altPrice: string;
            load: string;
            category: string;
            chemical: string;
        }[];
        categories: string[];
        chemicals: any[];
        quoteCount: number;
    }
        | undefined
    >({
        queryFn: getQuoteTableDataByPriceListID,
        queryKey: ['quotesByPriceListID', editingPriceList.id],
        enabled: (copying || editing) && !!editingPriceList?.id
    });
    console.log({quoteList});

const {
        data: quoteList,
        isLoading: gettingQuotes,
        status: quotesStatus
    } = useQuery<
        | {
        tableData: { mainHeader: string; chemicals: { load: string; name: string; quotes: any[] }[] }[];
        editableQuoteData: {
            quoteNo: string;
            altPrice: string;
            load: string;
            category: string;
            chemical: string;
        }[];
        categories: string[];
        chemicals: any[];
        quoteCount: number;
    }
        | undefined
    >({
        queryFn: getQuoteTableDataByPriceListID,
        queryKey: ['quotesByPriceListID', editingPriceList.id],
        enabled: (copying || editing) && !!editingPriceList?.id
    });
    console.log({quoteList});

And I do see in the console logs that quoteList is fully populated. I found a "hacky" fix. Instead of navigate(url), I can call history.pushState({}, '', url); to change the URL without actually changing the route, therefore nothing else changes and the query data does not go away. But that feels very dirty to me and I'd have to change all my calls to navigate in that component.

flat-fuchsia•10mo ago

Assuming your using v7 of React Router, navigate is a bit uncommon anyway. Try using Link and NavLinks first. https://reactrouter.com/start/framework/navigating

Navigating

flat-fuchsia•10mo ago

What is calling navigate in your app?

Gaming

Programming

React query data lost after running 'navigate(...)'

Did you find this page helpful?