Synchronize Cached Data After Mutations

export type TaskStatus = 'open' | 'done';
export type TaskFilter = 'all' | 'open' | 'done';

export type Task = {
  id: string;
  title: string;
  status: TaskStatus;
};

export type TaskDraft = Pick<Task, 'title' | 'status'>;
export type UpdateTaskInput = TaskDraft & { id: string };

import type {
  Task,
  TaskFilter,
  UpdateTaskInput,
} from './types';

let adapterStore: Task[] = [
  { id: 't1', title: 'Review navigation', status: 'open' },
  { id: 't2', title: 'Update help text', status: 'done' },
];

let demoFailures = { writes: false, reads: false };

export function setDemoFailures(next: {
  writes: boolean;
  reads: boolean;
}) {
  demoFailures = { ...next };
}

function delay(ms: number, signal?: AbortSignal): Promise<void> {
  if (signal?.aborted) {
    return Promise.reject(new DOMException('Read aborted', 'AbortError'));
  }

  return new Promise((resolve, reject) => {
    const abort = () => {
      window.clearTimeout(timer);
      reject(new DOMException('Read aborted', 'AbortError'));
    };
    const timer = window.setTimeout(() => {
      signal?.removeEventListener('abort', abort);
      resolve();
    }, ms);
    signal?.addEventListener('abort', abort, { once: true });
  });
}

function copyTask(task: Task): Task {
  return { ...task };
}

export async function getTasks(
  status: TaskFilter,
  signal?: AbortSignal,
): Promise<Task[]> {
  await delay(400, signal);
  if (demoFailures.reads) {
    throw new Error('The in-memory adapter rejected this read.');
  }

  const tasks = status === 'all'
    ? adapterStore
    : adapterStore.filter((task) => task.status === status);

  return tasks.map(copyTask);
}

export async function getTask(
  id: string,
  signal?: AbortSignal,
): Promise<Task> {
  await delay(400, signal);
  if (demoFailures.reads) {
    throw new Error('The in-memory adapter rejected this read.');
  }

  const task = adapterStore.find((entry) => entry.id === id);
  if (!task) {
    throw new Error(`Task ${id} was not found.`);
  }

  return copyTask(task);
}

export async function updateTask(input: UpdateTaskInput): Promise<Task> {
  await delay(400);
  if (demoFailures.writes) {
    throw new Error('The in-memory adapter rejected this write.');
  }
  if (input.title.trim().length === 0) {
    throw new Error('Task title is required.');
  }
  if (input.status !== 'open' && input.status !== 'done') {
    throw new Error('Task status is invalid.');
  }

  const index = adapterStore.findIndex((task) => task.id === input.id);
  if (index === -1) {
    throw new Error(`Task ${input.id} was not found.`);
  }

  const savedTask: Task = {
    ...input,
    title: input.title.trim(),
  };

  adapterStore[index] = savedTask;
  return copyTask(savedTask);
}

import { useState } from 'react';
import { setDemoFailures } from './taskAdapter';

export function DemoControls() {
  const [writes, setWrites] = useState(false);
  const [reads, setReads] = useState(false);

  function changeWrites(nextWrites: boolean) {
    setWrites(nextWrites);
    setDemoFailures({ writes: nextWrites, reads });
  }

  function changeReads(nextReads: boolean) {
    setReads(nextReads);
    setDemoFailures({ writes, reads: nextReads });
  }

  return (
    <fieldset>
      <legend>Local simulation</legend>
      <label>
        <input
          type='checkbox'
          checked={writes}
          onChange={(event) => changeWrites(event.currentTarget.checked)}
        />
        Reject writes
      </label>
      <label>
        <input
          type='checkbox'
          checked={reads}
          onChange={(event) => changeReads(event.currentTarget.checked)}
        />
        Reject reads
      </label>
    </fieldset>
  );
}

import { useQuery } from '@tanstack/react-query';
import { getTask, getTasks } from './taskAdapter';
import type { TaskFilter } from './types';

export const taskKeys = {
  lists: () => ['tasks', 'list'] as const,
  list: (status: TaskFilter) => ['tasks', 'list', { status }] as const,
  detail: (id: string) => ['tasks', 'detail', id] as const,
};

export function useTasks(status: TaskFilter) {
  return useQuery({
    queryKey: taskKeys.list(status),
    queryFn: ({ signal }) => getTasks(status, signal),
    retry: false,
    refetchOnWindowFocus: false,
  });
}

export function useTask(taskId: string) {
  return useQuery({
    queryKey: taskKeys.detail(taskId),
    queryFn: ({ signal }) => getTask(taskId, signal),
    enabled: taskId.length > 0,
    retry: false,
    refetchOnWindowFocus: false,
  });
}

import { Link, Outlet, useSearchParams } from 'react-router-dom';
import { DemoControls } from './DemoControls';
import { useTasks } from './taskQueries';
import type { TaskFilter } from './types';

function readStatus(value: string | null): TaskFilter {
  return value === 'open' || value === 'done' ? value : 'all';
}

