React Query से Mutations
In this page:
const queryClient = useQueryClient();
const mutation = useMutation({
mutationFn: mutationFunction,
onSuccess: () => queryClient.invalidateQueries({ queryKey: ["key"] }),
});
mutation.mutate(variables);Mutations किसलिए हैं
जबकि useQuery data पढ़ना handle करता है, useMutation इसे लिखना handle करता है — server पर कुछ create, update, या delete करना। यह एक mutationFn (actual API call) और एक mutate function के around बना है जिसे आप भेजने वाले data के साथ call करते हैं।
उदाहरण: What Mutations Are For
// Run in your local React project (npm install required)
import { useMutation } from '@tanstack/react-query';
function AddUserForm() {
const mutation = useMutation({
mutationFn: newUser => fetch('/api/users', { method: 'POST', body: JSON.stringify(newUser) }),
});
return <button onClick={() => mutation.mutate({ name: 'Asha' })}>Add User</button>;
}⚠️ This example uses an npm package with no CDN build available here — run this in your local React project.
Mutation के बाद Related Data को Refresh करना
कुछ successfully add, update, या delete करने के बाद, related list (जैसे [users]) के लिए cached query अब stale है। Mutation के onSuccess callback में queryClient.invalidateQueries call करना React Query को उस query refetch करने को कहता है, UI को server से sync रखते हुए।
उदाहरण: Refreshing Related Data After a Mutation
// Run in your local React project (npm install required)
import { useMutation, useQueryClient } from '@tanstack/react-query';
function AddUserForm() {
const queryClient = useQueryClient();
const mutation = useMutation({
mutationFn: newUser => fetch('/api/users', { method: 'POST', body: JSON.stringify(newUser) }),
onSuccess: () => queryClient.invalidateQueries({ queryKey: ['users'] }),
});
return <button onClick={() => mutation.mutate({ name: 'Asha' })}>Add User</button>;
}⚠️ This example uses an npm package with no CDN build available here — run this in your local React project.
UI में Mutation Status दिखाना
useMutation से return होने वाला object isPending, isError, और isSuccess flags include करता है, जो UI को request in flight होने पर एक button disable करने, fail होने पर एक error message दिखाने, या succeed होने पर एक confirmation दिखाने देते हैं — वही shape of feedback जो loading/error states को और जगह चाहिए।
उदाहरण: Showing Mutation Status in the UI
// Run in your local React project (npm install required)
import { useMutation } from '@tanstack/react-query';
function AddUserForm() {
const mutation = useMutation({
mutationFn: newUser => fetch('/api/users', { method: 'POST', body: JSON.stringify(newUser) }),
});
return (
<div>
<button onClick={() => mutation.mutate({ name: 'Asha' })} disabled={mutation.isPending}>
{mutation.isPending ? 'Adding...' : 'Add User'}
</button>
{mutation.isError && <p>Failed to add user</p>}
</div>
);
}⚠️ This example uses an npm package with no CDN build available here — run this in your local React project.
- एक successful mutation के बाद invalidateQueries call करना भूल जाना, stale cached data को displayed छोड़ते हुए।
- Mutation के isPending/isError states handle न करना, एक slow या failed write के दौरान कोई feedback न देते हुए।
- mutate function को गलत argument shape के साथ call करना, जो mutationFn की expectation से match न करे।
- useMutation create/update/delete operations manage करता है, useQuery के read operations के opposed में।
- mutate(variables) call करना उन variables के साथ mutationFn trigger करता है।
- invalidateQueries React Query को बताता है कि एक related query का cached data अब stale है और refetch होना चाहिए।
- Mutation object appropriate UI feedback दिखाने के लिए isPending, isError, और isSuccess expose करता है।
npm install @tanstack/react-query चाहिए — इस sandbox में CDN से उपलब्ध नहीं है।
Chapter Quiz — Complete all 10 topics to unlock
0/10 topics done
Complete these topics first: