<% if (addOnEnabled['start']) { /** Start todos implementation */ %>import { useCallback, useState } from 'react' import { createFileRoute } from '@tanstack/react-router' import { useQuery, useMutation } from '@tanstack/react-query' export const Route = createFileRoute('/demo/tanstack-query')({ component: TanStackQueryDemo, }) type Todo = { id: number name: string } function TanStackQueryDemo() { const { data, refetch } = useQuery({ queryKey: ['todos'], queryFn: () => fetch('/demo/api/tq-todos').then((res) => res.json()), initialData: [], }) const { mutate: addTodo } = useMutation({ mutationFn: (todo: string) => fetch('/demo/api/tq-todos', { method: 'POST', body: JSON.stringify(todo), }).then((res) => res.json()), onSuccess: () => refetch(), }) const [todo, setTodo] = useState('') const submitTodo = useCallback(async () => { await addTodo(todo) setTodo('') }, [addTodo, todo]) return (

TanStack Query

TanStack Query Todos

    {data?.map((t) => (
  • {t.name}
    • ))}
setTodo(e.target.value)} onKeyDown={(e) => { if (e.key === 'Enter') { submitTodo() } }} placeholder="Enter a new todo..." className="demo-input" />
) } <% } else { /** Simple in-memory query implementation */ %>import { <% if (fileRouter) { %>createFileRoute<% } else { %>createRoute<% } %> } from '@tanstack/react-router' import { useQuery } from '@tanstack/react-query' <% if (codeRouter) { %> import type { RootRoute } from '@tanstack/react-router' <% } else { %> export const Route = createFileRoute('/demo/tanstack-query')({ component: TanStackQueryDemo, }) <% } %> function TanStackQueryDemo() { const { data } = useQuery({ queryKey: ['todos'], queryFn: () => Promise.resolve([ { id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }, { id: 3, name: 'Charlie' }, ]), initialData: [], }) return (

TanStack Query

TanStack Query Simple Promise Handling

    {data.map((todo) => (
  • {todo.name}
    • ))}
) } <% if (codeRouter) { %> export default (parentRoute: RootRoute) => createRoute({ path: '/demo/tanstack-query', component: TanStackQueryDemo, getParentRoute: () => parentRoute, }) <% } %> <% } %>