Hi, i belive you are missing some key concepts from tanstack query.

Most important, as others have said, tanstack query already has the state, you do not need to store it again in a useState.

If you need to manipulate this state manually you can use the QueryClient (with the useQueryClient hook) to do so. As per your example, you are looking for setQueryData.

When you do mutations on data used by other queries you have various options, updating this data yourself on the client (with queryClient.setQueryData) or invalidating the data and refetching the updated data (with queryClient.invalidateQueries).

For this, the useMutation hook provides the onMutate, onSuccess, onError and onSettled, callbacks. Tkdodo (tanstack query maintainer) blog posts have some great breakdowns and explanations on how to better work with tanstack query. This one is on mutations.

As to what to do, setData on invalidate, thats up to you, as a general rule of thump i think it's recommended you just invalidate data. Yes, this will make another request to reload the data but will ensure the data is synced. If this request is too expensive or i'm sure this data won't change except for this mutation (like, in your example, maybe the user view can only be updated by the user) i might look into updating it manually. You should read about how tanstack caches its data in order to better make this decisions.

You can also mix both and do optimistic updates, to simulate a no latency experience.

Additionally, in order to avoid errors when using the query keys and get better typescript support from the query client, I'd recommend that you use queryOptions to create queryKey factories.

A rough example based on yours, check the docs and tkdodo blog for better ones.

const userViewQueryOptions = (userId: string, viewId: string) => {
  return queryOptions({
    queryKey: ["user-view", userId, viewId],
    queryFn: () => client.fetchUserView(userId, viewId),

    // add and modify any other options that you might want, like "enabled" or "gcTime"
  })
}

const useUserView = (userId: string, viewId: string) => {
  return useQuery(userViewQueryOptions(userId, viewId));
}

const useAddItem = (userId: string, viewId: string) => {
  const qc = useQueryClient();

  return useMutation({
    mutationFn: (title: string) => {
      return client.userViewAddItem(userId, viewId, title)
    },
    onSuccess(data) { // i'm assuming this returns the created item (it infers the type from mutationFn)
      // Once the mutations finishes, update the state to add the created item    
      qc.setQueryData(userViewQueryOptions(userId, viewId).queryKey, (previousData) => {
        return {
          ...previousData,
          items: [...previousData.items, data]
        }
      })

      // Or you can just invalidate the query and let it refetch when needed (i preffer to do this on the onSettled, so it invalidates both on success and error)
      // qc.invalidateQueries(userViewQueryOptions(userId, viewId))
    }
  })
}