Selective Invalidation After Updating a Resource

Demonstrate how to selectively invalidate and refetch data for a specific resource after it's been updated, using query keys to target the exact invalidated queries.
import { useMutation, useQueryClient } from 'react-query';

const updateResource = async (resourceData) => {
  // API call to update the resource on the server
  return fetch('/api/resource/' +, {
    method: 'PUT',
    headers: {
      'Content-Type': 'application/json',
    body: JSON.stringify(resourceData),
  }).then(res => res.json());
Defines an asynchronous function updateResource that makes a PUT request to update a resource on the server. This function is intended to be used with a mutation.
const useUpdateResource = () => {
  const queryClient = useQueryClient();
  return useMutation(updateResource, {
    onSuccess: () => {
      // Invalidate and refetch queries with the queryKey 'resources'
Defines a custom hook useUpdateResource that uses the useMutation hook from react-query. It performs the updateResource mutation and, on success, invalidates queries having the queryKey 'resources', causing them to refetch and update the UI accordingly.
// Using the custom hook in a component to update a resource
function UpdateResourceButton({ resourceData }) {
  const { mutate } = useUpdateResource();

  return (
    <button onClick={() => mutate(resourceData)}>
      Update Resource
Implements a React component that uses the useUpdateResource custom hook. It renders a button that, when clicked, triggers the mutation to update the resource and consequently refreshes related queries.