---
title: 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:

<CodeViewer
  name="guide-samples"
  openFiles={["src/routes/query-invalidation/broken.page.tsx"]}
  url="/query-invalidation/broken"
/>

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:

<CodeViewer
  name="guide-samples"
  openFiles={["src/routes/query-invalidation/fixed.page.tsx"]}
  url="/query-invalidation/fixed"
/>
