react-fetch

!GitHub
!npm
!Travis (.com)

Quick Start

> npm install react-refetch-hooks

$3

``js
import { useQuery } from 'react-refetch-hooks'

function App() {
const { data, loading, error, update } = useQuery(
() => fetch('https://jsonplaceholder.typicode.com/todos/1')
)

if (loading) return

Loading...

if (error) return

Error :(

return (

title: {data.title}

completed: {data.completed}

update()}>refresh

)
}
`

$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}

fetch(1)}>refresh

)
}
`

$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 (




Title:

Submit

)
}


``

Q&A

$3

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.

Features

$3

- [x] Fetch OnMount.
- [x] Dependent Fetching of data that depends on other.
- [x] Automatic Refetching.
- [x] Window focus
- [x] Network reconnect
- [x] Interval
- [x] Request deduplication.
- [x] Debounced Request
- [x] Prevents potential race conditions
- [x] Separate Mutation and Query
- [x] Triggering the mutation manually

$3

- [ ] fallbackData vs placeholderData vs keepPreviousData
- [ ] Global configuration available or per hook call.
- [ ] Built-in cache
- [ ] Infinite: pagination and infinite scroll loading.
- [ ] Error handling, Error Retry
- [ ] Supports optimistic UI functionalities
- [ ] Suspense