How to fix useMutation only works inside a component in React

// ❌ WRONG - calling in utility function
// utils/api.ts
export function createUser(data: UserData) {
  const mutation = useMutation({ // Error: can't call hook here
    mutationFn: (userData: UserData) => fetch('/api/users', {
      method: 'POST',
      body: JSON.stringify(userData)
    })
  });
  return mutation.mutate(data);
}

// ✅ CORRECT - calling in component
// components/UserForm.tsx
import { useMutation } from '@tanstack/react-query';

function UserForm() {
  const mutation = useMutation({
    mutationFn: (userData: UserData) => fetch('/api/users', {
      method: 'POST',
      body: JSON.stringify(userData)
    })
  });

  const handleSubmit = (data: UserData) => {
    mutation.mutate(data);
  };

  return (
    <form onSubmit={(e) => {
      e.preventDefault();
      handleSubmit(formData);
    }}>
      {/* form fields */}
    </form>
  );
}

// hooks/useCreateUser.ts
import { useMutation, useQueryClient } from '@tanstack/react-query';

interface UserData {
  name: string;
  email: string;
}

export function useCreateUser() {
  const queryClient = useQueryClient();

  return useMutation({
    mutationFn: async (userData: UserData) => {
      const response = await fetch('/api/users', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(userData)
      });

      if (!response.ok) {
        throw new Error('Failed to create user');
      }

      return response.json();
    },
    onSuccess: () => {
      // Invalidate and refetch queries after successful mutation
      queryClient.invalidateQueries({ queryKey: ['users'] });
    }
  });
}

// Usage in any component
function UserForm() {
  const createUser = useCreateUser();

  const handleSubmit = (data: UserData) => {
    createUser.mutate(data, {
      onSuccess: () => {
        console.log('User created!');
      }
    });
  };

  return (/* form JSX */);
}

// utils/api.ts
// For non-React contexts, don't use React Query
export async function createUser(data: UserData) {
  const response = await fetch('/api/users', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(data)
  });

  if (!response.ok) {
    throw new Error('Failed to create user');
  }

  return response.json();
}

// Then in your component, you can wrap this if needed:
function UserForm() {
  const queryClient = useQueryClient();

  const mutation = useMutation({
    mutationFn: createUser,
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['users'] });
    }
  });

  return (/* form JSX */);
}

// ❌ WRONG - conditional hook call
function MyComponent({ enableMutation }: { enableMutation: boolean }) {
  if (enableMutation) {
    const mutation = useMutation({ /* ... */ }); // Breaks Rules of Hooks
  }

  return <div>...</div>;
}

// ✅ CORRECT - always call hook, conditionally use it
function MyComponent({ enableMutation }: { enableMutation: boolean }) {
  const mutation = useMutation({ /* ... */ });

  const handleAction = () => {
    if (enableMutation) {
      mutation.mutate(data);
    }
  };

  return <button onClick={handleAction}>Submit</button>;
}

// ❌ WRONG - hook in loop
function BatchProcessor({ items }: { items: Item[] }) {
  items.forEach(item => {
    const mutation = useMutation({ /* ... */ }); // Error!
  });
}

// ✅ CORRECT - single hook, loop in the mutation logic
function BatchProcessor({ items }: { items: Item[] }) {
  const mutation = useMutation({
    mutationFn: async (items: Item[]) => {
      return Promise.all(
        items.map(item => processItem(item))
      );
    }
  });

  const handleProcess = () => {
    mutation.mutate(items);
  };

  return <button onClick={handleProcess}>Process All</button>;
}