export function TaskLayout() {
  const [searchParams] = useSearchParams();
  const status = readStatus(searchParams.get('status'));
  const { data: tasks = [], isPending, isError } = useTasks(status);
  const search = `?status=${status}`;

  return (
    <section>
      <h1>Task Board</h1>
      <DemoControls />
      {isPending && <p>Loading tasks…</p>}
      {isError && <p role='alert'>Could not load tasks.</p>}
      <ul>
        {tasks.map((task) => (
          <li key={task.id}>
            <Link to={`/tasks/${task.id}${search}`}>{task.title}</Link>
          </li>
        ))}
      </ul>
      <Outlet />
    </section>
  );
}

import { Link, useParams, useSearchParams } from 'react-router-dom';
import { useTask } from './taskQueries';

export function TaskDetails() {
  const { taskId } = useParams<{ taskId: string }>();
  const [searchParams] = useSearchParams();
  const taskQuery = useTask(taskId ?? '');
  const search = searchParams.toString();
  const listPath = search ? `/tasks?${search}` : '/tasks';

  if (!taskId) return <p role='alert'>Invalid task route.</p>;
  if (taskQuery.isPending) return <p>Loading task…</p>;
  if (taskQuery.isError || !taskQuery.data) {
    return <p role='alert'>Could not load this task.</p>;
  }

  const task = taskQuery.data;
  return (
    <article>
      <h2>{task.title}</h2>
      <p>Status: {task.status}</p>
      <Link to={listPath}>Back to tasks</Link>
    </article>
  );
}

<Route path='tasks' element={<TaskLayout />}>
  <Route path=':taskId' element={<TaskDetails />} />
</Route>

import { useMutation } from '@tanstack/react-query';
import { updateTask } from './taskAdapter';

export function useSaveTask() {
  const saveTask = useMutation({
    mutationFn: updateTask,
    retry: false,
  });

  return { saveTask };
}

import { type FormEvent, useState } from 'react';
import type { Task, TaskDraft } from './types';
import { useSaveTask } from './useSaveTask';

type TaskEditorProps = { task: Task };

export function TaskEditor({ task }: TaskEditorProps) {
  const [draft, setDraft] = useState<TaskDraft>({
    title: task.title,
    status: task.status,
  });
  const { saveTask } = useSaveTask();
  const savedTask = saveTask.data;
  const isSaving = saveTask.isPending;

  function handleSubmit(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();
    if (isSaving) return;

    saveTask.mutate({ id: task.id, ...draft });
  }

  return (
    <form onSubmit={handleSubmit} aria-busy={isSaving}>
      {isSaving ? (
        <p role='status' aria-live='polite'>Saving…</p>
      ) : saveTask.isError ? (
        <p role='alert'>Could not save. Your draft is unchanged.</p>
      ) : savedTask ? (
        <p role='status' aria-live='polite'>Saved</p>
      ) : null}

      <fieldset disabled={isSaving}>
        <label>
          Title
          <input
            value={draft.title}
            onChange={(event) => setDraft({
              ...draft,
              title: event.currentTarget.value,
            })}
          />
        </label>
        <label>
          Status
          <select
            value={draft.status}
            onChange={(event) => setDraft({
              ...draft,
              status: event.currentTarget.value as TaskDraft['status'],
            })}
          >
            <option value='open'>Open</option>
            <option value='done'>Done</option>
          </select>
        </label>
        <button type='submit'>
          {isSaving ? 'Saving…' : 'Save task'}
        </button>
      </fieldset>
    </form>
  );
}

import { Link, useParams, useSearchParams } from 'react-router-dom';
import { TaskEditor } from './TaskEditor';
import { useTask } from './taskQueries';

export function TaskDetails() {
  const { taskId } = useParams<{ taskId: string }>();
  const [searchParams] = useSearchParams();
  const taskQuery = useTask(taskId ?? '');
  const search = searchParams.toString();
  const listPath = search ? `/tasks?${search}` : '/tasks';

  if (!taskId) return <p role='alert'>Invalid task route.</p>;
  if (taskQuery.isPending) return <p>Loading task…</p>;
  if (taskQuery.isError || !taskQuery.data) {
    return <p role='alert'>Could not load this task.</p>;
  }

  const task = taskQuery.data;
  return (
    <article>
      <h2>{task.title}</h2>
      <p>Status: {task.status}</p>
      <TaskEditor key={task.id} task={task} />
      <Link to={listPath}>Back to tasks</Link>
    </article>
  );
}

import { useState } from 'react'
import { useMutation, useQueryClient } from '@tanstack/react-query'
import { updateTask } from './taskAdapter'
import { taskKeys } from './taskQueries'

export type SyncStatus = 'idle' | 'refreshing' | 'current' | 'failed'

