react query

:reactアプリケーションからサーバステータスの取得、キャッシュ、同期、更新を支援するライブラリ
(React Query is often described as the missing data-fetching library for React, but in more technical terms, it makes fetching, caching, synchronizing and updating server state in your React applications a breeze.)
正式な書類
https://react-query.tanstack.com/overview
コメントブログ
https://merrily-code.tistory.com/76

set up

インストールコマンド
npm i react-query
親コンポーネント(index.js)コードsetup
次のコードの例は、正式なドキュメントから来ています.

import { QueryClient, QueryClientProvider, useQuery } from 'react-query'
 
 const queryClient = new QueryClient()
 
 export default function App() {
   return (
     <QueryClientProvider client={queryClient}>
       <Example />
     </QueryClientProvider>
   )
 } 

Example component

function Example() {
   const { isLoading, error, data } = useQuery('repoData', () =>
     fetch('https://api.github.com/repos/tannerlinsley/react-query').then(res =>
       res.json()
     )
   )
 //fetch 부분 따로 component분리 가능
   
   if (isLoading) return 'Loading...'
 
   if (error) return 'An error has occurred: ' + error.message
 
   return (
     <div>
       <h1>{data.name}</h1>
       <p>{data.description}</p>
       <strong>👀 {data.subscribers_count}</strong>{' '}
       <strong>✨ {data.stargazers_count}</strong>{' '}
       <strong>🍴 {data.forks_count}</strong>
     </div>
   )
 }

サンプル結果

react queryの利点

1)userState,userEffectなどのコードを圧縮する.
2)fetcher関数を素子として分離することができる.
3)キャッシュ(キャッシュにデータを格納する)により、データ損失を防ぐことができます.

useQuery

:React Query hook
:React Queryクエリーキーに基づいてクエリーキャッシュを管理する

const { isLoading, data } = useQuery("Query-key" , fetcher funtion);

React-Query公式ドキュメントを参照してください
https://react-query.tanstack.com/reference/useQuery#_top
「符号化されていないデコーダ」を参照
#4.9 React Query part One