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: