π€ What is react-query?
React cache library
Official site
π€ What is cache?
Imagine you work at home now, and go to kitchen to take a banana. 1 hour later, you will get hungry and go to kitchen again and again and again ...
Just put bananas on your desk, and take it! you don't need to go to kitchen again and again
Bananas = data
kitchen = server
your desk = cache
(If you put too much bananas on your desk like 1000, you would work so hardly. Be careful)
β¬ ok, I'm gonna reveal details β¬
π’ Weakness state management of classical way
Integrating data from server and React app state
(for example Redux "Store")
it's like banana and note and pen and other all stuffs are on your desk, just chaos
π How to solve this problem?
separate state management, then "react-query" manages sever data with cache.
it's like you make small box on your desk for banana
π Benefits of using react-query
1.Optimize number of fetching
When only banana on your desk goes bad, you should go to kitchen
2.Better UX (less loading time)
When you go to kitchen, you can't work. Waste of time
3. Less code
β©classical code
export const useClassicalFetch = () => {
const { tasks, setTasks } = useStateContext()
const [isLoading, setLoading] = useState(false)
const [isError, setError] = useState(false)
useEffect(() => {
const fetchData = async () => {
setError(false)
setLoading(true)
try {
const res = await axios('http://hoge.com/api/tasks/')
setTasks(res.data)
} catch (error) {
setError(true)
}
setLoading(false)
}
fetchData()
}, [setTasks])
return { tasks, isLoading, isError }
}
β©react-query
const getTasks = async () => {
const { data } = await axios.get<Task[]>('http://hoge.com/api/tasks/')
return data
}
// *** Here definition of react-query ***
export const useQueryTasks = () => {
return useQuery<Task[], Error>({
queryKey: 'tasks',
queryFn: getTasks,
cacheTime: 10000,//10sec
staleTime: 10000,
})
}
The way how to use it in component
const TaskList: VFC = () => {
const { status, data } = useQueryTasks()
if (status === 'loading') return <div>{'Loading...'}</div>
if (status === 'error') return <div>{'Error'}</div>
return (
<div>
{data?.map((task) => (
// omit here
))}
</div>
)
}
π explanation of react-query configuration values
staleTime
For example setting 10000ms(10sec).
First 10 seconds after mounting component, cache data is "fresh", after that changes to "stale(old)".
fresh -> using cache
stale -> fetch data from server
cacheTime
For example setting 10000ms(10sec).
After 10 seconds unmounting component, cache data is deleted
refetchOnWindowFocus
When cursor is focus on windows, fetch data automatically.
// ex. When you use chrome and firefox.
use chrome
β
use firefox
β
use chrome, then fetch data automatically !
Top comments (0)