【Day28】React Query 简易说明及使用 (´∀`)

What's React Query !? React Query 是一个适合用於React Hook的Library，

它可以帮助我们取得、同步、更新跟缓存我们的远端数据，且可以更好的处理Server端的states。

虽然说小菜鸟在上一篇有提到觉得React Query比React Redux好用，但其实这两种是可以并存的，

只是React Query可以只透过几个简单的API就能帮我们处理cache及Server端的states。

原理

透过Promise、Async、Await来处理异步数据

优点

帮助我们减少复杂的代码，用较少的React查询逻辑来代替
不用担心如何连接新的Server States
节省及提高效能
可以处理麻烦的cache
不用进行配置

重点

查询并渲染在画面上的结果会在它们被resolved後立马过期，只有再一次render或是被使用到时，会自动重新fetch，但我们可以透过设定staleTime来调整过期的时间 (预设为0)
```
  const {
        data,
        isLoading,
        isError,
        isSuccess,
      } = useQuery ('planets', fetchPlanets,{
        staleTime: 5000,
      })
```
查询的结果在Component unmount後仍然会被cached，GC 的预设时间是五分钟，也就是五分钟如果我们没有用到，它们就掰掰了~ (可以设定cacheTime来设定它们被cache的时间)
```
  const {
        data,
        isLoading,
        isError,
        isSuccess,
      } = useQuery ('planets', fetchPlanets,{
        cacheTime: 5000,
      })
```

过期的查询会在使用者重整浏览器或重新聚焦於浏览器的时候或者重新连线的时候会重新fetch，但如果我们不想让使用者透过这样的方式重新fetch的话，可以透过React Query里的Query Client 里的两个设定来关闭 (refetchOnWindowFocus & refetchOnReconnect)

import { QueryClient, QueryClientProvider } from 'react-query'
const queryClient = new QueryClient({
   defaultOptions: {
     queries: {
       refetchOnWindowFocus: false,
       refetchOnReconnect:false,
     },
   },
 })
function App() {
  return (
    <QueryClientProvider client={queryClient} contextSharing={true}>
      <div className="App">

        <Planets/>
      </div>
    </QueryClientProvider>
  );
}

查询如果失败的话，会重试三次，当三次都失败的时候才会显示error，我们可以透过设定retry & retryDelay来调整

  const {
        data,
        isLoading,
        isError,
        isSuccess,
      } = useQuery ('planets', fetchPlanets,{
         retry: 10,
         retryDelay: 1000,
      })

简易使用方式

先创建一个Query Client 并镶在我们的Component外层

import { QueryClient, QueryClientProvider } from 'react-query'
import Planets from './Planet';
const queryClient = new QueryClient()
function App() {
  return (
    <QueryClientProvider client={queryClient} contextSharing={true}>
      <div className="App">

        <Planets/>
      </div>
    </QueryClientProvider>
  );
}

export default App;

在Component内建立一个函式变数，透过async/await的方式来fetch某个api

const fetchPlanets = async (key,page) => {
    const res = await fetch(`https://swapi.dev/api/planets/?page=${page}`)
    return res.json()
  }

接着将此函式变数带入useQuery里

export default  function Planets() {
    const [page, setPage] = useState(1)
    const {
        data,
        isLoading,
        isError,
        isSuccess,
      } = useQuery ('planets', fetchPlanets,{
        keepPreviousData: true,
      })


  return (
    <div>
      <h2>Planets</h2>
      <button onClick={() => setPage((prevPage) => Math.max(prevPage - 1, 1))}> 
        Previous Page
      </button>
      <div>{page}</div>
      <button
        onClick={() =>
          setPage((prevPage) =>
            !data || !data.next ? prevPage : prevPage + 1
          )
        }
      >
        Next Page
      </button>
      {isLoading && <div>Loading...</div>}
      {isError && <div>Fetching error</div>}
      {isSuccess &&
        data.results.map((planet) => {
          return <Planet planet={planet} key={planet.name} />
        })}
    </div>
  );
}

上述，是针对React Query 的简单说明~ 希望还算清楚இдஇ

下一篇，小菜鸟要来分享自己在使用React时候踩过的一些小地雷 !

快要接近尾声了 !! 加油呀 ~

<<: D-2.Line_pay_api 串接(三) Rails 串接

>>: Day14-Redux 篇-介绍 Redux