React-Queryの使用
27425 ワード
react-Queryとは?
react-queryはswrとともにAPI通信プロセスを使用する簡単で強力なライブラリである(実際には両ライブラリともHTTPキャッシュが無効なポリシーstal-while-revalidateに着目している).公式ファイルを借りると、宣言性も簡単で、zeroconfはreact-queryの利点です.実際には,非同期論理を綿密に実施するには,綿密な管理と努力が必要である.react-queryを学び、これらのトラブルを軽減するために使用しました.
ステータスとは?
フロント開発の過程で、管理状態の仕事は本当に多いです.私たちが管理している状態は何ですか?
私が考えている状態はこうです
成熟したUIと優れたUXの登場に伴い、サービス規模は拡大し、コード量も増加している.
当然、フロントエンド管理の場合も多くなり、それによって生じる様々な問題(Redux、Mobx等)の解決が考えられている.
特にバックエンドから受信したデータは、リクエストからレスポンスまで、成功と失敗の論理の作成に追われ、レスポンス後にクライアントのステータスと同期を維持します.それでも、バックエンドで受信したデータは操作可能なデータであるため、クライアントの意図とは異なり、データが変更され、時代遅れになる可能性があります.
この点、react-queryでは、クライアントが管理するデータと、サーバが管理するデータを分類して表示できます.
function* deletePost({id}) {
try {
yield put({ type: DELETE_POST_SUCCESS, deletePostId: id });
} catch (err) {
yield put({ type: DELETE_POST_ERROR, payload: err });
}
}
function* watchAddComment() {
yield takeLatest(DELETE_POST_REQUEST, addComment);
}Installation
$ npm i react-query
# or
$ yarn add react-queryBefore Start
import { QueryClient, QueryClientProvider, useQuery } from 'react-query'
const queryClient = new QueryClient()
export default function App() {
return (
<QueryClientProvider client={queryClient}>
<Todos />
</QueryClientProvider>
)
}react-queryを使用して表示
Queries
import { useQuery } from 'react-query'
function App() {
const info = useQuery('todos', fetchTodoList, options)
}Queryのライフサイクル
queryには大体5つの状態があります.
順番にキャプチャ>fresh>時代遅れ>非アクティブ>削除
fresh<-->stan:新鮮または古い状態で行います.
たとえば、queryオプションが{refretchOnMount:[常に]に設定されている場合、このオプションはキャプチャ後5秒以内に新鮮な状態に保たれます.5秒後には古い状態になります.クエリが5秒以内に>mountでアンインストールされている場合、refectOnMountオプションは「常に」であるため、fresh状態になりますが、refectが発生します.
Query Keys
userQueryで使用されるキーはqueryを識別する一意の値であり、stringとarrayの2種類しか使用できません.
string
useQuery('todos', ...) // queryKey === ['todos']array
クエリー・データ識別に他の情報が必要な場合は、鍵を配列として提供できます.
useQuery(['todo', 5], ...)
useQuery(['todo', 5, { preview: true }], ...)useQuery(['todos', status, page], ...)
useQuery(['todos', page, status], ...)
//not equalParallel Queries
複数のクエリーを宣言する必要がある場合でも、他のスキルを宣言する必要はありません.react-queryは内部で並列に処理されます.
function App () {
const usersQuery = useQuery('users', fetchUsers)
const teamsQuery = useQuery('teams', fetchTeams)
const projectsQuery = useQuery('projects', fetchProjects)
...
}Queries Syncronization
たとえば、Aというコンポーネントからtodoqueryを呼び出し、Bというコンポーネントからtodoqueryを呼び出すとどうなりますか.APIは再び呼び出されますか?正解は「queryが古い場合にのみAPIが呼び出される」です.fresh状態の場合、API呼び出し自体は発生しません.古いクエリは、再エッチング後にAおよびB要素に最新の状態で渡されます.
Mutations
前述したqueryがデータの取得に注目している場合、variantはcreate/update/deleteに使用することを推奨します.
function App() {
const mutation = useMutation(newTodo => {
return axios.post('/todos', newTodo)
})
return (
<div>
{mutation.isLoading ? (
'Adding todo...'
) : (
<>
{mutation.isError ? (
<div>An error occurred: {mutation.error.message}</div>
) : null}
{mutation.isSuccess ? <div>Todo added!</div> : null}
<button
onClick={() => {
mutation.mutate({ id: new Date(), title: 'Do Laundry' })
}}
>
Create Todo
</button>
</>
)}
</div>
)
}Mutation Side Effects
変異は、ライフサイクルロジックオプションも提供します.Axiosのスタイルに似ています
useMutation(addTodo, {
onMutate: variables => {
// ... //
return { id: 1 }
},
onError: (error, variables, context) => {
// ... //
console.log(`rolling back optimistic update with id ${context.id}`)
},
onSuccess: (data, variables, context) => {
// ... //
},
onSettled: (data, error, variables, context) => {
// ... //
},
})Invalidation
invanitionは、一部のクエリが古い状態または開発者が必要とする特殊な状態にある場合にqueryを処理(無効)するために使用されます.通常、変異が発生すると、既存のデータは時代遅れになる可能性が高いため、変異のonSuccessオプションとともに使用されます.
import { useMutation, useQueryClient } from 'react-query'
const queryClient = useQueryClient()
const mutation = useMutation(addTodo, {
onSuccess: () => {
queryClient.invalidateQueries('todos')
queryClient.invalidateQueries('reminders')
},
})Devtools
react-queryはブラウザツールを提供します.
import { ReactQueryDevtools } from 'react-query/devtools'
function App() {
return (
<QueryClientProvider client={queryClient}>
{/* The rest of your application */}
<ReactQueryDevtools initialIsOpen={false} />
</QueryClientProvider>
)
}これは簡単な正式なドキュメントの例です.
https://codesandbox.io/s/github/tannerlinsley/react-query/tree/master/examples/simple
メリット
不便な点
// /feedQuery
import { useQuery } from "react-query";
import { fetchComments } from "../api/fetchComments";
import { fetchFeeds } from "../api/fetchFeeds";
export const useFetchFeeds = (category, page) =>
useQuery(category, () => fetchFeeds(category, page));
export const useFetchComments = (id) =>
useQuery(["comments", id], () => fetchComments(id));https://react-query.tanstack.com/overview
Reference
この問題について(React-Queryの使用), 我々は、より多くの情報をここで見つけました https://velog.io/@n0eyes/React-Query-를-사용해보자テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol