Mala Anlatır Gibi React —9: İstek State Yönetimi / react-query

React’da istek state yönetimi paketini tanıtacağım.

(Görsel, I.)

Paketin amacı, istekleri yönetimi kolaylaştırmak. State’de tutmak.

Paketi yükleyelim:

 npm i --save @tanstack/react-query

Ana component’ı sarmalayın:

import { QueryClient, QueryClientProvider } from '@tanstack/react-query'

const client = new QueryClient()

<QueryClientProvider client={client}>
    <App />
</QueryClientProvider>

Query kullanımı:

import { useQuery } from '@tanstack/react-query'

const { data } = useQuery(["çekilecek-veri-adı"], ()=>{
    console.log(data)
    return fetch('url')
})

Hazır eventler: isLoading:

const { isLoading } = useQuery()

if(isLoading) {
    return <h1>Yükleniyor..</h1>
}

Hata yönetimi:

const { isError } = useQuery()

if(isError) {
    return <h1>hata</h1>
}

Yeniden istek atmak:

const { refetch } = useQuery()

<button onlick={refetch}></button>