/Knowledge/sources/honojs__hono/llms-full/hono-stacks-with-react--part-02--fa8d0dd7c061.md
Hono Stacks: With React (part 02) - hono-docs
Hono Stacks: With React (part 02) Source evidence: /Sources/honojs hono/provenance.md Canonical citation: https://hono.dev/llms full.txt with react Summary t...
Hono Stacks: With React (part 02)
Source evidence: /Sources/honojs__hono/provenance.md Canonical citation: https://hono.dev/llms-full.txt#with-react
Summary
## Content
```tsx
// src/App.tsx
import {
useQuery,
useMutation,
QueryClient,
QueryClientProvider,
} from '@tanstack/react-query'
import type { AppType } from '../functions/api/[[route]]'
import { hc, InferResponseType, InferRequestType } from 'hono/client'
const queryClient = new QueryClient()
const client = hc<AppType>('/api')
export default function App() {
return (
<QueryClientProvider client={queryClient}>
<Todos />
</QueryClientProvider>
)
}
const Todos = () => {
const query = useQuery({
queryKey: ['todos'],
queryFn: async () => {
const res = await client.todo.$get()
return await res.json()
},
})
const $post = client.todo.$post
const mutation = useMutation<
InferResponseType<typeof $post>,
Error,
InferRequestType<typeof $post>['form']
>({
mutationFn: async (todo) => {
const res = await $post({
form: todo,
})
return await res.json()
},
onSuccess: async () => {
queryClient.invalidateQueries({ queryKey: ['todos'] })
},
onError: (error) => {
console.log(error)
},
})
return (
<div>
<button
onClick={() => {
mutation.mutate({
id: Date.now().toString(),
title: 'Write code',
})
}}
>
Add Todo
</button>
<ul>
{query.data?.todos.map((todo) => (
<li key={todo.id}>{todo.title}</li>
))}
</ul>
</div>
)
}
Metadata
{
"chunk_index": 1,
"citation": "https://hono.dev/llms-full.txt#with-react",
"coverage_role": "overview",
"qualified_title": "Hono / llms-full / Hono Stacks > With React (2)",
"retrieved_at": "2026-07-02T05:51:01Z",
"section_index": 531,
"source_id": "/honojs/hono",
"source_type": "llms_full",
"target_label": "llms-full",
"title": "Hono Stacks: With React (part 02)",
"upstream_url": "https://hono.dev/llms-full.txt",
"version": "2026"
}
Kinic Wiki