Project 18: Registration Flow

React Engineer

Builds on these lessons

Mutations Optimistic Updates Secure Api Consumption

Step 1 of 3

Project

useMutation for Writes

Wrap the registration POST request in const { mutate } = useMutation({ mutationFn: registerUser }), and call mutate(formData) on submit. Where useQuery is for READING data, useMutation is the equivalent for WRITES — create, update, delete — with the same loading/error state handling built in.

🎯 Your Task

Please add the exact code shown in the light gray box below to your editor.Do not delete your previous code, just insert these new lines in the correct place!

import { useMutation } from "@tanstack/react-query";

function registerUser(formData) {
  return fetch("/api/register", {
    method: "POST",
    body: JSON.stringify(formData)
  }).then((res) => res.json());
}

export default function RegistrationFlow() {
  const { mutate, isPending } = useMutation({ mutationFn: registerUser });

  function handleSubmit(e) {
    e.preventDefault();
    mutate({ email: "jordan@example.com" });
  }

  return (
    <form onSubmit={handleSubmit}>
      <button type="submit" disabled={isPending}>Create Account</button>
    </form>
  );
}

← Previous Next →