Loading demo data into the query cache
For a project I am working on we have a desktop app (building using web tech) and a landing page website. We embed the desktop app into the landing page as an example for users looking at our product. The desktop app is built using React Query for data fetching. My goal is to use React Query to populate some placeholder data for when we show it on the landing page. I was able to load the example data into the query cache fairly easily using the
queryClient.setQueryData(...) function but I am having a problem preventing RQ from running the queryFn. When I do either queryClient.setDefaultOptions({ queries: { enabled: false } }); or queryClient.setDefaultOptions({ queries: { refetchOnMount: false } }); the onSuccess function is never executed in my components which causes them to not function correctly. This behaviour makes sense but is there a way I can make the onSuccess callback run without executing the queryFn? TLDR; don't run the queryFn but run the onSuccess function if the cache is already populated for the specific query key.1 Reply
optimistic-gold•4y ago
What about a dedicated key part « landingPage: true » that you could use within your queryFn to return the data for your landing page usecase? A bit intrusive in the queryFn but I doubt onSuccess is called if enabled is false