   {
const { data, loading, error, update } = useQuery(
() => fetch('https://jsonplaceholder.typicode.com/todos/1')
)
if (loading) return
Loading...
Error :(
return (
title: {data.title}
completed: {data.completed}
$3
`js
import { useQuery } from 'react-refetch-hooks'function App() {
const { data, loading, error, fetch } = useQuery(
(page: number) => 'https://jsonplaceholder.typicode.com/todos/1',
{ imperative: true }
)
if (loading) return
Loading...
if (error) return Error :(
return (
title: {data.title}
completed: {data.completed}
)
}
`
$3
`js
import { useMutation } from 'react-refetch-hooks'const url = 'https://jsonplaceholder.typicode.com/todos'
const fetcher = (form) => fetch(url, {
method: 'POST',
body: form
}).then(res => res.json())
function TodoForm() {
const { mutating, error, trigger } = useMutation(fetcher)
if (error) return
Error :(
const handleSubmit = (event) => {
event.preventDefault()
const formData = new FormData(event.target)
try {
await trigger(formData)
} catch (err) {
console.log(err)
}
}
return (
)
}
``When you choose whether to use declarative or imperative, the main question you need to answer is what kind of logic it is from the user’s perspective. If this logic is caused by a particular interaction, and the query result just using once and not use for rendering ui, then imperative, otherwise declarative.
inspired by you-might-not-need-an-effect
imperative mode withouts any revalidate options.