Router doesn't work with `@tanstack/react-query`?

Expected:

  • ReactQuery successfully caches requests between navigation

Actual:

  • Never caches, only false positives when component doesn’t unmount (in the example, navigating from Todos to Todos/2 causes one query as the first component never unmounts)

Reproduction repo:

I’ve tried various combinations of interop (eg. only bindings, only raw, mixed) to see if that was the issue, but everything works correctly sans the cache. Identical code in regular typescript with react-router works fine. Looking at the docs of react router, it seems their implementation is similar in terms of navigation (push, popState).

My primary use case for Rescript is to gradually adopt it into an existing code base that could use some 'Caml love. This app uses the caching mechanism pretty heavily.

I’m not familiar with the internals of React Query, but there’s really nothing special about the ReScript router, it just listens to URL changes and give you a re-render with the new URL whenever it changes. So it sounds like something else is up.

2 Likes