Configuring Query Invalidation for Fresh Data

Explain how to configure query invalidation and refetching strategies after data mutations to ensure the UI reflects the most current server state.
import { useMutation, useQueryClient } from 'react-query';

const updateData = async (newData) => {
  // assume this function updates data on the server
  // and returns the updated data
  return fetch('/update-data', {
    method: 'POST',
    body: JSON.stringify(newData),
    headers: {
      'Content-Type': 'application/json'
  }).then(res => res.json());

function MyComponent() {
  const queryClient = useQueryClient();

  const { mutate } = useMutation(updateData, {
    onSuccess: () => {
      // Invalidate and refetch

  const updateHandler = (newData) => {

  return (
    // UI elements here
This code demonstrates how to use useMutation hook from React Query to update data on the server and invalidate a specific query by its key ('dataQueryKey') to refetch fresh data. onSuccess callback of useMutation is used to invalidate the query after the mutation succeeds.