noble-gold

invalidate data in router context

Hi, I have data loaded and added to the router context to make it available on all pages

beforeLoad: async ({ context: { queryClient } }) => ({
    departments: await queryClient.ensureQueryData(departmentQueryOptions.list),
  }),

beforeLoad: async ({ context: { queryClient } }) => ({
    departments: await queryClient.ensureQueryData(departmentQueryOptions.list),
  }),

There is also a possibility to change that data (like adding a new department or updating an existing one). How can I invalidate the data in the router context? router.invalidate() does not seem to work properly. I only see the new data after a page reload

4 Replies

noble-goldOP•5mo ago

Does anyone maybe have an Idea? This is really holding us back currently

ambitious-aqua•5mo ago

can you please provide a complete minimal example by forking one of the existing examples on stackblitz?

harsh-harlequin•5mo ago

@happyhafer. i believe you need to invalidate the query key for departmentQueryOptions.list too in your case running router.invalidate make queryClient.ensureQueryData run again but it only fetch the data if not already present, if it is (like in your case) it returns from cache given you are already using react-query why not use useSuspenceQuery directly instead of the context? might give more control over granular updates

noble-goldOP•5mo ago

That was actually a very good tip, thanks. Accessing the data not via useRouteContext, but via useSuspenseQuery works perfectly fine. Thanks a lot 🫶

Gaming

Programming

invalidate data in router context

Did you find this page helpful?