export function useSaveTask() {
  const queryClient = useQueryClient()
  const [syncStatus, setSyncStatus] = useState<SyncStatus>('idle')

  const saveTask = useMutation({
    mutationFn: updateTask,
    retry: false,
    onMutate: () => setSyncStatus('idle'),
    onSuccess: async (savedTask) => {
      setSyncStatus('refreshing')

      await Promise.all([
        queryClient.invalidateQueries({
          queryKey: taskKeys.lists(),
        }),
        queryClient.invalidateQueries({
          queryKey: taskKeys.detail(savedTask.id),
          exact: true,
        }),
      ])

      setSyncStatus('current')
    },
  })

  return { saveTask, syncStatus }
}

const { saveTask, syncStatus } = useSaveTask()
const isRefreshing = saveTask.isPending && syncStatus === 'refreshing'

<p aria-live="polite">
  {saveTask.isPending
    ? isRefreshing
      ? 'Saved; refreshing views…'
      : 'Saving…'
    : syncStatus === 'current'
      ? 'Saved'
      : null}
</p>

<button type="submit" disabled={saveTask.isPending}>
  Save task
</button>

onSuccess: async (savedTask) => {
  await queryClient.cancelQueries({
    queryKey: taskKeys.detail(savedTask.id),
    exact: true,
  })

  queryClient.setQueryData(
    taskKeys.detail(savedTask.id),
    savedTask,
  )

  await queryClient.invalidateQueries({
    queryKey: taskKeys.lists(),
  })
},

export async function updateTask(input: UpdateTaskInput): Promise<Task> {
  await delay(400);

  if (demoFailures.writes) {
    throw new Error('The in-memory adapter rejected this write.');
  }

  const title = input.title.trim();
  if (title.length === 0) {
    throw new Error('Task title is required.');
  }
  if (input.status !== 'open' && input.status !== 'done') {
    throw new Error('Task status is invalid.');
  }

  const index = adapterStore.findIndex((task) => task.id === input.id);
  if (index === -1) {
    throw new Error(`Task ${input.id} was not found.`);
  }

  const savedTask: Task = {
    ...input,
    title,
  };

  adapterStore[index] = savedTask;
  return copyTask(savedTask);
}

{saveTask.isError ? (
  <p role='alert'>Could not save. Your draft is unchanged.</p>
) : saveTask.isPending ? (
  <p role='status' aria-live='polite'>
    {syncStatus === 'refreshing'
      ? 'Saved; refreshing views…'
      : 'Saving…'}
  </p>
) : syncStatus === 'current' ? (
  <p role='status' aria-live='polite'>Saved</p>
) : null}

<fieldset disabled={isSaving}>
  {/* Keep the existing controlled title and status controls here. */}
  <button type='submit'>
    {isSaving ? 'Saving…' : 'Save task'}
  </button>
</fieldset>

export function useSaveTask() {
  const queryClient = useQueryClient();
  const [syncStatus, setSyncStatus] = useState<SyncStatus>('idle');

  async function invalidateLists() {
    await queryClient.invalidateQueries(
      { queryKey: taskKeys.lists() },
      { throwOnError: true },
    );
  }

  async function refreshViews() {
    setSyncStatus('refreshing');
    try {
      await invalidateLists();
      setSyncStatus('current');
    } catch {
      setSyncStatus('failed');
    }
  }

  const saveTask = useMutation({
    mutationFn: updateTask,
    retry: false,
    onMutate: () => setSyncStatus('idle'),
    onSuccess: async (savedTask) => {
      await queryClient.cancelQueries({
        queryKey: taskKeys.detail(savedTask.id),
        exact: true,
      });
      queryClient.setQueryData(
        taskKeys.detail(savedTask.id),
        savedTask,
      );

      setSyncStatus('refreshing');
      try {
        await invalidateLists();
        setSyncStatus('current');
      } catch {
        setSyncStatus('failed');
      }
    },
  });

  return { saveTask, syncStatus, refreshViews };
}

const { saveTask, syncStatus, refreshViews } = useSaveTask();
const savedTask = saveTask.data;
const isSaving = saveTask.isPending;
const isRefreshing = syncStatus === 'refreshing';

function handleSubmit(event: FormEvent<HTMLFormElement>) {
  event.preventDefault();
  if (isSaving || isRefreshing) return;

  saveTask.mutate({ id: task.id, ...draft });
}

async function handleRefresh() {
  await refreshViews();
}

{saveTask.isError ? (
  <p role='alert'>Could not save. Your draft is unchanged.</p>
) : isSaving || isRefreshing ? (
  <p role='status' aria-live='polite'>
    {isSaving && syncStatus !== 'refreshing'
      ? 'Saving…'
      : 'Saved; refreshing views…'}
  </p>
) : syncStatus === 'failed' ? (
  <>
    <p role='alert'>Saved, but refresh failed.</p>
    <button type='button' onClick={handleRefresh}>
      Refresh views
    </button>
  </>
) : syncStatus === 'current' || savedTask ? (
  <p role='status' aria-live='polite'>Saved</p>
) : null}

<fieldset disabled={isSaving || isRefreshing}>
  {/* Keep the existing controlled title and status controls here. */}
  <button type='submit'>
    {isSaving ? 'Saving…' : 'Save task'}
  </button>
</fieldset>