Query invalidation

Using useSubmit instead of a full page reload form submission comes with a subtle problem: Without a full page reload, some of the data in your page may fall out of sync with the server.

The following example will keep showing "Hello Jane Doe" even after you change the user name since the useServerSideQuery hook caches its results:

The solution is to tell to invalidate the query cache. Rakkas allows access to its query client cache via the useQueryClient hook. You can use queryClient.invalidateQueries() with no arguments to invalidate the entire cache. Alternatively you can pass a query key to only invalidate a single query. It also accepts a function that you can use to filter which queries to invalidate.

To fix the previous example, we will give our query a key (userName) and use queryClient.invalidateQueries("userName") to invalidate the query when the form submission completes. useSubmit accepts an option object that can have an onSuccess callback that allows us to do just that: