131 lines
3.7 KiB
TypeScript
131 lines
3.7 KiB
TypeScript
'use client'
|
|
|
|
import React, { useState } from 'react'
|
|
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
|
|
import type { Todo } from '@/app/api/todos/data'
|
|
|
|
interface MutationContext {
|
|
previousTodos: Array<Todo> | undefined
|
|
optimisticId: string
|
|
}
|
|
|
|
async function fetchTodos(): Promise<Array<Todo>> {
|
|
const res = await fetch('/api/todos')
|
|
if (!res.ok) throw new Error('Failed to fetch todos')
|
|
return res.json()
|
|
}
|
|
|
|
async function addTodo(text: string): Promise<Todo> {
|
|
const res = await fetch('/api/todos', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ text }),
|
|
})
|
|
if (!res.ok) {
|
|
const err = (await res.json()) as { error: string }
|
|
throw new Error(err.error)
|
|
}
|
|
return res.json()
|
|
}
|
|
|
|
export default function TodoListCache() {
|
|
const queryClient = useQueryClient()
|
|
const [inputValue, setInputValue] = useState('')
|
|
const [lastError, setLastError] = useState<string | null>(null)
|
|
|
|
const { data: todos = [] } = useQuery({
|
|
queryKey: ['todos'],
|
|
queryFn: fetchTodos,
|
|
})
|
|
|
|
const addTodoMutation = useMutation<Todo, Error, string, MutationContext>({
|
|
mutationFn: addTodo,
|
|
onMutate: async (text) => {
|
|
setLastError(null)
|
|
await queryClient.cancelQueries({ queryKey: ['todos'] })
|
|
|
|
const previousTodos = queryClient.getQueryData<Array<Todo>>(['todos'])
|
|
|
|
const optimisticId = `optimistic-${Date.now()}`
|
|
const optimisticTodo: Todo = {
|
|
id: optimisticId,
|
|
text,
|
|
createdAt: Date.now(),
|
|
}
|
|
|
|
queryClient.setQueryData<Array<Todo>>(['todos'], (old = []) => [
|
|
...old,
|
|
optimisticTodo,
|
|
])
|
|
|
|
return { previousTodos, optimisticId }
|
|
},
|
|
onError: (_err, _text, context) => {
|
|
setLastError(_err.message)
|
|
if (context?.previousTodos !== undefined) {
|
|
queryClient.setQueryData(['todos'], context.previousTodos)
|
|
} else if (context?.optimisticId) {
|
|
queryClient.setQueryData<Array<Todo>>(['todos'], (old = []) =>
|
|
old.filter((todo) => todo.id !== context.optimisticId),
|
|
)
|
|
}
|
|
},
|
|
onSettled: () => {
|
|
void queryClient.invalidateQueries({ queryKey: ['todos'] })
|
|
},
|
|
})
|
|
|
|
function handleSubmit(e: React.FormEvent) {
|
|
e.preventDefault()
|
|
const text = inputValue.trim()
|
|
if (!text) return
|
|
addTodoMutation.mutate(text)
|
|
setInputValue('')
|
|
}
|
|
|
|
return (
|
|
<div>
|
|
<p style={{ fontSize: '0.875rem', color: '#555', marginBottom: '1rem' }}>
|
|
<strong>Approach 2 — via cache manipulation:</strong>{' '}
|
|
<code>onMutate</code> snapshots the cache and writes the optimistic item
|
|
in. <code>onError</code> restores the snapshot on failure.
|
|
</p>
|
|
|
|
<form
|
|
onSubmit={handleSubmit}
|
|
style={{ display: 'flex', gap: 8, marginBottom: '1rem' }}
|
|
>
|
|
<input
|
|
value={inputValue}
|
|
onChange={(e) => setInputValue(e.target.value)}
|
|
placeholder="New todo…"
|
|
style={{ flex: 1, padding: '0.4rem 0.6rem', fontSize: '1rem' }}
|
|
/>
|
|
<button type="submit" disabled={addTodoMutation.isPending}>
|
|
Add
|
|
</button>
|
|
</form>
|
|
|
|
{lastError && (
|
|
<p style={{ color: 'red', marginBottom: '0.5rem' }}>{lastError}</p>
|
|
)}
|
|
|
|
<ul style={{ listStyle: 'none', padding: 0 }}>
|
|
{todos.map((todo) => (
|
|
<li
|
|
key={todo.id}
|
|
style={{
|
|
padding: '0.4rem 0',
|
|
borderBottom: '1px solid #eee',
|
|
opacity: todo.id.startsWith('optimistic-') ? 0.5 : 1,
|
|
}}
|
|
>
|
|
{todo.text}
|
|
{todo.id.startsWith('optimistic-') && <em> (saving…)</em>}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
)
|
|
}
|