state/invalidate-after-mutation

Dlaczego

A cache does not know that the server changed. After "Add todo" succeeds, the list query still holds the old array until something refetches it, so the person sees their action "not work" and clicks again, creating a duplicate.

Poprawka

In onSuccess (or onSettled), call queryClient.invalidateQueries({ queryKey: ['todos'] }) with a key prefix that covers every affected list and detail; or write the returned entity into the cache with setQueryData when the response holds it. With SWR, call mutate(key). For instant feedback, use an optimistic update with a rollback in onError. Review every mutation for the queries it touches; key factories make the prefixes easy to find.

Przykłady

// bad
const add = useMutation({ mutationFn: addTodo })
// good
const add = useMutation({
  mutationFn: addTodo,
  onSuccess: () => queryClient.invalidateQueries({ queryKey: ['todos'] }),
})

Źródła

• TanStack Query docs, Invalidations from Mutations
• SWR docs, Mutation and revalidation (source in the vercel/swr-site repository)

Przeczytaj w terminalu

npx github:dawidolko/frontend-skills explain state/invalidate-after-mutation