React-query data doesn't stay in cache

[GuidovdRiet]

For a migration project, I receive the entire page data as a string. This string is parsed in the setInnerHTML() function. Based on the switch of the location an entirely new page-data-string is fetched and inserted into the page. I run into two problems while fetching the data:

When I navigate quickly from one page to another the data loaded doesn't correspond with the current location. The data loaded is still from a location that I visited 1-2 steps before.

Page data is not cached. At every switch to a new route, the page just fetches the new data. Only the data of the currently visible page is displayed in the ReactQueryDevtools. No other pages are stored in the cache.

const location = useLocation();
const [pageData, setPageData] = useState<PageDataType | undefined>();
const legacyContentRef = useRef<HTMLDivElement>(null);

const { isLoading, data, refetch } = useQuery('page', () =>
  fetch(`${window.location.href}?legacy=1`, {
    headers: {
      'X-Requested-With': 'xmlhttprequest',
      'Content-Type': 'application/json',
    },
  }).then((res) => res.json())
);

useEffect(() => {
  refetch();
}, [location]);

useEffect(() => {
  if (data && legacyContentRef) {
    const legacyHTML = data.content;
    setInnerHTML(legacyContentRef.current, legacyHTML);

    setPageData(data);
  }
}, [data]);

return (
 <Container>
   <div ref={legacyContentRef} id="legacy_content" />
 </Container>
);

[TkDodo]

can you put that in a codesandbox and share it with us maybe, I don't quite grasp it yet :)

there are a couple of things that I would probably do a bit differently, like adding location to the query-key to trigger a refetch instead of manually refetching in an effect

[GuidovdRiet]

When I use the above suggestion (make use of the onSuccess function property) every page load triggers a new fetch. No cached data is used. When I use my initial setup including the right key, cached data is used correctly.

[TkDodo]

if you have a codesandbox showing the behaviour I'm happy to look at it.

[GuidovdRiet]

Thank you! I created a Codesandbox:

https://codesandbox.io/s/react-query-data-fetching-page-string-byx0m

When you switch/navigate to another page the data doesn't seem to load instantly (a bit hard to notice since I don't use an external API)

[TkDodo]

right, I think I got it now :)

so I think the issue is that react will re-render the page, but because you actually set some external content via setInnerHTML, react is not aware of that and it will then be thrown away, which means you will only see the result once the request comes back, thus not utilizing the cache.

so I think in this case, running the effect is actually better! I added a little simulated timeout and a loading indicator, I think this works quite well: https://codesandbox.io/s/react-query-data-fetching-page-string-forked-oj0cs

alternatively, you can use dangerouslySetInnerHTML on the div with the data from react-query. hope that helps!

[GuidovdRiet]

@TkDodo Thank you for the fast reply and the new insight!