{"id":462067,"date":"2025-06-04T15:00:51","date_gmt":"2025-06-04T15:00:51","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=462067"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=462067","title":{"rendered":"<span>React Query<\/span>"},"content":{"rendered":"<div><!--[--><!--]--><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-2\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<h2>\u0412\u0432\u0435\u0434\u0435\u043d\u0438\u0435<\/h2>\n<p>\u0412 Intelsy, \u0433\u0434\u0435 \u044f \u0440\u0430\u0431\u043e\u0442\u0430\u044e \u043d\u0430\u0434 \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u043c\u0438 \u043f\u0440\u043e\u0435\u043a\u0442\u0430\u043c\u0438 \u0432 \u0440\u043e\u043b\u0438 \u0432\u0435\u0431-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430, \u043c\u044b \u0447\u0430\u0441\u0442\u043e \u0441\u0442\u0430\u043b\u043a\u0438\u0432\u0430\u0435\u043c\u0441\u044f \u0441 \u0437\u0430\u0434\u0430\u0447\u0430\u043c\u0438 \u044d\u0444\u0444\u0435\u043a\u0442\u0438\u0432\u043d\u043e\u0433\u043e \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u0441 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u043c\u0438 \u0434\u0430\u043d\u043d\u044b\u043c\u0438. \u0412 \u0442\u0430\u043a\u0438\u0445 \u0441\u043b\u0443\u0447\u0430\u044f\u0445 \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e \u0432\u044b\u0440\u0443\u0447\u0430\u0435\u0442 React Query \u2014 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0434\u043b\u044f \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435\u043c \u0434\u0430\u043d\u043d\u044b\u0445 \u0441\u0435\u0440\u0432\u0435\u0440\u0430. \u041e\u043d\u0430 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043a\u044d\u0448\u0438\u0440\u0443\u0435\u0442 \u0434\u0430\u043d\u043d\u044b\u0435, \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u0438\u0437\u0438\u0440\u0443\u0435\u0442 \u0438\u0445 \u0438 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u0442, \u0447\u0442\u043e \u0438\u0437\u0431\u0430\u0432\u043b\u044f\u0435\u0442 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430 \u043e\u0442 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438 \u0432\u0440\u0443\u0447\u043d\u0443\u044e \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u044d\u0442\u0438\u043c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435\u043c, \u0430 \u0442\u0430\u043a\u0436\u0435 \u0441\u043d\u0438\u0436\u0430\u0435\u0442 \u043d\u0430\u0433\u0440\u0443\u0437\u043a\u0443 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440.<\/p>\n<p>React Query \u043d\u0435 \u0437\u0430\u043c\u0435\u043d\u044f\u0435\u0442 \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, Redux), \u0430 \u0434\u043e\u043f\u043e\u043b\u043d\u044f\u0435\u0442 \u0435\u0433\u043e, \u0444\u043e\u043a\u0443\u0441\u0438\u0440\u0443\u044f\u0441\u044c \u043d\u0430 \u0434\u0430\u043d\u043d\u044b\u0445, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u0440\u0438\u0445\u043e\u0434\u044f\u0442 \u0438\u0437 \u0432\u043d\u0435\u0448\u043d\u0438\u0445 \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u043e\u0432.<\/p>\n<p>\u041a\u043e\u043d\u0435\u0447\u043d\u043e, \u0434\u043b\u044f \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u0434\u0430\u043d\u043d\u044b\u0445 \u0441 API \u0438 \u043a\u044d\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0435 \u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0430 React (useEffect \u0438 useState), \u043d\u043e \u0442\u0430\u043a\u043e\u0439 \u043f\u043e\u0434\u0445\u043e\u0434, \u0432 \u043a\u043e\u043d\u0435\u0447\u043d\u043e\u043c \u0438\u0442\u043e\u0433\u0435, \u043f\u0440\u0438\u0432\u0435\u0434\u0451\u0442 \u043a \u0433\u0440\u043e\u043c\u043e\u0437\u0434\u043a\u043e\u043c\u0443 \u043a\u043e\u0434\u0443, \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e, \u043a\u043e\u0433\u0434\u0430 \u0434\u0435\u043b\u043e \u0434\u043e\u0439\u0434\u0451\u0442 \u0434\u043e \u043a\u044d\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0438\u043b\u0438 \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u043d\u0438\u044f \u043e\u0448\u0438\u0431\u043e\u043a \u0438 \u0441\u0442\u0430\u0442\u0443\u0441\u043e\u0432 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438.<\/p>\n<p>React Query \u0445\u0440\u0430\u043d\u0438\u0442 \u0434\u0430\u043d\u043d\u044b\u0435 \u0432 \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u043e\u043c \u043a\u044d\u0448\u0435, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0434\u043e\u0441\u0442\u0443\u043f\u0435\u043d \u0432\u0441\u0435\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. \u042d\u0442\u043e \u043f\u043e\u0445\u043e\u0436\u0435 \u043d\u0430 \u0442\u043e, \u043a\u0430\u043a \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442 \u0434\u0440\u0443\u0433\u0438\u0435 \u043c\u0435\u043d\u0435\u0434\u0436\u0435\u0440\u044b \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0439, \u043d\u043e \u0441 \u0444\u043e\u043a\u0443\u0441\u043e\u043c \u043d\u0430 \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435. \u041c\u043e\u0436\u043d\u043e \u0432\u044b\u0434\u0435\u043b\u0438\u0442\u044c \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438:<\/p>\n<ul>\n<li>\n<p>\u041a\u044d\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0434\u0430\u043d\u043d\u044b\u0445: React Query \u0437\u0430\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u0442 \u043e\u0442\u0432\u0435\u0442 \u043d\u0430 \u0437\u0430\u043f\u0440\u043e\u0441 \u0432 \u043a\u044d\u0448\u0435 \u043f\u043e \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u043e\u043c\u0443 \u043a\u043b\u044e\u0447\u0443 \u0438 \u043f\u0440\u0438 \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e\u043c \u0437\u0430\u043f\u0440\u043e\u0441\u0435 \u043f\u0440\u043e\u0441\u0442\u043e \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u0434\u0430\u043d\u043d\u044b\u0435 \u0438\u0437 \u043a\u044d\u0448\u0430\u200b, \u0447\u0442\u043e \u0443\u043c\u0435\u043d\u044c\u0448\u0430\u0435\u0442 \u043d\u0430\u0433\u0440\u0443\u0437\u043a\u0443 \u043d\u0430 \u0441\u0435\u0442\u044c \u0438 \u043c\u043e\u043c\u0435\u043d\u0442\u0430\u043b\u044c\u043d\u043e \u0432\u044b\u0432\u043e\u0434\u0438\u0442 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u043d\u0430 \u044d\u043a\u0440\u0430\u043d. \u0422\u0430\u043a\u0436\u0435 \u0435\u0441\u0442\u044c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0438\u043d\u0432\u0430\u043b\u0438\u0434\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043a\u044d\u0448 \u0437\u0430\u043f\u0440\u043e\u0441\u0430, \u0447\u0442\u043e\u0431\u044b \u043e\u043d \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u043b\u0441\u044f \u0437\u0430\u043d\u043e\u0432\u043e, \u0430 \u043d\u0435 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u043b \u0434\u0430\u043d\u043d\u044b\u0435 \u0438\u0437 \u043a\u044d\u0448\u0430, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043f\u043e\u0441\u043b\u0435 \u043c\u0443\u0442\u0430\u0446\u0438\u0438 \u0441 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f\u043c\u0438 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435.<\/p>\n<\/li>\n<li>\n<p>\u0424\u043e\u043d\u043e\u0432\u043e\u0435 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435: \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u043c\u043e\u0436\u0435\u0442 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043f\u0435\u0440\u0435\u0437\u0430\u043f\u0440\u0430\u0448\u0438\u0432\u0430\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435 \u0444\u043e\u043d\u043e\u0432\u043e, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043f\u0440\u0438 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0435\u043d\u0438\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u043a \u043e\u043a\u043d\u0443 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0438\u043b\u0438 \u043f\u043e \u0442\u0430\u0439\u043c\u0435\u0440\u0443, \u0447\u0442\u043e\u0431\u044b \u0434\u0430\u043d\u043d\u044b\u0435 \u043e\u0441\u0442\u0430\u0432\u0430\u043b\u0438\u0441\u044c \u0430\u043a\u0442\u0443\u0430\u043b\u044c\u043d\u044b\u043c\u0438\u200b.<\/p>\n<\/li>\n<li>\n<p>\u0423\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0441\u0442\u0430\u0442\u0443\u0441\u0430\u043c\u0438: React Query \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u0435 \u0444\u043b\u0430\u0433\u0438 \u0434\u043b\u044f \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u043d\u0438\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u0438 \u0438\u043c\u0435\u0435\u0442 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0443 \u043e\u0448\u0438\u0431\u043e\u043a.<\/p>\n<\/li>\n<li>\n<p>\u041e\u0442\u043c\u0435\u043d\u0430 \u0438 \u0434\u0435\u0434\u0443\u043f\u043b\u0438\u043a\u0430\u0446\u0438\u044f \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432: React Query \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043e\u0442\u043c\u0435\u043d\u044f\u0435\u0442 \u0434\u0443\u0431\u043b\u0438\u043a\u0430\u0442\u044b \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 \u0438 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043e\u0442\u043c\u0435\u043d\u044f\u0442\u044c \u0437\u0430\u043f\u0440\u043e\u0441\u044b \u043f\u0440\u0438 \u0434\u0435\u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430, \u043f\u0440\u0435\u0434\u043e\u0442\u0432\u0440\u0430\u0449\u0430\u044f \u043d\u0435\u043d\u0443\u0436\u043d\u044b\u0435 \u0432\u044b\u0437\u043e\u0432\u044b API.<\/p>\n<\/li>\n<\/ul>\n<p>\u0423\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430:<\/p>\n<div>\n<div class=\"table\">\n<table>\n<tbody>\n<tr>\n<td>\n<p align=\"left\">npm install @tanstack\/react-query<\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<h2>QueryClient<\/h2>\n<p>\u0414\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u0440\u0430\u0431\u043e\u0442\u044b React Query \u0442\u0440\u0435\u0431\u0443\u0435\u0442 \u043e\u0431\u0435\u0440\u043d\u0443\u0442\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0432 QueryClientProvider \u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u044c \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440 QueryClient, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0446\u0435\u043d\u0442\u0440\u0430\u043b\u044c\u043d\u044b\u043c \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u043c \u0432 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0435 \u0438 \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442 \u043a\u044d\u0448\u0435\u043c \u0438 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435\u043c \u0434\u0430\u043d\u043d\u044b\u0445:<\/p>\n<div>\n<div class=\"table\">\n<table>\n<tbody>\n<tr>\n<td>\n<p align=\"left\">import { QueryClient, QueryClientProvider } from &#8216;@tanstack\/react-query&#8217;;<\/p>\n<p>const queryClient = new QueryClient();<\/p>\n<p>function App() {<br \/>\u00a0 return (<br \/>\u00a0 \u00a0 &lt;QueryClientProvider client={queryClient}&gt;<br \/>\u00a0 \u00a0 \u00a0 \u2026<br \/>\u00a0 \u00a0 &lt;\/QueryClientProvider&gt;<br \/>\u00a0 );<br \/>}<\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<p>\u0412 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440 QueryClient \u043c\u043e\u0436\u043d\u043e \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u044c \u043e\u0431\u044a\u0435\u043a\u0442 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u0438 \u0434\u043b\u044f \u0431\u0430\u0437\u043e\u0432\u043e\u0439 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u043a\u044d\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f, \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0439, \u043e\u0448\u0438\u0431\u043e\u043a, \u043f\u043e\u0432\u0442\u043e\u0440\u043e\u0432 \u0438 \u0434\u0440\u0443\u0433\u0438\u0445 \u0430\u0441\u043f\u0435\u043a\u0442\u043e\u0432 \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u0434\u0430\u043d\u043d\u044b\u043c\u0438, \u043d\u043e \u0438\u0445 \u0442\u0430\u043a\u0436\u0435 \u043c\u043e\u0436\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e \u0432\u043d\u0443\u0442\u0440\u0438 \u043b\u044e\u0431\u043e\u0433\u043e \u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u0438\u043b\u0438 \u043b\u044e\u0431\u043e\u0439 \u043c\u0443\u0442\u0430\u0446\u0438\u0438.<\/p>\n<div>\n<div class=\"table\">\n<table>\n<tbody>\n<tr>\n<td>\n<p align=\"left\">const queryClient = new QueryClient({<br \/>\u00a0 defaultOptions: { &#8230; }, <em>\/\/ \u0414\u0435\u0444\u043e\u043b\u0442\u043d\u044b\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0434\u043b\u044f \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 \u0438 \u043c\u0443\u0442\u0430\u0446\u0438\u0439<\/em><br \/>\u00a0 queryCache: { &#8230; }, \u00a0 \u00a0 <em>\/\/ \u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u043a\u044d\u0448\u0430 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432<\/em><br \/>\u00a0 mutationCache: { &#8230; },\u00a0 <em>\/\/ \u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u043a\u044d\u0448\u0430 \u043c\u0443\u0442\u0430\u0446\u0438\u0439<\/em><br \/>});<\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<p>\u0412 \u043f\u043e\u043b\u0435 <strong>defaultOptions<\/strong> \u043c\u043e\u0436\u043d\u043e \u0443\u043a\u0430\u0437\u0430\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0434\u043b\u044f \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 (queries) \u0438 \u043c\u0443\u0442\u0430\u0446\u0438\u0439 (mutations). \u0412\u043e\u0442 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438, \u043e\u0442\u043d\u043e\u0441\u044f\u0449\u0438\u0435\u0441\u044f \u043a \u0437\u0430\u043f\u0440\u043e\u0441\u0430\u043c:<\/p>\n<ul>\n<li>\n<p>queryFn \u2013 \u0444\u0443\u043d\u043a\u0446\u0438\u044f, \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u044e\u0449\u0430\u044f \u0437\u0430\u043f\u0440\u043e\u0441;<\/p>\n<\/li>\n<li>\n<p>staleTime \u2013 \u0447\u0435\u0440\u0435\u0437 \u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043c\u0438\u043b\u043b\u0438\u0441\u0435\u043a\u0443\u043d\u0434 \u0434\u0430\u043d\u043d\u044b\u0435 \u043a\u044d\u0448\u0430 \u0431\u0443\u0434\u0443\u0442 \u0441\u0447\u0438\u0442\u0430\u0442\u044c\u0441\u044f \u0443\u0441\u0442\u0430\u0440\u0435\u0432\u0448\u0438\u043c\u0438 \u0438 React Query \u0440\u0435\u0448\u0438\u0442 \u0438\u0445 \u043e\u0431\u043d\u043e\u0432\u0438\u0442\u044c (\u043c\u043e\u0436\u043d\u043e \u0434\u0430\u0436\u0435 \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u044c Infinity \u0438 \u0442\u043e\u0433\u0434\u0430 \u0434\u0430\u043d\u043d\u044b\u0435 \u043d\u0438\u043a\u043e\u0433\u0434\u0430 \u043d\u0435 \u0443\u0441\u0442\u0430\u0440\u0435\u044e\u0442);<\/p>\n<\/li>\n<li>\n<p>gcTime \u2013 \u0447\u0435\u0440\u0435\u0437 \u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043c\u0438\u043b\u043b\u0438\u0441\u0435\u043a\u0443\u043d\u0434 \u043d\u0435\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u043a\u044d\u0448\u0430 \u0431\u0443\u0434\u0443\u0442 \u0443\u0434\u0430\u043b\u0435\u043d\u044b \u0441\u0431\u043e\u0440\u0449\u0438\u043a\u043e\u043c \u043c\u0443\u0441\u043e\u0440\u0430;<\/p>\n<\/li>\n<li>\n<p>retry \u2013 \u043a\u043e\u043b-\u0432\u043e \u043f\u043e\u043f\u044b\u0442\u043e\u043a \u043f\u043e\u0432\u0442\u043e\u0440\u0430, \u0435\u0441\u043b\u0438 \u0437\u0430\u043f\u0440\u043e\u0441 \u043f\u0440\u043e\u0432\u0430\u043b\u0438\u0442\u0441\u044f (\u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e 3), \u043f\u0440\u0438 \u044d\u0442\u043e\u043c \u043f\u043e\u043b\u0435 \u043c\u043e\u0436\u0435\u0442 \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0442\u044c \u043a\u0430\u043a \u0447\u0438\u0441\u043b\u043e, \u0442\u0430\u043a \u0438 \u0431\u0443\u043b\u0435\u0432\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0438\u043b\u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u044e;<\/p>\n<\/li>\n<li>\n<p>retryDelay \u2013 \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0438\u043b\u0438 \u0447\u0438\u0441\u043b\u043e, \u0447\u0435\u0440\u0435\u0437 \u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043c\u0438\u043b\u043b\u0438\u0441\u0435\u043a\u0443\u043d\u0434 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u044c \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u044b\u0439 \u0437\u0430\u043f\u0440\u043e\u0441;<\/p>\n<\/li>\n<li>\n<p>refetchOnWindowFocus \u2013 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 \u0434\u0430\u043d\u043d\u044b\u0445 \u0432\u043e \u0432\u0440\u0435\u043c\u044f \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0435\u043d\u0438\u044f \u043d\u0430 \u0432\u043a\u043b\u0430\u0434\u043a\u0443 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435;<\/p>\n<\/li>\n<li>\n<p>refetchOnReconnect \u2013 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0442\u044c \u043b\u0438 \u0434\u0430\u043d\u043d\u044b\u0435 \u043f\u0440\u0438 \u0432\u043e\u0441\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0438 \u0441\u043e\u0435\u0434\u0438\u043d\u0435\u043d\u0438\u044f;<\/p>\n<\/li>\n<li>\n<p>refetchOnMount \u2013 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0442\u044c \u043b\u0438 \u0434\u0430\u043d\u043d\u044b\u0435 \u043f\u0440\u0438 \u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430;<\/p>\n<\/li>\n<li>\n<p>enabled \u2013 \u0431\u0443\u0434\u0443\u0442 \u043b\u0438 \u0437\u0430\u043f\u0440\u043e\u0441\u044b \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u044c\u0441\u044f \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e;<\/p>\n<\/li>\n<li>\n<p>structuralSharing \u2013 \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0438\u043b\u0438 \u0431\u0443\u043b\u0435\u0432\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0434\u043b\u044f \u043f\u0440\u0435\u0434\u043e\u0442\u0432\u0440\u0430\u0449\u0435\u043d\u0438\u044f \u043b\u0438\u0448\u043d\u0438\u0445 \u0440\u0435\u0440\u0435\u043d\u0434\u0435\u0440\u043e\u0432 \u043f\u0440\u0438 \u0441\u0432\u0435\u0440\u043a\u0435 \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u044b\u0445 \u0434\u0430\u043d\u043d\u044b\u0445 (\u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e true).<\/p>\n<\/li>\n<\/ul>\n<p>\u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0434\u043b\u044f \u043c\u0443\u0442\u0430\u0446\u0438\u0439:<\/p>\n<ul>\n<li>\n<p>retry, retryDelay, gcTime \u2013 \u043f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0442\u043e \u0436\u0435 \u0441\u0430\u043c\u043e\u0435, \u0447\u0442\u043e \u0438 \u0443 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 (staleTime \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0443\u0435\u0442);<\/p>\n<\/li>\n<li>\n<p>mutationFn \u2013 \u0444\u0443\u043d\u043a\u0446\u0438\u044f, \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u044e\u0449\u0430\u044f \u043c\u0443\u0442\u0430\u0446\u0438\u044e;<\/p>\n<\/li>\n<li>\n<p>onMutate \u2013 \u0444\u0443\u043d\u043a\u0446\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0437\u0432\u0430\u043d\u0430 \u043f\u0435\u0440\u0435\u0434 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435\u043c \u043c\u0443\u0442\u0430\u0446\u0438\u0438 (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043f\u043e\u043b\u0435\u0437\u043d\u043e \u0434\u043b\u044f \u043e\u043f\u0442\u0438\u043c\u0438\u0441\u0442\u0438\u0447\u043d\u044b\u0445 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0439);<\/p>\n<\/li>\n<li>\n<p>onSuccess \u2013 \u0444\u0443\u043d\u043a\u0446\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0430 \u043f\u043e\u0441\u043b\u0435 \u0443\u0441\u043f\u0435\u0448\u043d\u043e\u0433\u043e \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u043c\u0443\u0442\u0430\u0446\u0438\u0438;<\/p>\n<\/li>\n<li>\n<p>onError \u2013 \u0444\u0443\u043d\u043a\u0446\u0438\u044f, \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u043c\u0430\u044f \u043f\u043e\u0441\u043b\u0435 \u043e\u0448\u0438\u0431\u043a\u0438;<\/p>\n<\/li>\n<li>\n<p>onSettled \u2013 \u0444\u0443\u043d\u043a\u0446\u0438\u044f, \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u043c\u0430\u044f \u043a\u0430\u043a \u043f\u043e\u0441\u043b\u0435 \u0443\u0441\u043f\u0435\u0445\u0430, \u0442\u0430\u043a \u0438 \u043f\u043e\u0441\u043b\u0435 \u043e\u0448\u0438\u0431\u043a\u0438.<\/p>\n<\/li>\n<\/ul>\n<div>\n<div class=\"table\">\n<table>\n<tbody>\n<tr>\n<td>\n<p align=\"left\">const queryClient = new QueryClient({<br \/>\u00a0 defaultOptions: {<br \/>\u00a0 \u00a0 mutations: {<br \/>\u00a0 \u00a0 \u00a0 retry: 3,<br \/>\u00a0 \u00a0 \u00a0 onError: (error) =&gt; console.error(error.message),<br \/>\u00a0 \u00a0 \u00a0 onSuccess: (data) =&gt; console.log(&#8216;\u0423\u0441\u043f\u0435\u0448\u043d\u043e\u0435 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 \u043c\u0443\u0442\u0430\u0446\u0438\u0438&#8217;, data),<br \/>\u00a0 \u00a0 \u00a0 onMutate: (variables) =&gt; console.log(&#8216;\u041c\u0443\u0442\u0430\u0446\u0438\u044f \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f&#8217;, variables),<br \/>\u00a0 \u00a0 \u00a0 onSettled: (data, error) =&gt; console.log(&#8216;\u041e\u0448\u0438\u0431\u043a\u0430 \/ \u0443\u0441\u043f\u0435\u0445&#8217;, error ?? data)<br \/>\u00a0 \u00a0 },<br \/>\u00a0 },<br \/>});<\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<p>\u0414\u043b\u044f \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440\u0430 QueryClient \u0432\u043d\u0443\u0442\u0440\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0435\u0441\u0442\u044c \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0439 \u0445\u0443\u043a <strong>useQueryClient<\/strong>. \u042d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440 \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u043f\u043e\u043b\u0435\u0437\u043d\u044b\u0435 \u043c\u0435\u0442\u043e\u0434\u044b \u0434\u043b\u044f \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u043c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435\u043c:<\/p>\n<ul>\n<li>\n<p>invalidateQueries \u2013 \u043f\u043e\u043c\u0435\u0447\u0430\u0435\u0442 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0451\u043d\u043d\u044b\u0435 \u0437\u0430\u043f\u0440\u043e\u0441\u044b \u043a\u0430\u043a \u0443\u0441\u0442\u0430\u0440\u0435\u0432\u0448\u0438\u0435, \u0447\u0442\u043e\u0431\u044b React Query \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u043b \u0438\u0445 \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u044b\u0439 \u0432\u044b\u0437\u043e\u0432;<\/p>\n<\/li>\n<li>\n<p>refetchQueries \u2013 \u043d\u0435\u043c\u0435\u0434\u043b\u0435\u043d\u043d\u043e \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442 \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u044b\u0439 \u0432\u044b\u0437\u043e\u0432 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432;<\/p>\n<\/li>\n<li>\n<p>setQueryData \u2013 \u0437\u0430\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u0442 \u0434\u0430\u043d\u043d\u044b\u0435 \u043f\u043e \u0437\u0430\u043f\u0440\u043e\u0441\u0443 \u0432 \u043a\u044d\u0448 \u0432\u0440\u0443\u0447\u043d\u0443\u044e, \u0447\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u043f\u0440\u0438\u0433\u043e\u0434\u0438\u0442\u044c\u0441\u044f \u043f\u0440\u0438 \u043e\u043f\u0442\u0438\u043c\u0438\u0441\u0442\u0438\u0447\u043d\u043e\u043c \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0438 \u0438\u043b\u0438 \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u0438\u0437\u0430\u0446\u0438\u0438 \u0434\u0430\u043d\u043d\u044b\u0445 \u043f\u043e\u0441\u043b\u0435 \u043c\u0443\u0442\u0430\u0446\u0438\u0438;<\/p>\n<\/li>\n<li>\n<p>getQueryData \u2013 \u0447\u0442\u0435\u043d\u0438\u0435 \u0434\u0430\u043d\u043d\u044b\u0445 \u0438\u0437 \u043a\u044d\u0448\u0430 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432;<\/p>\n<\/li>\n<li>\n<p>getQueryCache \u2013 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u043e\u0431\u044a\u0435\u043a\u0442 QueryCache \u0434\u043b\u044f \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043a\u044d\u0448\u0435\u043c \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432;<\/p>\n<\/li>\n<li>\n<p>getMutationCache \u2013 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u043e\u0431\u044a\u0435\u043a\u0442 MutationCache \u0434\u043b\u044f \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043a\u044d\u0448\u0435\u043c \u043c\u0443\u0442\u0430\u0446\u0438\u0439;<\/p>\n<\/li>\n<li>\n<p>clear \u2013 \u043f\u043e\u043b\u043d\u0430\u044f \u043e\u0447\u0438\u0441\u0442\u043a\u0430 \u043a\u044d\u0448\u0430.<\/p>\n<\/li>\n<\/ul>\n<div>\n<div class=\"table\">\n<table>\n<tbody>\n<tr>\n<td>\n<p align=\"left\">const queryClient = useQueryClient();<\/p>\n<p><em>\/\/ \u0418\u043d\u0432\u0430\u043b\u0438\u0434\u0438\u0440\u0443\u0435\u043c \u0437\u0430\u043f\u0440\u043e\u0441 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439 \u0434\u043b\u044f \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e\u0433\u043e \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f<\/em><br \/>queryClient.invalidateQueries({ queryKey: [&#8216;users&#8217;] });<\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<h3>QueryCache<\/h3>\n<p>QueryCache \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0437\u0432\u0430\u0442\u044c \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0435\u043c \u0432\u0441\u0435\u0445 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438. \u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, \u043a\u043e\u0433\u0434\u0430 React Query \u0441\u043e\u0431\u0438\u0440\u0430\u0435\u0442\u0441\u044f \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u044c \u0437\u0430\u043f\u0440\u043e\u0441, \u043e\u043d \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u0441\u043c\u043e\u0442\u0440\u0438\u0442, \u0435\u0441\u0442\u044c \u043b\u0438 \u0434\u0430\u043d\u043d\u044b\u0435 \u0432 \u043a\u044d\u0448\u0435 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432. \u0415\u0441\u043b\u0438 \u043e\u043d\u0438 \u0435\u0441\u0442\u044c \u0438 \u0430\u043a\u0442\u0443\u0430\u043b\u044c\u043d\u044b (staleTime), \u0442\u043e \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u044e\u0442\u0441\u044f \u044d\u0442\u0438 \u0434\u0430\u043d\u043d\u044b\u0435. \u0415\u0441\u043b\u0438 \u0436\u0435 \u0442\u0430\u043a\u0438\u0445 \u0434\u0430\u043d\u043d\u044b\u0445 \u043d\u0435\u0442 \u0438\u043b\u0438 \u043e\u043d\u0438 \u043d\u0435\u0430\u043a\u0442\u0443\u0430\u043b\u044c\u043d\u044b, \u0442\u043e React Query \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442 \u0437\u0430\u043f\u0440\u043e\u0441 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440 \u0438 \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u0442 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u0432 \u043a\u044d\u0448 \u043d\u0430 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0451\u043d\u043d\u043e\u0435 \u0432\u0440\u0435\u043c\u044f (gcTime) \u0438 \u0441\u0447\u0438\u0442\u0430\u0435\u0442 \u0438\u0445 \u0441\u0432\u0435\u0436\u0438\u043c\u0438 \u0434\u043e \u043e\u043a\u043e\u043d\u0447\u0430\u043d\u0438\u044f staleTime.<\/p>\n<p>QueryCache \u043d\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0432 QueryClient \u2013 \u0441\u043e\u0437\u0434\u0430\u0451\u0442\u0441\u044f \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440 QueryCache \u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u0451\u0442\u0441\u044f \u0432 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440 QueryClient.<\/p>\n<div>\n<div class=\"table\">\n<table>\n<tbody>\n<tr>\n<td>\n<p align=\"left\">const queryCache = new QueryCache({<br \/> <em>\/\/ \u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u043a\u044d\u0448\u0430<\/em><br \/>});<\/p>\n<p>const queryClient = new QueryClient({<br \/> queryCache,<br \/>});<\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<p>\u0412 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440\u0430 QueryCache \u043c\u043e\u0436\u043d\u043e \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u044c \u043e\u0431\u044a\u0435\u043a\u0442 \u0441 \u043f\u043e\u043b\u044f\u043c\u0438 onSuccess, onError \u0438 onSettled, \u043e\u0437\u043d\u0430\u0447\u0430\u044e\u0449\u0438\u0435 \u0442\u043e \u0436\u0435 \u0441\u0430\u043c\u043e\u0435, \u0447\u0442\u043e \u0438 \u0442\u0435 \u0436\u0435 \u043f\u043e\u043b\u044f \u0434\u043b\u044f \u043c\u0443\u0442\u0430\u0446\u0438\u0439 \u0432 defaultOptions.mutations, \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u0438\u043c\u0435\u043d\u0438\u043c\u043e \u043a \u0437\u0430\u043f\u0440\u043e\u0441\u0430\u043c.<\/p>\n<p>\u042d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440 QueryCache \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u0435\u0442\u043e\u0434\u044b \u0434\u043b\u044f \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043a\u044d\u0448\u0435\u043c:<\/p>\n<ul>\n<li>\n<p>find \u2013 \u043f\u043e\u0438\u0441\u043a \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u043d\u043e\u0433\u043e \u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u043f\u043e \u043a\u043b\u044e\u0447\u0443 \u0438 \u0434\u0440\u0443\u0433\u0438\u043c \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430\u043c;<\/p>\n<\/li>\n<li>\n<p>findAll \u2013 \u043f\u043e\u0438\u0441\u043a \u0432\u0441\u0435\u0445 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432;<\/p>\n<\/li>\n<li>\n<p>get \u2013 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u0437\u0430\u043f\u0440\u043e\u0441 \u043f\u043e \u0435\u0433\u043e \u0445\u044d\u0448\u0443;<\/p>\n<\/li>\n<li>\n<p>getAll \u2013 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u0432\u0441\u0435 \u0437\u0430\u043f\u0440\u043e\u0441\u044b \u0432 \u043a\u044d\u0448\u0435;<\/p>\n<\/li>\n<li>\n<p>remove \u2013 \u0443\u0434\u0430\u043b\u044f\u0435\u0442 \u0437\u0430\u043f\u0440\u043e\u0441 \u0438\u0437 \u043a\u044d\u0448\u0430;<\/p>\n<\/li>\n<li>\n<p>clear \u2013 \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u043e\u0447\u0438\u0449\u0430\u0435\u0442 \u043a\u044d\u0448 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432.<\/p>\n<\/li>\n<\/ul>\n<div>\n<div class=\"table\">\n<table>\n<tbody>\n<tr>\n<td>\n<p align=\"left\"><em>\/\/ \u041f\u043e\u043b\u0443\u0447\u0430\u0435\u043c QueryCache \u0438\u0437 QueryClient<\/em><br \/>const queryCache = queryClient.getQueryCache();<\/p>\n<p align=\"left\"><em>\/\/ \u0418\u0449\u0435\u043c \u0437\u0430\u043f\u0440\u043e\u0441 \u043f\u043e \u043a\u043b\u044e\u0447\u0443<\/em><br \/>const query = queryCache.find({ queryKey: [&#8216;users&#8217;] });<\/p>\n<p align=\"left\"><em>\/\/ \u0423\u0434\u0430\u043b\u044f\u0435\u043c \u0437\u0430\u043f\u0440\u043e\u0441 \u0438\u0437 \u043a\u044d\u0448\u0430<\/em><br \/>if (query) {<br \/>\u00a0 queryCache.remove(query);<br \/>}<\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<p>\u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043e\u0447\u0438\u0449\u0430\u0442\u044c \u043a\u044d\u0448 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043f\u043e\u0441\u043b\u0435 \u0432\u044b\u0445\u043e\u0434\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u0438\u0437 \u043f\u0440\u043e\u0444\u0438\u043b\u044f, \u0442\u0430\u043a \u043a\u0430\u043a \u044d\u0442\u0438 \u0434\u0430\u043d\u043d\u044b\u0435 \u043d\u0430\u043c \u0431\u043e\u043b\u044c\u0448\u0435 \u043d\u0435 \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u044f\u0442\u0441\u044f.<\/p>\n<h3>MutationCache<\/h3>\n<p>\u0415\u0449\u0451 \u043e\u0434\u0438\u043d \u043e\u0431\u044a\u0435\u043a\u0442 \u0434\u043b\u044f \u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u043a\u044d\u0448\u0430, \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u043b\u044f \u043c\u0443\u0442\u0430\u0446\u0438\u0439. \u0422\u0430\u043a \u0436\u0435 \u0441\u043e\u0437\u0434\u0430\u0451\u0442\u0441\u044f \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440 MutationCache \u0438 \u043f\u0440\u043e\u0431\u0440\u0430\u0441\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0432 QueryClient \u043f\u0440\u0438 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438. \u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 MutationCache \u0438\u0434\u0435\u043d\u0442\u0438\u0447\u043d\u0430 QueryCache \u0438 \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u0432 \u0441\u0435\u0431\u044f \u0442\u0435 \u0436\u0435 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b.<\/p>\n<div>\n<div class=\"table\">\n<table>\n<tbody>\n<tr>\n<td>\n<p align=\"left\">const mutationCache = new MutationCache({<br \/> <em>\/\/ \u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u043a\u044d\u0448\u0430<\/em><br \/>});<\/p>\n<p>const queryClient = new QueryClient({<br \/> mutationCache,<br \/>});<\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<p>\u042d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440 MutationCache \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u043f\u043e\u0445\u043e\u0436\u0438\u0435 \u043c\u0435\u0442\u043e\u0434\u044b QueryCache, \u043d\u043e \u0434\u043b\u044f \u043c\u0443\u0442\u0430\u0446\u0438\u0439:<\/p>\n<ul>\n<li>\n<p>find \u2013 \u043f\u043e\u0438\u0441\u043a \u043c\u0443\u0442\u0430\u0446\u0438\u0438 \u043f\u043e \u043a\u043b\u044e\u0447\u0443 \u0438\u043b\u0438 \u0434\u0440\u0443\u0433\u0438\u043c \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430\u043c;<\/p>\n<\/li>\n<li>\n<p>findAll \u2013 \u043f\u043e\u0438\u0441\u043a \u0432\u0441\u0435\u0445 \u043c\u0443\u0442\u0430\u0446\u0438\u0439;<\/p>\n<\/li>\n<li>\n<p>getAll \u2013 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u0432\u0441\u0435 \u043c\u0443\u0442\u0430\u0446\u0438\u0438 \u0432 \u043a\u044d\u0448\u0435;<\/p>\n<\/li>\n<li>\n<p>remove \u2013 \u0443\u0434\u0430\u043b\u044f\u0435\u0442 \u043c\u0443\u0442\u0430\u0446\u0438\u044e \u0438\u0437 \u043a\u044d\u0448\u0430;<\/p>\n<\/li>\n<li>\n<p>clear \u2013 \u043e\u0447\u0438\u0449\u0430\u0435\u0442 \u0432\u0435\u0441\u044c \u043a\u044d\u0448 \u043c\u0443\u0442\u0430\u0446\u0438\u0439.<\/p>\n<\/li>\n<\/ul>\n<div>\n<div class=\"table\">\n<table>\n<tbody>\n<tr>\n<td>\n<p align=\"left\"><em>\/\/ \u041f\u043e\u043b\u0443\u0447\u0430\u0435\u043c MutationCache \u0438\u0437 QueryClient<\/em><br \/>const mutationCache = queryClient.getMutationCache();<\/p>\n<p><em>\/\/ \u0418\u0449\u0435\u043c \u043c\u0443\u0442\u0430\u0446\u0438\u044e \u043f\u043e \u043a\u043b\u044e\u0447\u0443<\/em><br \/>const mutation = mutationCache.find({ mutationKey: [&#8216;users&#8217;, &#8216;edit&#8217;] });<\/p>\n<p><em>\/\/ \u0423\u0434\u0430\u043b\u044f\u0435\u043c \u0437\u0430\u043f\u0440\u043e\u0441 \u0438\u0437 \u043a\u044d\u0448\u0430<\/em><br \/>if (mutation) {<br \/>\u00a0 mutationCache.remove(mutation);<br \/>}<\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<h2>\u0417\u0430\u043f\u0440\u043e\u0441\u044b<\/h2>\n<p>\u0414\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u0437\u0430\u043f\u0440\u043e\u0441\u0430\u043c\u0438 React Query \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u0435\u0442 \u0445\u0443\u043a <strong>useQuery<\/strong>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043b\u0435\u0433\u043a\u043e \u043f\u043e\u043b\u0443\u0447\u0430\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435 \u0441 \u0441\u0435\u0440\u0432\u0435\u0440\u0430 \u0438 \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u0438\u0445 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435\u043c. \u0412\u0434\u043e\u0431\u0430\u0432\u043e\u043a \u043a \u044d\u0442\u043e\u043c\u0443, \u043e\u043d \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0434\u0435\u043b\u0430\u0435\u0442 \u043a\u044d\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435, \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u044b\u0435 \u0437\u0430\u043f\u0440\u043e\u0441\u044b \u0438 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 \u0434\u0430\u043d\u043d\u044b\u0445.<\/p>\n<p>useQuery \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u0434\u0432\u0430 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430:<\/p>\n<ul>\n<li>\n<p>options \u2013 \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u043e\u0431\u044a\u0435\u043a\u0442 \u0441 \u043e\u043f\u0446\u0438\u044f\u043c \u0434\u043b\u044f \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0437\u0430\u043f\u0440\u043e\u0441\u0430;<\/p>\n<\/li>\n<li>\n<p>queryClient \u2013 \u043d\u0435\u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u043e\u0431\u044a\u0435\u043a\u0442 \u0434\u043b\u044f \u043f\u0435\u0440\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u0431\u0430\u0437\u043e\u0432\u043e\u0433\u043e QueryClient.<\/p>\n<\/li>\n<\/ul>\n<p>\u0412 options \u043f\u0435\u0440\u0435\u0434\u0430\u044e\u0442\u0441\u044f \u0442\u0435 \u0436\u0435 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b, \u0447\u0442\u043e \u0438 \u0432 defaultOptions.queries \u0432\u043d\u0443\u0442\u0440\u0438 QueryClient, \u043d\u043e \u0441 \u0442\u0435\u043c \u043e\u0442\u043b\u0438\u0447\u0438\u0435\u043c, \u0447\u0442\u043e \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 useQuery \u0431\u0443\u0434\u0443\u0442 \u043f\u0435\u0440\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0442\u044c \u0431\u0430\u0437\u043e\u0432\u044b\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f, \u0443\u043a\u0430\u0437\u0430\u043d\u043d\u044b\u0435 \u0432 QueryClient. \u0412\u043e\u0442 \u043d\u0430\u0438\u0431\u043e\u043b\u0435\u0435 \u0432\u0430\u0436\u043d\u044b\u0435 \u0438\u0437 \u043d\u0438\u0445:<\/p>\n<ul>\n<li>\n<p>queryKey \u2013 \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u0439 \u043a\u043b\u044e\u0447 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0437\u0430\u043f\u0440\u043e\u0441\u0430;<\/p>\n<\/li>\n<li>\n<p>queryFn \u2013 \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0434\u043b\u044f \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u0437\u0430\u043f\u0440\u043e\u0441\u0430;<\/p>\n<\/li>\n<li>\n<p>enabled \u2013 \u0444\u043b\u0430\u0433, \u0432\u043a\u043b\u044e\u0447\u0430\u044e\u0449\u0438\u0439 \/ \u0432\u044b\u043a\u043b\u044e\u0447\u0430\u044e\u0449\u0438\u0439 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0435 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 \u0437\u0430\u043f\u0440\u043e\u0441\u0430;<\/p>\n<\/li>\n<li>\n<p>select \u2013 \u0444\u0443\u043d\u043a\u0446\u0438\u044f, \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0449\u0430\u044f \u0442\u0440\u0430\u043d\u0441\u0444\u043e\u0440\u043c\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435;<\/p>\n<\/li>\n<li>\n<p>initialData \u2013 \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435;<\/p>\n<\/li>\n<li>\n<p>meta \u2013 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u0430\u044f \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044f \u0434\u043b\u044f \u0437\u0430\u043f\u0440\u043e\u0441\u0430.<\/p>\n<\/li>\n<\/ul>\n<p>\u041e\u0431\u044a\u0435\u043a\u0442 options \u0442\u0440\u0435\u0431\u0443\u0435\u0442 \u0443\u043a\u0430\u0437\u0430\u0442\u044c \u043b\u0438\u0448\u044c \u043e\u0434\u043d\u043e \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 <strong>queryKey<\/strong> \u2013 \u043a\u043b\u044e\u0447 \u0437\u0430\u043f\u0440\u043e\u0441\u0430. React Query \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442 \u043a\u044d\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u044d\u0442\u0438\u0445 \u043a\u043b\u044e\u0447\u0435\u0439, \u043a \u0442\u043e\u043c\u0443 \u0436\u0435, \u0435\u0441\u043b\u0438 \u043a\u043b\u044e\u0447 \u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f, \u0437\u0430\u043f\u0440\u043e\u0441 \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d \u0437\u0430\u043d\u043e\u0432\u043e. \u0422\u0430\u043a\u0438\u0435 \u043a\u043b\u044e\u0447\u0438 \u0434\u043e\u043b\u0436\u043d\u044b \u0431\u044b\u0442\u044c \u043c\u0430\u0441\u0441\u0438\u0432\u043e\u043c \u0432\u0435\u0440\u0445\u043d\u0435\u0433\u043e \u0443\u0440\u043e\u0432\u043d\u044f \u0438 \u0441\u043f\u043e\u0441\u043e\u0431\u043d\u044b \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442\u044c \u0432 \u0441\u0435\u0431\u0435 \u043a\u0430\u043a \u043f\u0440\u0438\u043c\u0438\u0442\u0438\u0432\u044b, \u0442\u0430\u043a \u0438 \u043e\u0431\u044a\u0435\u043a\u0442\u044b. \u041a\u043b\u044e\u0447 \u0434\u043e\u043b\u0436\u0435\u043d \u0431\u044b\u0442\u044c \u0443\u043d\u0438\u043a\u0430\u043b\u0435\u043d \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0441\u043e\u0437\u0434\u0430\u044e\u0449\u0435\u0433\u043e\u0441\u044f \u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u0438 \u0432\u043a\u043b\u044e\u0447\u0430\u0442\u044c \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0431\u0443\u0434\u0443\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0432 \u0437\u0430\u043f\u0440\u043e\u0441\u0435.<\/p>\n<div>\n<div class=\"table\">\n<table>\n<tbody>\n<tr>\n<td>\n<p align=\"left\">const useFetchUsers = () =&gt; useQuery({<br \/>\u00a0 \u00a0 queryKey: [&#8216;users&#8217;],<br \/>});<\/p>\n<p>const useFetchUser = (id: number) =&gt; useQuery({<br \/>\u00a0 \u00a0 queryKey: [&#8216;users&#8217;, id],<br \/>});<\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<p>\u041f\u043e \u043a\u043b\u044e\u0447\u0430\u043c \u0442\u0430\u043a\u0436\u0435 \u043c\u043e\u0436\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u043b\u0443\u0447\u0430\u0442\u044c \u0437\u0430\u043f\u0440\u043e\u0441\u044b \u0438\u0437 \u043a\u044d\u0448\u0430 QueryCache \u0438\u043b\u0438 \u0434\u0435\u043b\u0430\u0442\u044c \u0434\u0440\u0443\u0433\u0438\u0435 \u043c\u0430\u043d\u0438\u043f\u0443\u043b\u044f\u0446\u0438\u0438, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043f\u043e\u043c\u0435\u0442\u0438\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435 \u043a\u0430\u043a \u0443\u0441\u0442\u0430\u0440\u0435\u0432\u0448\u0438\u0435.<\/p>\n<p>\u0414\u0440\u0443\u0433\u043e\u0439 \u0432\u0430\u0436\u043d\u044b\u0439 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440 \u2013 <strong>queryFn<\/strong> \u2013 \u0444\u0443\u043d\u043a\u0446\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0434\u043b\u044f \u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u0434\u0430\u043d\u043d\u044b\u0445. \u0422\u0430\u043a \u043a\u0430\u043a \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0434\u0430\u043d\u043d\u044b\u0435 \u0438\u0437 API, \u043e\u043d\u0430 \u0434\u043e\u043b\u0436\u043d\u0430 \u0431\u044b\u0442\u044c \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u043e\u0439 (\u043d\u043e \u0434\u0430\u0436\u0435 \u044d\u0442\u043e \u043d\u0435 \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u0438 \u043c\u043e\u0436\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u044b\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438). \u0424\u0443\u043d\u043a\u0446\u0438\u044f queryFn \u043c\u043e\u0436\u0435\u0442 \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0442\u044c \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u0430 \u043e\u0431\u044a\u0435\u043a\u0442 \u0441 \u043f\u043e\u043b\u044f\u043c\u0438 meta, queryKey \u0438 signal.<\/p>\n<div>\n<div class=\"table\">\n<table>\n<tbody>\n<tr>\n<td>\n<p align=\"left\">const fetchUsers = async () =&gt; {<br \/>\u00a0 \u00a0 const response = await fetch(&#8216;\/api\/users&#8217;);<\/p>\n<p>\u00a0 \u00a0 if (!response.ok) throw new Error();<br \/>\u00a0 \u00a0 return await response.json();<br \/>};<\/p>\n<p>const useFetchUsers = () =&gt; useQuery({<br \/>\u00a0 \u00a0 queryKey: [&#8216;users&#8217;],<br \/>\u00a0 \u00a0 queryFn: fetchUsers,<br \/>});<\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<p>\u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u0438 \u0435\u0433\u043e \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c queryKey \u0438 queryFn \u0438 \u0432\u044b\u0437\u0432\u0430\u0442\u044c \u0445\u0443\u043a \u0432\u043d\u0443\u0442\u0440\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430. \u0422\u043e\u0433\u0434\u0430 \u0437\u0430\u043f\u0440\u043e\u0441 \u0431\u0443\u0434\u0435\u0442 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d (\u0435\u0441\u043b\u0438 \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0435 enabled = false).<\/p>\n<div>\n<div class=\"table\">\n<table>\n<tbody>\n<tr>\n<td>\n<p align=\"left\">const Users = () =&gt; {<br \/>\u00a0 \u00a0 const { data, isFetching, error } = useFetchUsers();<br \/>\u00a0 \u00a0 <br \/>\u00a0 \u00a0 if (isFetching) return &lt;p&gt;\u0417\u0430\u0433\u0440\u0443\u0437\u043a\u0430&lt;\/p&gt;;<br \/>\u00a0 \u00a0 if (error) return &lt;p&gt;\u041e\u0448\u0438\u0431\u043a\u0430: {error.message}&lt;\/p&gt;;<br \/>\u00a0 \u00a0 return &lt;ul&gt;<br \/>\u00a0 \u00a0 \u00a0 \u00a0 {data?.map((user) =&gt; (<br \/>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 &lt;li key={user.id}&gt;{user.name}&lt;\/li&gt;<br \/>\u00a0 \u00a0 \u00a0 \u00a0 ))}<br \/>\u00a0 \u00a0 &lt;\/ul&gt;;<br \/>};<\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<p>\u0427\u0442\u043e\u0431\u044b \u0437\u0430\u043f\u0440\u043e\u0441 \u043d\u0435 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u043b\u0441\u044f \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438, \u043d\u0430\u0434\u043e \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440 <strong>enabled<\/strong>. \u042d\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u043f\u0440\u0438\u0433\u043e\u0434\u0438\u0442\u044c\u0441\u044f, \u043a\u043e\u0433\u0434\u0430 \u043c\u044b \u0445\u043e\u0442\u0438\u043c, \u0447\u0442\u043e\u0431\u044b \u0437\u0430\u043f\u0440\u043e\u0441 \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u043b\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u0438 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0451\u043d\u043d\u043e\u043c \u0443\u0441\u043b\u043e\u0432\u0438\u0438. \u041b\u0438\u0431\u043e \u043c\u043e\u0436\u043d\u043e \u0432\u043e\u043e\u0431\u0449\u0435 \u043e\u0442\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0435 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435, \u043f\u0435\u0440\u0435\u0434\u0430\u0432 false.<\/p>\n<div>\n<div class=\"table\">\n<table>\n<tbody>\n<tr>\n<td>\n<p align=\"left\">export const useFetchUser = (id: number) =&gt; useQuery({<br \/>\u00a0 \u00a0 queryKey: [&#8216;users&#8217;, id],<br \/>\u00a0 \u00a0 queryFn: () =&gt; fetchUser(id),<br \/>\u00a0 \u00a0 enabled: id &gt; 0,<br \/>});<\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<p>\u0415\u0441\u0442\u044c \u0435\u0449\u0451 \u043e\u0434\u0438\u043d \u0441\u043f\u043e\u0441\u043e\u0431 \u043e\u0442\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0435 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 \u0437\u0430\u043f\u0440\u043e\u0441\u0430, \u043f\u0435\u0440\u0435\u0434\u0430\u0432 \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0439 \u043c\u0430\u0440\u043a\u0435\u0440 <strong>skipToken<\/strong>, \u0447\u0442\u043e \u0443\u0434\u043e\u0431\u043d\u043e, \u043a\u043e\u0433\u0434\u0430 \u043c\u044b \u0438\u043c\u0435\u0435\u043c \u0434\u0435\u043b\u043e \u0441 TypeScript, \u0442\u0430\u043a \u043a\u0430\u043a \u044d\u0442\u043e \u0441\u043f\u0430\u0441\u0430\u0435\u0442 \u043e\u0442 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0442\u0438\u043f\u043e\u0432 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u0432 \u0432 \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0438:<\/p>\n<div>\n<div class=\"table\">\n<table>\n<tbody>\n<tr>\n<td>\n<p align=\"left\">export const useFetchUser = (id?: number) =&gt; useQuery({<br \/>\u00a0 \u00a0 queryKey: [&#8216;users&#8217;, id],<\/p>\n<p align=\"left\">\u00a0\u00a0\u00a0\u00a0<em>\/\/ id \u043d\u0435 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c undefined \u0432 fetchUser, \u043f\u0435\u0440\u0435\u0434\u0430\u0451\u043c skipToken<\/em><br \/>\u00a0 \u00a0 queryFn: id ? () =&gt; fetchUser(id) : skipToken,<br \/>});<\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<p>React Query \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0442\u0440\u0430\u043d\u0441\u0444\u043e\u0440\u043c\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435 \u043f\u0435\u0440\u0435\u0434 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043f\u043e\u043b\u044f <strong>select<\/strong>. \u0424\u0443\u043d\u043a\u0446\u0438\u044f \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u044b\u0435 \u0441 \u0441\u0435\u0440\u0432\u0435\u0440\u0430 \u0434\u0430\u043d\u043d\u044b\u0435 \u0438 \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u0443\u0435\u0442 \u0438\u0445 \u0432 \u043b\u044e\u0431\u043e\u0439 \u0434\u0440\u0443\u0433\u043e\u0439 \u0444\u043e\u0440\u043c\u0430\u0442. Select \u043c\u043e\u0436\u043d\u043e \u0434\u0430\u0436\u0435 \u043e\u0431\u0435\u0440\u043d\u0443\u0442\u044c \u0432 useCallback, \u0435\u0441\u043b\u0438 \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u044f. \u0412\u0430\u0436\u043d\u043e \u043f\u043e\u043d\u0438\u043c\u0430\u0442\u044c, \u0447\u0442\u043e \u0432 \u043a\u044d\u0448\u0435 \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u044e\u0442\u0441\u044f \u0434\u0430\u043d\u043d\u044b\u0435 \u0441\u0435\u0440\u0432\u0435\u0440\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0443\u0436\u0435 \u043f\u043e\u0442\u043e\u043c \u0442\u0440\u0430\u043d\u0441\u0444\u043e\u0440\u043c\u0438\u0440\u0443\u044e\u0442\u0441\u044f \u0447\u0435\u0440\u0435\u0437 select \u0434\u043b\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435.<\/p>\n<div>\n<div class=\"table\">\n<table>\n<tbody>\n<tr>\n<td>\n<p align=\"left\">const transformUsers = (users: User[]) =&gt; users.map((user) =&gt; ({<br \/>\u00a0 \u00a0 name: user.name,<br \/>\u00a0 \u00a0 age: user.age,<br \/>}));<\/p>\n<p>export const useFetchUsers = () =&gt; useQuery({<br \/>\u00a0 \u00a0 queryKey: [&#8216;users&#8217;],<br \/>\u00a0 \u00a0 queryFn: fetchUsers,<br \/>\u00a0 \u00a0 select: transformUsers,<br \/>});<\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<p>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f <strong>initialData<\/strong>, \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0437\u0430\u0440\u0430\u043d\u0435\u0435 \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0434\u043e \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u0437\u0430\u043f\u0440\u043e\u0441\u0430, \u0447\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043f\u043e\u043b\u0435\u0437\u043d\u043e \u0432 \u0441\u043b\u0443\u0447\u0430\u044f\u0445, \u043a\u043e\u0433\u0434\u0430 \u0434\u0430\u043d\u043d\u044b\u0435 \u043d\u0443\u0436\u043d\u043e \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c \u043c\u0433\u043d\u043e\u0432\u0435\u043d\u043d\u043e.<\/p>\n<div>\n<div class=\"table\">\n<table>\n<tbody>\n<tr>\n<td>\n<p align=\"left\">export const useFetchUser = (id: number) =&gt; {<br \/>\u00a0 \u00a0 <em>\/\/ \u041f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440 QueryClient<\/em><br \/>\u00a0 \u00a0 const queryClient = useQueryClient();<\/p>\n<p>\u00a0 \u00a0 return useQuery({<br \/>\u00a0 \u00a0 \u00a0 \u00a0 initialData: () =&gt; {<br \/>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <em>\/\/ \u0418\u0449\u0435\u043c \u0434\u0430\u043d\u043d\u044b\u0435 \u0432 \u043a\u044d\u0448\u0435 \u0438\u0437 \u0434\u0440\u0443\u0433\u043e\u0433\u043e \u0437\u0430\u043f\u0440\u043e\u0441\u0430<\/em><br \/>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 const users = queryClient.getQueryData([&#8216;users&#8217;]);<br \/>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <em>\/\/ \u0423\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u0434\u0430\u043d\u043d\u044b\u0435 \u0434\u043e \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f<\/em><br \/>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 return users?.find((user) =&gt; user.id === id);<br \/>\u00a0 \u00a0 \u00a0 \u00a0 },<br \/>\u00a0 \u00a0 \u00a0 \u00a0 queryKey: [&#8216;users&#8217;, id],<br \/>\u00a0 \u00a0 \u00a0 \u00a0 queryFn: () =&gt; fetchUser(id),<br \/>\u00a0 \u00a0 });<br \/>};<\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<p><strong>Meta<\/strong> \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u044c \u0432 \u0437\u0430\u043f\u0440\u043e\u0441 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u043c\u0435\u0442\u0430\u0434\u0430\u043d\u043d\u044b\u0435, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0437\u0430\u0442\u0435\u043c \u043c\u043e\u0436\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0432 \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0445 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430\u0445 \u0438\u043b\u0438 \u043b\u043e\u0433\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0438.<\/p>\n<div>\n<div class=\"table\">\n<table>\n<tbody>\n<tr>\n<td>\n<p align=\"left\">export const useFetchUsers = () =&gt; useQuery(<br \/>\u00a0 \u00a0 {<br \/>\u00a0 \u00a0 \u00a0 \u00a0 queryKey: [&#8216;users&#8217;],<br \/>\u00a0 \u00a0 \u00a0 \u00a0 queryFn: fetchUsers,<\/p>\n<p align=\"left\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<em>\/\/ \u0424\u043e\u0440\u043c\u0438\u0440\u0443\u0435\u043c \u043c\u0435\u0442\u0430\u0434\u0430\u043d\u043d\u044b\u0435<\/em><br \/>\u00a0 \u00a0 \u00a0 \u00a0 meta: {<br \/>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 query: &#8216;users&#8217;,<br \/>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 time: new Date(),<br \/>\u00a0 \u00a0 \u00a0 \u00a0 },<br \/>\u00a0 \u00a0 },<br \/>\u00a0 \u00a0 new QueryClient({<br \/>\u00a0 \u00a0 \u00a0 \u00a0 queryCache: new QueryCache({<br \/>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 onError: (error, query) =&gt; {<\/p>\n<p align=\"left\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<em>\/\/ \u041f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u043c\u0435\u0442\u0430\u0434\u0430\u043d\u043d\u044b\u0435<\/em><br \/>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 console.log(query.meta);<br \/>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 },<br \/>\u00a0 \u00a0 \u00a0 \u00a0 })<br \/>\u00a0 \u00a0 }),<br \/>);<\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<p>\u041f\u0440\u0438 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0438 useQuery \u0431\u0443\u0434\u0435\u0442 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0442\u044c \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e \u043f\u043e\u043b\u0435\u0437\u043d\u044b\u0445 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u0432, \u0447\u0430\u0441\u0442\u044c \u0438\u0437 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0431\u044b\u043b\u0430 \u0432 \u0443\u043a\u0430\u0437\u0430\u043d\u0430 \u0432 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0441 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u043c Users. \u0420\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0438\u0445 \u0431\u043e\u043b\u0435\u0435 \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e:<\/p>\n<ul>\n<li>\n<p>data \u2013 \u0434\u0430\u043d\u043d\u044b\u0435 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u0433\u043e \u0443\u0441\u043f\u0435\u0448\u043d\u043e \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u043d\u043e\u0433\u043e \u0437\u0430\u043f\u0440\u043e\u0441\u0430 (\u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c undefined);<\/p>\n<\/li>\n<li>\n<p>isLoading \u2013 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435, \u043a\u043e\u0433\u0434\u0430 \u0434\u0430\u043d\u043d\u044b\u0445 \u0435\u0449\u0451 \u043d\u0435\u0442 \u0432 \u043a\u044d\u0448\u0435, \u043d\u043e \u043f\u0440\u0438 \u044d\u0442\u043e\u043c \u0434\u0430\u043d\u043d\u044b\u0435 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u044e\u0442\u0441\u044f;<\/p>\n<\/li>\n<li>\n<p>isFetching \u2013 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435, \u043a\u043e\u0433\u0434\u0430 \u0434\u0430\u043d\u043d\u044b\u0435 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u044e\u0442\u0441\u044f;<\/p>\n<\/li>\n<li>\n<p>isRefetching \u2013 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e\u0439 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0434\u0430\u043d\u043d\u044b\u0445;<\/p>\n<\/li>\n<li>\n<p>isSuccess \u2013 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0443\u0441\u043f\u0435\u0448\u043d\u043e\u0433\u043e \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u0437\u0430\u043f\u0440\u043e\u0441\u0430;<\/p>\n<\/li>\n<li>\n<p>isPaused \u2013 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435, \u043a\u043e\u0433\u0434\u0430 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 \u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u043f\u0440\u0438\u043e\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u043e;<\/p>\n<\/li>\n<li>\n<p>isStale \u2013 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435, \u043a\u043e\u0433\u0434\u0430 \u0434\u0430\u043d\u043d\u044b\u0435 \u0432 \u043a\u044d\u0448\u0435 \u0443\u0441\u0442\u0430\u0440\u0435\u043b\u0438;<\/p>\n<\/li>\n<li>\n<p>isError \u2013 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043e\u0448\u0438\u0431\u043a\u0438;<\/p>\n<\/li>\n<li>\n<p>error \u2013 \u043e\u0431\u044a\u0435\u043a\u0442 \u043e\u0448\u0438\u0431\u043a\u0438 \u0438\u043b\u0438 null;<\/p>\n<\/li>\n<li>\n<p>isLoadingError \u2013 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043e\u0448\u0438\u0431\u043a\u0438 \u043f\u0440\u0438 \u043f\u0435\u0440\u0432\u043e\u043c \u0432\u044b\u0437\u043e\u0432\u0435 \u0437\u0430\u043f\u0440\u043e\u0441\u0430;<\/p>\n<\/li>\n<li>\n<p>isRefetchError \u2013 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043e\u0448\u0438\u0431\u043a\u0438 \u043f\u0440\u0438 \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e\u043c \u0432\u044b\u0437\u043e\u0432\u0435 \u0437\u0430\u043f\u0440\u043e\u0441\u0430;<\/p>\n<\/li>\n<li>\n<p>status \u2013 \u043e\u0434\u043d\u043e \u0438\u0437 \u0442\u0440\u0451\u0445 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0439 \u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u201cerror\u201d (isError), \u201csuccess\u201d (isSuccess) \u0438\u043b\u0438 \u201cpending\u201d (isPending);<\/p>\n<\/li>\n<li>\n<p>fetchStatus \u2013 \u043e\u0434\u043d\u043e \u0438\u0437 \u0442\u0440\u0451\u0445 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0439 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u201cfetching\u201d (isFetching), \u201cidle\u201d (\u0437\u0430\u043f\u0440\u043e\u0441 \u043d\u0435 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f) \u0438\u043b\u0438 \u201cpaused\u201d (isPaused);<\/p>\n<\/li>\n<li>\n<p>failureCount \u2013 \u043a\u043e\u043b-\u0432\u043e \u043f\u0440\u043e\u0432\u0430\u043b\u0435\u043d\u043d\u044b\u0445 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432;<\/p>\n<\/li>\n<li>\n<p>refetch \u2013 \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0434\u043b\u044f \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u0437\u0430\u043d\u043e\u0432\u043e \u0438\u043b\u0438 \u0437\u0430\u043f\u0443\u0441\u043a\u0430 \u0432\u0440\u0443\u0447\u043d\u0443\u044e.<\/p>\n<\/li>\n<\/ul>\n<p>\u041f\u043e \u0437\u0430\u043f\u0440\u043e\u0441\u0430\u043c \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0434\u0432\u0435\u0441\u0442\u0438 \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u0438\u0442\u043e\u0433:<\/p>\n<ol>\n<li>\n<p>\u0412 \u043f\u0435\u0440\u0432\u044b\u0439 \u0440\u0430\u0437 React Query \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442 \u0437\u0430\u043f\u0440\u043e\u0441, \u0435\u0441\u043b\u0438 enabled = true \u043b\u0438\u0431\u043e \u0437\u0430\u043f\u0440\u043e\u0441 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f \u0432\u0440\u0443\u0447\u043d\u0443\u044e \u0447\u0435\u0440\u0435\u0437 refetch.<\/p>\n<\/li>\n<li>\n<p>\u0415\u0441\u043b\u0438 \u043f\u0440\u043e\u0438\u0437\u043e\u0448\u043b\u0430 \u043e\u0448\u0438\u0431\u043a\u0430, \u0442\u043e \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u043f\u043e\u043f\u0440\u043e\u0431\u0443\u0435\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u044c \u0435\u0433\u043e \u0437\u0430\u043d\u043e\u0432\u043e \u0443\u043a\u0430\u0437\u0430\u043d\u043d\u043e\u0435 \u0432 retry \u043a\u043e\u043b-\u0432\u043e \u0440\u0430\u0437.<\/p>\n<\/li>\n<li>\n<p>\u041f\u043e\u0441\u043b\u0435 \u0443\u0441\u043f\u0435\u0448\u043d\u043e\u0433\u043e \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u0434\u0430\u043d\u043d\u044b\u0445 \u043e\u043d\u0438 \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u044e\u0442\u0441\u044f \u0432 \u043a\u044d\u0448.\u00a0<\/p>\n<\/li>\n<li>\n<p>\u041f\u043e\u043a\u0430 \u0434\u0430\u043d\u043d\u044b\u0435 \u0441\u0432\u0435\u0436\u0438\u0435 (staleTime), React Query \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u043e\u0441\u0442\u043e \u0431\u0440\u0430\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435 \u0438\u0437 \u043a\u044d\u0448\u0430 \u0432\u043c\u0435\u0441\u0442\u043e \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u0437\u0430\u043f\u0440\u043e\u0441\u0430, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0435\u0441\u043b\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0431\u044b\u043b \u0441\u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d \u0437\u0430\u043d\u043e\u0432\u043e \u0438\u043b\u0438 \u0435\u0441\u043b\u0438 \u0432\u044b\u0437\u0432\u0430\u043d \u044d\u0442\u043e\u0442 \u0436\u0435 \u0437\u0430\u043f\u0440\u043e\u0441 \u0432 \u0434\u0440\u0443\u0433\u043e\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435.<\/p>\n<\/li>\n<li>\n<p>\u041a\u0430\u043a \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u0430\u043d\u043d\u044b\u0435 \u0443\u0441\u0442\u0430\u0440\u0435\u044e\u0442, \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442 \u0437\u0430\u043f\u0440\u043e\u0441 \u0437\u0430\u043d\u043e\u0432\u043e \u0432 \u0444\u043e\u043d\u043e\u0432\u043e\u043c \u0440\u0435\u0436\u0438\u043c\u0435;<\/p>\n<\/li>\n<li>\n<p>\u0415\u0441\u043b\u0438 \u0434\u0430\u043d\u043d\u044b\u0435 \u043d\u0435 \u0431\u0443\u0434\u0443\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u044b, \u0442\u043e \u043f\u043e \u0438\u0441\u0442\u0435\u0447\u0435\u043d\u0438\u0438 gcTime \u043e\u043d\u0438 \u0432\u043e\u0432\u0441\u0435 \u0443\u0434\u0430\u043b\u044f\u044e\u0442\u0441\u044f \u0438\u0437 \u043a\u044d\u0448\u0430 \u0438 \u0432\u0435\u0441\u044c \u0430\u043b\u0433\u043e\u0440\u0438\u0442\u043c \u043d\u0430\u0447\u043d\u0451\u0442\u0441\u044f \u0437\u0430\u043d\u043e\u0432\u043e.<\/p>\n<\/li>\n<\/ol>\n<h2>\u0417\u0430\u043f\u0440\u043e\u0441\u044b \u0441 \u043f\u0430\u0433\u0438\u043d\u0430\u0446\u0438\u0435\u0439<\/h2>\n<p>\u0414\u043b\u044f \u0443\u0434\u043e\u0431\u043d\u043e\u0439 \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u0431\u043e\u043b\u044c\u0448\u0438\u043c\u0438 \u043d\u0430\u0431\u043e\u0440\u0430\u043c\u0438 \u0434\u0430\u043d\u043d\u044b\u0445, React Query \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 \u0445\u0443\u043a <strong>useInfiniteQuery<\/strong>. \u041d\u043e, \u043a\u043e\u043d\u0435\u0447\u043d\u043e, \u0441\u043f\u0435\u0440\u0432\u0430 \u043d\u0430 \u0441\u0430\u043c\u043e\u043c \u0441\u0435\u0440\u0432\u0435\u0440\u0435 \u0434\u043e\u043b\u0436\u043d\u0430 \u0431\u044b\u0442\u044c \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043d\u0430 \u043f\u0430\u0433\u0438\u043d\u0430\u0446\u0438\u044f. \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u044d\u0442\u043e\u0433\u043e \u0445\u0443\u043a\u0430 \u043f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043d\u0438\u0447\u0435\u043c \u043d\u0435 \u043e\u0442\u043b\u0438\u0447\u0430\u0435\u0442\u0441\u044f \u043e\u0442 useQuery, \u043a\u0440\u043e\u043c\u0435 \u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u043e\u043d \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0443\u0434\u043e\u0431\u043d\u0435\u0435 \u0437\u0430\u043f\u0440\u0430\u0448\u0438\u0432\u0430\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435 \u043f\u043e\u0440\u0446\u0438\u044f\u043c\u0438.<\/p>\n<p>\u0412 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0435 \u043f\u043e\u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u043f\u043e\u043b\u044f initialPageParam, getNextPageParam, getPreviousPageParam, \u0430 queryFn \u0442\u0435\u043f\u0435\u0440\u044c \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0431\u0440\u0430\u0442\u044c \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442 pageParam \u0438 \u043f\u0440\u043e\u043a\u0438\u0434\u044b\u0432\u0430\u0442\u044c \u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u0437\u0430\u043f\u0440\u043e\u0441\u0430.<\/p>\n<div>\n<div class=\"table\">\n<table>\n<tbody>\n<tr>\n<td>\n<p align=\"left\"><em>\/\/ \u0417\u0430\u043f\u0440\u043e\u0441 \u0441 \u0437\u0430\u043b\u043e\u0436\u0435\u043d\u043d\u043e\u0439 \u043f\u0430\u0433\u0438\u043d\u0430\u0446\u0438\u0435\u0439<\/em><br \/>const fetchPosts = async (page: number) =&gt; {<br \/>\u00a0 \u00a0 const response = await fetch(\/api\/posts?page=${page});<\/p>\n<p>\u00a0 \u00a0 if (!response.ok) throw new Error();<br \/>\u00a0 \u00a0 return await response.json();<br \/>};<\/p>\n<p>export const useFetchPosts = () =&gt; useInfiniteQuery({<br \/>\u00a0 \u00a0 queryKey: [&#8216;posts&#8217;],<br \/>\u00a0 \u00a0 <em>\/\/ \u041d\u0430\u0447\u0430\u043b\u044c\u043d\u044b\u0439 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440 \u0434\u043b\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u043f\u0435\u0440\u0432\u043e\u0439 \u043f\u043e\u0440\u0446\u0438\u0438 \u0434\u0430\u043d\u043d\u044b\u0445<\/em><br \/>\u00a0 \u00a0 initialPageParam: 0,<br \/>\u00a0 \u00a0 <em>\/\/ \u0417\u0430\u0433\u0440\u0443\u0437\u043a\u0430 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0439 \u043f\u043e\u0440\u0446\u0438\u0438 \u0434\u0430\u043d\u043d\u044b\u0445<\/em><br \/>\u00a0 \u00a0 queryFn: ({ pageParam }) =&gt; fetchPosts(pageParam),<br \/>\u00a0 \u00a0 <em>\/\/ \u041e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430 \u0434\u043b\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0439 \u043f\u043e\u0440\u0446\u0438\u0438<\/em><br \/>\u00a0 \u00a0 getNextPageParam: (lastPage) =&gt; lastPage.nextPage,<br \/>\u00a0 \u00a0 <em>\/\/ \u041e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430 \u0434\u043b\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u0439 \u043f\u043e\u0440\u0446\u0438\u0438<\/em><br \/>\u00a0 \u00a0 getPreviousPageParam: (lastPage) =&gt; lastPage.prevPage,<\/p>\n<p align=\"left\">\u00a0\u00a0\u00a0\u00a0<em>\/\/ \u0411\u0435\u0440\u0451\u043c \u043c\u0430\u0441\u0441\u0438\u0432 \u0441\u0442\u0440\u0430\u043d\u0438\u0446 \u0438 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u043c \u0442\u0440\u0430\u043d\u0441\u0444\u043e\u0440\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0439<\/em><br \/>\u00a0 \u00a0 select: ({ pages }) =&gt; pages.map(transformPosts),<br \/>});<\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<p>\u0422\u043e \u0435\u0441\u0442\u044c, \u0432 \u0434\u0430\u043d\u043d\u043e\u0439 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438, \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0439 \u043f\u043e\u0440\u0446\u0438\u0438 \u0434\u0430\u043d\u043d\u044b\u0445 \u0441 \u0441\u0435\u0440\u0432\u0435\u0440\u0430 \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442 \u0435\u0449\u0451 \u0434\u0432\u0430 \u043f\u043e\u043b\u044f nextPage \u0438 prevPage, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432 \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0435\u043c \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0434\u043b\u044f \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0439 \u0438 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e. \u041f\u0440\u0438 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0438 \u0434\u0430\u043d\u043d\u044b\u0445 \u0438\u0437 \u043a\u0430\u0436\u0434\u043e\u0439 \u043f\u043e\u0440\u0446\u0438\u0438 \u0445\u0443\u043a \u0441\u0430\u043c \u0433\u0440\u0443\u043f\u043f\u0438\u0440\u0443\u0435\u0442 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u0432 \u043c\u0430\u0441\u0441\u0438\u0432 \u0438\u0437 \u0441\u0442\u0440\u0430\u043d\u0438\u0446, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0437\u0430\u0442\u0435\u043c \u0438 \u043a\u044d\u0448\u0438\u0440\u0443\u0435\u0442.<\/p>\n<p>\u0425\u0443\u043a \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u043e\u0431\u044a\u0435\u043a\u0442 \u0441 \u0442\u0435\u043c\u0438 \u0436\u0435 \u043f\u043e\u043b\u044f\u043c\u0438, \u0447\u0442\u043e \u0438 useQuery, \u043d\u043e \u043a \u043d\u0438\u043c \u0434\u043e\u0431\u0430\u0432\u0438\u043b\u0438\u0441\u044c \u0435\u0449\u0451:\u00a0<\/p>\n<ul>\n<li>\n<p>isFetchingNextPage \u2013 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0439 \u043f\u043e\u0440\u0446\u0438\u0438 \u0434\u0430\u043d\u043d\u044b\u0445;<\/p>\n<\/li>\n<li>\n<p>isFetchingPreviousPage \u2013 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u0439 \u043f\u043e\u0440\u0446\u0438\u0438 \u0434\u0430\u043d\u043d\u044b\u0445;<\/p>\n<\/li>\n<li>\n<p>isFetchNextPageError \u2013 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043e\u0448\u0438\u0431\u043a\u0438 \u043f\u0440\u0438 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0438 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0439 \u043f\u043e\u0440\u0446\u0438\u0438 \u0434\u0430\u043d\u043d\u044b\u0445;<\/p>\n<\/li>\n<li>\n<p>isFetchPreviousPageError \u2013 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043e\u0448\u0438\u0431\u043a\u0438 \u043f\u0440\u0438 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0438 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u0439 \u043f\u043e\u0440\u0446\u0438\u0438 \u0434\u0430\u043d\u043d\u044b\u0445;<\/p>\n<\/li>\n<li>\n<p>hasNextPage \u2013 \u0438\u043c\u0435\u0435\u0442\u0441\u044f \u043b\u0438 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0443\u044e \u043f\u043e\u0440\u0446\u0438\u044e \u0434\u0430\u043d\u043d\u044b\u0445 (\u0440\u0430\u0441\u0441\u0447\u0438\u0442\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 getNextPageParam);<\/p>\n<\/li>\n<li>\n<p>hasPreviousPage \u2013 \u0438\u043c\u0435\u0435\u0442\u0441\u044f \u043b\u0438 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0443\u044e \u043f\u043e\u0440\u0446\u0438\u044e \u0434\u0430\u043d\u043d\u044b\u0445 (\u0440\u0430\u0441\u0441\u0447\u0438\u0442\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 getPreviousPageParam);<\/p>\n<\/li>\n<li>\n<p>fetchNextPage \u2013 \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0443\u044e \u043f\u043e\u0440\u0446\u0438\u044e \u0434\u0430\u043d\u043d\u044b\u0445;\u00a0<\/p>\n<\/li>\n<li>\n<p>fetchPreviousPage \u2013 \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044c \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0443\u044e \u043f\u043e\u0440\u0446\u0438\u044e \u0434\u0430\u043d\u043d\u044b\u0445;<\/p>\n<\/li>\n<\/ul>\n<div>\n<div class=\"table\">\n<table>\n<tbody>\n<tr>\n<td>\n<p align=\"left\">const Posts = () =&gt; {<br \/>\u00a0 \u00a0 const { data, isFetching, isFetchingNextPage, hasNextPage, fetchNextPage } = useFetchPosts();<br \/>\u00a0 \u00a0 <br \/>\u00a0 \u00a0 if (isFetching) return &lt;p&gt;\u0417\u0430\u0433\u0440\u0443\u0437\u043a\u0430&lt;\/p&gt;;<\/p>\n<p>\u00a0 \u00a0 \/\/ \u041e\u0431\u044a\u0435\u0434\u0438\u043d\u044f\u0435\u043c \u0432\u0441\u0435 \u043f\u043e\u0440\u0446\u0438\u0438 \u0432 \u043e\u0434\u043d\u0443<br \/>\u00a0 \u00a0 const posts = data?.pages.flatMap((page) =&gt; page.posts);<\/p>\n<p>\u00a0 \u00a0 return &lt;div&gt;<br \/>\u00a0 \u00a0 \u00a0 \u00a0 {posts?.map((post) =&gt; (<br \/>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 &lt;p key={post.id}&gt;{post.text}&lt;\/p&gt;<br \/>\u00a0 \u00a0 \u00a0 \u00a0 ))}<br \/>\u00a0 \u00a0 \u00a0 \u00a0 { <em>\/* \u041f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c, \u0435\u0441\u0442\u044c \u043b\u0438 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0430\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \/ }<br \/>\u00a0 \u00a0 \u00a0 \u00a0 { \/ \u0412 \u043a\u043e\u043d\u0446\u0435 \u0441\u043f\u0438\u0441\u043a\u0430 \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c \u043a\u043d\u043e\u043f\u043a\u0443 \u0434\u043b\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0439 \u043f\u043e\u0440\u0446\u0438\u0438 \u0434\u0430\u043d\u043d\u044b\u0445 *\/<\/em> }<br \/>\u00a0 \u00a0 \u00a0 \u00a0 {hasNextPage &amp;&amp; (<br \/>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 &lt;Button disabled={isFetchingNextPage} onClick={fetchNextPage}&gt;<br \/>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u0417\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044c \u0435\u0449\u0451<br \/>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 &lt;\/Button&gt;<br \/>\u00a0 \u00a0 \u00a0 \u00a0 )}<br \/>\u00a0 \u00a0 &lt;\/div&gt;;<br \/>};<\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<p>\u0412 \u0446\u0435\u043b\u043e\u043c, \u0434\u043b\u044f \u043f\u043e\u0441\u0442\u0440\u0430\u043d\u0438\u0447\u043d\u044b\u0445 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 \u043c\u043e\u0436\u0435\u0442 \u043f\u043e\u0434\u043e\u0439\u0442\u0438 \u0438 \u043e\u0431\u044b\u0447\u043d\u044b\u0439 useQuery \u0441 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u043c queryKey, \u043e\u0434\u043d\u0430\u043a\u043e \u0432 \u0441\u043b\u0443\u0447\u0430\u0435 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0432 \u0431\u0435\u0441\u043a\u043e\u043d\u0435\u0447\u043d\u043e\u043c \u0441\u043a\u0440\u043e\u043b\u043b\u0435 \u0443\u0434\u043e\u0431\u043d\u0435\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c useInfiniteQuery.<\/p>\n<h2>\u041f\u0430\u0440\u0430\u043b\u043b\u0435\u043b\u044c\u043d\u044b\u0435 \u0437\u0430\u043f\u0440\u043e\u0441\u044b<\/h2>\n<p>\u0411\u044b\u0432\u0430\u044e\u0442 \u0441\u043b\u0443\u0447\u0430\u0438, \u043a\u043e\u0433\u0434\u0430 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 \u043f\u0430\u0440\u0430\u043b\u043b\u0435\u043b\u044c\u043d\u043e. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e React Query \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u0435\u0442 \u0445\u0443\u043a useQueries.<\/p>\n<p>useQueries \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u043c\u0430\u0441\u0441\u0438\u0432 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u0439 \u0438 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u043c\u0430\u0441\u0441\u0438\u0432 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u043e\u0432 (\u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u043e useQuery, \u043d\u043e \u0434\u043b\u044f \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432).<\/p>\n<div>\n<div class=\"table\">\n<table>\n<tbody>\n<tr>\n<td>\n<p align=\"left\">export const useFetchProfileInfo = () =&gt; useQueries({<br \/>\u00a0 \u00a0 queries: [<br \/>\u00a0 \u00a0 \u00a0 \u00a0 { queryKey: [&#8216;profile&#8217;], queryFn: fetchProfile },<br \/>\u00a0 \u00a0 \u00a0 \u00a0 { queryKey: [&#8216;settings&#8217;], queryFn: fetchSettings },<br \/>\u00a0 \u00a0 ],<br \/>});<\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<p>\u041a \u0442\u043e\u043c\u0443 \u0436\u0435 useQueries \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u044c \u043f\u0430\u0440\u0430\u043b\u043b\u0435\u043b\u044c\u043d\u044b\u0435 \u0437\u0430\u043f\u0440\u043e\u0441\u044b \u043f\u0440\u044f\u043c\u043e \u0438\u0437 \u043c\u0430\u0441\u0441\u0438\u0432\u0430.<\/p>\n<div>\n<div class=\"table\">\n<table>\n<tbody>\n<tr>\n<td>\n<p align=\"left\">const userIds = [1, 2, 3];<\/p>\n<p>export const useFetchUsers = () =&gt; useQueries({<br \/>\u00a0 queries: userIds.map(id =&gt; ({<br \/>\u00a0 \u00a0 queryKey: [&#8216;user&#8217;, id],<br \/>\u00a0 \u00a0 queryFn: () =&gt; fetchUser(id),<br \/>\u00a0 })),<br \/>});<\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<p>\u0422\u0430\u043a \u043a\u0430\u043a useQueries \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u043c\u0430\u0441\u0441\u0438\u0432, \u0441\u0442\u0430\u0442\u0443\u0441\u044b \u043d\u0443\u0436\u043d\u043e \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0442\u044c \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e.<\/p>\n<div>\n<div class=\"table\">\n<table>\n<tbody>\n<tr>\n<td>\n<p align=\"left\"><em>\/\/ \u041f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u043c\u0430\u0441\u0441\u0438\u0432 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432<\/em><\/p>\n<p align=\"left\">const usersQueries = useFetchUsers();<\/p>\n<p>const isSuccess = usersQueries.every((query) =&gt; query.isSuccess);<\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<p>\u0427\u0442\u043e \u0443\u0434\u043e\u0431\u043d\u043e, \u043c\u043e\u0436\u043d\u043e \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c, \u043a\u0430\u043a\u043e\u0439 \u043e\u0431\u044a\u0435\u043a\u0442 \u0431\u0443\u0434\u0435\u0442 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0442\u044c \u0445\u0443\u043a \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043f\u043e\u043b\u044f <strong>combine<\/strong>.<\/p>\n<div>\n<div class=\"table\">\n<table>\n<tbody>\n<tr>\n<td>\n<p align=\"left\">export const useFetchUsers = () =&gt; useQueries({<br \/>\u00a0 queries: userIds.map(id =&gt; ({<br \/>\u00a0 \u00a0 queryKey: [&#8216;user&#8217;, id],<br \/>\u00a0 \u00a0 queryFn: () =&gt; fetchUser(id),<br \/>\u00a0 })),<\/p>\n<p align=\"left\">\u00a0\u00a0<em>\/\/ \u0424\u043e\u0440\u043c\u0438\u0440\u0443\u0435\u043c \u0441\u0432\u043e\u0439 \u043e\u0431\u044a\u0435\u043a\u0442 \u0441 data \u0438 isSuccess<\/em><br \/>\u00a0 combine: (result) =&gt; ({<br \/>\u00a0 \u00a0 data: result.map((query) =&gt; query.data),<br \/>\u00a0 \u00a0 isSuccess: result.every((query) =&gt; query.isSuccess),<br \/>\u00a0 }),<br \/>});<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<p align=\"left\"><em>\/\/ \u041f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u043e\u0431\u044a\u0435\u043a\u0442, \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0451\u043d\u043d\u044b\u0439 \u0432 combine<\/em><\/p>\n<p align=\"left\">const { data, isSuccess } = useFetchUsers();<\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<h2>\u041c\u0443\u0442\u0430\u0446\u0438\u0438<\/h2>\n<p>\u041c\u0443\u0442\u0430\u0446\u0438\u0438 \u043f\u0440\u0435\u0434\u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u044b \u0434\u043b\u044f \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439 \u0434\u0430\u043d\u043d\u044b\u0445 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435 (\u043a\u0430\u043a \u043f\u0440\u0430\u0432\u0438\u043b\u043e, PUT, POST, PATCH \u0438 DELETE \u0437\u0430\u043f\u0440\u043e\u0441\u044b). \u0422\u043e \u0435\u0441\u0442\u044c, \u0432 \u043e\u0442\u043b\u0438\u0447\u0438\u0435 \u043e\u0442 useQuery, \u0445\u0443\u043a useMutation \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b \u0434\u043b\u044f \u043c\u043e\u0434\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438 \u0434\u0430\u043d\u043d\u044b\u0445.<\/p>\n<p>useMutation \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u0432 \u0441\u0435\u0431\u044f \u0434\u0432\u0430 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u0430:<\/p>\n<ul>\n<li>\n<p>options \u2013 \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u043e\u0431\u044a\u0435\u043a\u0442 \u0434\u043b\u044f \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u043c\u0443\u0442\u0430\u0446\u0438\u0438;<\/p>\n<\/li>\n<li>\n<p>queryClient \u2013 \u043d\u0435\u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440 \u0434\u043b\u044f \u043f\u0435\u0440\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u0431\u0430\u0437\u043e\u0432\u043e\u0433\u043e QueryClient.<\/p>\n<\/li>\n<\/ul>\n<div>\n<div class=\"table\">\n<table>\n<tbody>\n<tr>\n<td>\n<p align=\"left\">const editUser = async (id: number, name: string) =&gt; {<br \/>\u00a0 \u00a0 const response = await fetch(<br \/>\u00a0 \u00a0 \u00a0 \u00a0 <code>\/api\/users\/${id}<\/code>, <br \/>\u00a0 \u00a0 \u00a0 \u00a0 { <br \/>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 method: &#8216;POST&#8217;, <br \/>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 body: JSON.stringify({ name }),<br \/>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 headers: { &#8216;Content-Type&#8217;: &#8216;application\/json&#8217; },<br \/>\u00a0 \u00a0 \u00a0 \u00a0 },<br \/>\u00a0 \u00a0 );<\/p>\n<p>\u00a0 \u00a0 if (!response.ok) throw new Error();<br \/>\u00a0 \u00a0 return await response.json();<br \/>};<\/p>\n<p>export const useEditUser = () =&gt; {<br \/>\u00a0 \u00a0 const queryClient = useQueryClient();<\/p>\n<p>\u00a0 \u00a0 return useMutation({<br \/>\u00a0 \u00a0 \u00a0 \u00a0 mutationFn: ({ id, name }: { id: number, name: string }) =&gt; editUser(id, name),<br \/>\u00a0 \u00a0 \u00a0 \u00a0 onSuccess: (data) =&gt; {<br \/>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <em>\/\/ \u041f\u043e\u0441\u043b\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0438\u043d\u0432\u0430\u043b\u0438\u0434\u0438\u0440\u0443\u0435\u043c \u0437\u0430\u043f\u0440\u043e\u0441<\/em><br \/>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 queryClient.invalidateQueries({ queryKey: [&#8216;users&#8217;, data.id] })<br \/>\u00a0 \u00a0 \u00a0 \u00a0 },<br \/>\u00a0 \u00a0 });<br \/>};<\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<p>\u0412 \u0434\u0430\u043d\u043d\u043e\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0437\u0430\u043f\u0440\u043e\u0441 \u0434\u043b\u044f \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0438\u043c\u0435\u043d\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f. \u0412 <strong>mutationFn<\/strong> \u043c\u044b \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c, \u043a\u0430\u043a\u0438\u0435 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u044b \u0431\u0443\u0434\u0443\u0442 \u043f\u0440\u043e\u0431\u0440\u0430\u0441\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u0432 \u0441\u0430\u043c \u0437\u0430\u043f\u0440\u043e\u0441 (\u0432 \u043e\u0442\u043b\u0438\u0447\u0438\u0435 \u043e\u0442 useQuery, \u0433\u0434\u0435 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u044b \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u044e\u0442\u0441\u044f \u043d\u0430 \u0443\u0440\u043e\u0432\u043d\u0435 \u0445\u0443\u043a\u0430). \u0414\u0430\u043b\u0435\u0435 \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u043f\u043e\u043b\u0435 <strong>onSuccess<\/strong> \u0434\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u043f\u0440\u043e\u0438\u0437\u0432\u0435\u0441\u0442\u0438 \u043a\u0430\u043a\u0438\u0435-\u043b\u0438\u0431\u043e \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u043f\u043e\u0441\u043b\u0435 \u0443\u0441\u043f\u0435\u0448\u043d\u043e\u0433\u043e \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u043c\u0443\u0442\u0430\u0446\u0438\u0438. \u042f \u0445\u043e\u0447\u0443, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u0441\u043b\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0438\u043c\u0435\u043d\u0438, \u0434\u0430\u043d\u043d\u044b\u0435 \u0432 \u043a\u044d\u0448\u0435 \u043f\u043e \u044d\u0442\u043e\u043c\u0443 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044e \u043e\u0431\u043d\u043e\u0432\u0438\u043b\u0438\u0441\u044c, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u044f \u043f\u043e\u043c\u0435\u0447\u0430\u044e \u0438\u0445 \u043a\u0430\u043a \u0443\u0441\u0442\u0430\u0440\u0435\u0432\u0448\u0438\u0435 \u0447\u0435\u0440\u0435\u0437 \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440 queryClient. \u0414\u0430\u043b\u044c\u0448\u0435 React Query \u0441\u0434\u0435\u043b\u0430\u0435\u0442 \u0432\u0441\u0451 \u0441\u0430\u043c.<\/p>\n<p>\u041b\u0438\u0431\u043e \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0441\u0442\u0443\u043f\u0438\u0442\u044c \u043f\u043e-\u0434\u0440\u0443\u0433\u043e\u043c\u0443 \u0438 \u043d\u0435 \u043f\u043e\u043c\u0435\u0447\u0430\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435 \u043a\u0430\u043a \u0443\u0441\u0442\u0430\u0440\u0435\u0432\u0448\u0438\u0435, \u0430 \u043c\u0435\u043d\u044f\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435 \u0432 \u043a\u044d\u0448\u0435 \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e, \u0447\u0442\u043e\u0431\u044b \u043d\u0435 \u0432\u044b\u0437\u044b\u0432\u0430\u0442\u044c \u0437\u0430\u043f\u0440\u043e\u0441. \u0418\u043b\u0438 \u0434\u0430\u0436\u0435 \u043c\u043e\u0436\u043d\u043e \u043d\u0435 \u0436\u0434\u0430\u0442\u044c \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u043c\u0443\u0442\u0430\u0446\u0438\u0438, \u0430 \u043e\u043f\u0442\u0438\u043c\u0438\u0441\u0442\u0438\u0447\u043d\u043e \u043c\u0435\u043d\u044f\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435 \u0432 \u043a\u044d\u0448\u0435 \u0432 <strong>onMutate<\/strong>, \u0430 \u043f\u0440\u0438 \u043e\u0448\u0438\u0431\u043a\u0435 \u043e\u0442\u043a\u0430\u0442\u044b\u0432\u0430\u0442\u044c \u0441\u0432\u043e\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0432\u043d\u0443\u0442\u0440\u0438 <strong>onError<\/strong>.<\/p>\n<p>\u041a\u0430\u043a \u0432\u0438\u0434\u043d\u043e, \u043c\u0443\u0442\u0430\u0446\u0438\u0438 \u043d\u0435 \u0442\u0440\u0435\u0431\u0443\u044e\u0442 \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0433\u043e \u0443\u043a\u0430\u0437\u0430\u043d\u0438\u044f \u043a\u043b\u044e\u0447\u0430 mutationKey. \u041e\u0434\u043d\u0430\u043a\u043e \u043c\u043e\u0436\u043d\u043e \u0443\u043a\u0430\u0437\u0430\u0442\u044c \u043a\u043b\u044e\u0447, \u0435\u0441\u043b\u0438 \u0432 \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0435\u043c \u043c\u044b \u0437\u0430\u0445\u043e\u0442\u0438\u043c \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u043a\u044d\u0448 \u043c\u0443\u0442\u0430\u0446\u0438\u0438 \u043f\u043e \u043a\u043b\u044e\u0447\u0443.<\/p>\n<p>\u0417\u0430\u0442\u0435\u043c \u0445\u0443\u043a useMutation \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u043f\u0440\u044f\u043c\u043e \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435. \u0412 \u0446\u0435\u043b\u043e\u043c, \u043f\u043e\u043b\u044f, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u0445\u0443\u043a \u043e\u0447\u0435\u043d\u044c \u043f\u043e\u0445\u043e\u0436\u0438 \u043d\u0430 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c\u044b\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0432 useQuery:<\/p>\n<ul>\n<li>\n<p>isPending \u2013 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435, \u043a\u043e\u0433\u0434\u0430 \u043c\u0443\u0442\u0430\u0446\u0438\u044f \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f;<\/p>\n<\/li>\n<li>\n<p>isIdle \u2013 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435, \u043a\u043e\u0433\u0434\u0430 \u043c\u0443\u0442\u0430\u0446\u0438\u044f \u043d\u0435 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f;<\/p>\n<\/li>\n<li>\n<p>isError \u2013 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043e\u0448\u0438\u0431\u043a\u0438;<\/p>\n<\/li>\n<li>\n<p>isPaused \u2013 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043f\u0440\u0438\u043e\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438;<\/p>\n<\/li>\n<li>\n<p>isSuccess \u2013 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0443\u0441\u043f\u0435\u0445\u0430;<\/p>\n<\/li>\n<li>\n<p>error \u2013 \u043e\u0431\u044a\u0435\u043a\u0442 \u043e\u0448\u0438\u0431\u043a\u0438 \u0438\u043b\u0438 null;<\/p>\n<\/li>\n<li>\n<p>reset \u2013 \u0444\u0443\u043d\u043a\u0446\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0441\u0431\u0440\u0430\u0441\u044b\u0432\u0430\u0435\u0442 \u043c\u0443\u0442\u0430\u0446\u0438\u044e \u0434\u043e \u0435\u0451 \u0438\u0441\u0445\u043e\u0434\u043d\u043e\u0433\u043e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f;<\/p>\n<\/li>\n<li>\n<p>mutate \u2013 \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0432\u044b\u0437\u043e\u0432\u0430 \u043c\u0443\u0442\u0430\u0446\u0438\u0438;<\/p>\n<\/li>\n<li>\n<p>mutateAsync \u2013 \u0442\u043e \u0436\u0435, \u0447\u0442\u043e \u0438 mutate, \u043d\u043e \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u0430\u044f;<\/p>\n<\/li>\n<li>\n<p>data \u2013 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0435 \u0443\u0441\u043f\u0435\u0448\u043d\u043e \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u043f\u043e \u044d\u0442\u043e\u0439 \u043c\u0443\u0442\u0430\u0446\u0438\u0438.<\/p>\n<\/li>\n<\/ul>\n<div>\n<div class=\"table\">\n<table>\n<tbody>\n<tr>\n<td>\n<p align=\"left\">const EditUserName = () =&gt; {<br \/>\u00a0 \u00a0 const [name, setName] = useState(&#187;);<br \/>\u00a0 \u00a0 const { isSuccess, isPending, mutate } = useEditUser();<\/p>\n<p>\u00a0 \u00a0 const handleChangeName: ChangeEventHandler&lt;HTMLInputElement&gt; = (e) =&gt; {<br \/>\u00a0 \u00a0 \u00a0 \u00a0 setName(e.target.value);<br \/>\u00a0 \u00a0 };<\/p>\n<p>\u00a0 \u00a0 const handleSubmit: FormEventHandler&lt;HTMLFormElement&gt; = (e) =&gt; {<br \/>\u00a0 \u00a0 \u00a0 \u00a0 e.preventDefault()<br \/>\u00a0 \u00a0 \u00a0 \u00a0 mutate({ id: 0, name });<br \/>\u00a0 \u00a0 };<\/p>\n<p>\u00a0 \u00a0 return &lt;form onSubmit={handleSubmit}&gt;<br \/>\u00a0 \u00a0 \u00a0 \u00a0 &lt;input value={name} onChange={handleChangeName} \/&gt;<br \/>\u00a0 \u00a0 \u00a0 \u00a0 &lt;button disabled={isPending}&gt;\u0418\u0437\u043c\u0435\u043d\u0438\u0442\u044c&lt;\/button&gt;<\/p>\n<p>\u00a0 \u00a0 \u00a0 \u00a0 {isSuccess &amp;&amp; &lt;p&gt;\u0423\u0441\u043f\u0435\u0448\u043d\u043e \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u043e!&lt;\/p&gt;}<br \/>\u00a0 \u00a0 &lt;\/form&gt;;<br \/>};<\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<p>\u0422\u043e \u0435\u0441\u0442\u044c React Query \u043d\u0435 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442 \u043c\u0443\u0442\u0430\u0446\u0438\u0438 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438, \u043a\u0430\u043a \u0437\u0430\u043f\u0440\u043e\u0441\u044b, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0438\u0445 \u043d\u0443\u0436\u043d\u043e \u0432\u044b\u0437\u044b\u0432\u0430\u0442\u044c \u0432\u0440\u0443\u0447\u043d\u0443\u044e \u0447\u0435\u0440\u0435\u0437 <strong>mutate<\/strong>, \u043a\u0443\u0434\u0430 \u043f\u0435\u0440\u0435\u0434\u0430\u044e\u0442\u0441\u044f \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u044b.<\/p>\n<p>\u0418\u0442\u0430\u043a, \u043a\u043e\u0433\u0434\u0430 \u043c\u0443\u0442\u0430\u0446\u0438\u044f \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f, \u0434\u0430\u043d\u043d\u044b\u0435, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u044e\u0442\u0441\u044f \u0438\u0437 \u0437\u0430\u043f\u0440\u043e\u0441\u0430, \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u044e\u0442\u0441\u044f \u0432 \u043a\u044d\u0448\u0435 \u043c\u0443\u0442\u0430\u0446\u0438\u0439 \u043d\u0430 gcTime. \u041d\u043e, \u0442\u0430\u043a\u0438\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e \u043f\u0440\u0438 \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e\u0439 \u043c\u0443\u0442\u0430\u0446\u0438\u0438, \u0430, \u0441\u043a\u043e\u0440\u0435\u0435, \u043d\u0443\u0436\u043d\u044b \u0434\u043b\u044f \u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u043c\u0443\u0442\u0430\u0446\u0438\u0438.<\/p>\n<h2>\u041e\u0442\u043b\u0430\u0434\u043a\u0430<\/h2>\n<p>\u041f\u043b\u044e\u0441\u043e\u043c \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0438 \u0442\u043e, \u0447\u0442\u043e \u0435\u0441\u0442\u044c \u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0439 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442 \u0434\u043b\u044f \u0432\u0438\u0437\u0443\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0440\u0430\u0431\u043e\u0442\u044b React Query.<\/p>\n<div>\n<div class=\"table\">\n<table>\n<tbody>\n<tr>\n<td>\n<p align=\"left\">npm install @tanstack\/react-query-devtools<\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<div>\n<div class=\"table\">\n<table>\n<tbody>\n<tr>\n<td>\n<p align=\"left\">import { QueryClient, QueryClientProvider, ReactQueryDevtools } from &#8216;@tanstack\/react-query&#8217;;<\/p>\n<p>const queryClient = new QueryClient();<\/p>\n<p>function App() {<br \/>\u00a0 return (<br \/>\u00a0 \u00a0 &lt;QueryClientProvider client={queryClient}&gt;<br \/>\u00a0 \u00a0 \u00a0 &#8230;<br \/>\u00a0 \u00a0 \u00a0 &lt;ReactQueryDevtools initialIsOpen={false} \/&gt;<br \/>\u00a0 \u00a0 &lt;\/QueryClientProvider&gt;<br \/>\u00a0 );<br \/>}<\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<figure class=\"full-width\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/1f3\/73e\/35e\/1f373e35ec9b1e51298df879c8231709.png\" width=\"1484\" height=\"316\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/upload_files\/1f3\/73e\/35e\/1f373e35ec9b1e51298df879c8231709.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/1f3\/73e\/35e\/1f373e35ec9b1e51298df879c8231709.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/figure>\n<p>\u041c\u043e\u0436\u043d\u043e \u0443\u0432\u0438\u0434\u0435\u0442\u044c, \u043a\u0430\u043a\u0438\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 \/ \u043c\u0443\u0442\u0430\u0446\u0438\u0439 \u0445\u0440\u0430\u043d\u044f\u0442\u0441\u044f \u0432 \u043a\u044d\u0448\u0435, \u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0432 \u0446\u0435\u043b\u043e\u043c \u0441\u0435\u0439\u0447\u0430\u0441 \u0441\u0432\u0435\u0436\u0438\u0445 \u0438\u043b\u0438 \u0443\u0441\u0442\u0430\u0440\u0435\u0432\u0448\u0438\u0445 \u0434\u0430\u043d\u043d\u044b\u0445, \u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u044e\u0442\u0441\u044f, \u043d\u0430 \u043f\u0430\u0443\u0437\u0435 \u0438\u043b\u0438 \u043d\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u044b.<\/p>\n<p>\u041f\u043e \u043a\u0430\u0436\u0434\u043e\u043c\u0443 \u0437\u0430\u043f\u0440\u043e\u0441\u0443 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435 \u0432 \u043a\u044d\u0448\u0435, \u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u043e\u043d\u0438 \u0431\u0443\u0434\u0443\u0442 \u0445\u0440\u0430\u043d\u0438\u0442\u044c\u0441\u044f, \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u044d\u0442\u043e\u0433\u043e \u0437\u0430\u043f\u0440\u043e\u0441\u0430. \u0414\u0430\u0436\u0435 \u0435\u0441\u0442\u044c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0432\u0440\u0443\u0447\u043d\u0443\u044e \u0438\u043d\u0432\u0430\u043b\u0438\u0434\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043b\u044e\u0431\u043e\u0439 \u0437\u0430\u043f\u0440\u043e\u0441, \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u044c \u043f\u0435\u0440\u0435\u0437\u0430\u043f\u0443\u0441\u043a, \u0443\u0434\u0430\u043b\u0438\u0442\u044c \u0438\u0437 \u043a\u044d\u0448\u0430, \u0432\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u0443\u044e \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0443 \u0438\u043b\u0438 \u0432\u044b\u0437\u0432\u0430\u0442\u044c \u043e\u0448\u0438\u0431\u043a\u0443.<\/p>\n<h2>\u0418\u0442\u043e\u0433<\/h2>\n<p>React Query \u2013 \u044d\u0442\u043e, \u043c\u043e\u0436\u043d\u043e \u0441\u043a\u0430\u0437\u0430\u0442\u044c, \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0434\u043b\u044f \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u0438\u0437\u0430\u0446\u0438\u0438 \u0434\u0430\u043d\u043d\u044b\u0445 \u0441 \u0441\u0435\u0440\u0432\u0435\u0440\u043e\u043c. \u041e\u043d\u0430 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043f\u0435\u0440\u0435\u0437\u0430\u043f\u0440\u0430\u0448\u0438\u0432\u0430\u0435\u0442 \u0434\u0430\u043d\u043d\u044b\u0435 \u043f\u043e\u0441\u043b\u0435 \u043e\u0448\u0438\u0431\u043a\u0438 \u0438\u043b\u0438 \u043a\u043e\u0433\u0434\u0430 \u043e\u043d\u0438 \u0443\u0441\u0442\u0430\u0440\u0435\u044e\u0442. \u042d\u0442\u0438 \u0434\u0430\u043d\u043d\u044b\u0435 \u043a\u044d\u0448\u0438\u0440\u0443\u044e\u0442\u0441\u044f \u0438 \u0438\u043d\u0432\u0430\u043b\u0438\u0434\u0438\u0440\u0443\u044e\u0442\u0441\u044f, \u043a\u043e\u0433\u0434\u0430 \u0437\u0430\u0445\u043e\u0447\u0435\u0442 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a. \u0421 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u043c\u043e\u0436\u043d\u043e \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u044c \u0437\u0430\u043f\u0440\u043e\u0441\u044b \u043f\u0430\u0440\u0430\u043b\u043b\u0435\u043b\u044c\u043d\u043e \u0438\u043b\u0438 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0431\u0435\u0441\u043a\u043e\u043d\u0435\u0447\u043d\u0443\u044e \u043b\u0435\u043d\u0442\u0443 \u0441 \u043f\u043e\u0434\u0437\u0430\u0433\u0440\u0443\u0437\u043a\u043e\u0439.<\/p>\n<p>\u0418 \u0445\u043e\u0442\u044c, \u043f\u0440\u0438 \u0436\u0435\u043b\u0430\u043d\u0438\u0438 React Query \u043c\u043e\u0436\u0435\u0442 \u0447\u0430\u0441\u0442\u0438\u0447\u043d\u043e \u0437\u0430\u043c\u0435\u043d\u0438\u0442\u044c \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0439 \u0441\u0442\u043e\u0440, \u0432\u0441\u0451-\u0442\u0430\u043a\u0438 \u044d\u0442\u0430 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u0430 \u043d\u0430 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0438 \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u044b\u043c\u0438 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u044f\u043c\u0438. \u0422\u0430\u043a \u0436\u0435 \u0438 \u043d\u0430\u043e\u0431\u043e\u0440\u043e\u0442, Redux, MobX \u0438 \u0434\u0440\u0443\u0433\u0438\u0435 \u0441\u0442\u0435\u0439\u0442-\u043c\u0435\u043d\u0435\u0434\u0436\u0435\u0440\u044b \u0442\u043e\u0436\u0435 \u043c\u043e\u0433\u0443\u0442 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u043f\u043e\u0434\u043e\u0431\u043d\u044b\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u044b\u0445 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0439, \u043d\u043e \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0431\u0443\u0434\u0435\u0442 \u043b\u0438\u0431\u043e \u043d\u0435\u044d\u0444\u0444\u0435\u043a\u0442\u0438\u0432\u043d\u044b\u043c, \u043b\u0438\u0431\u043e \u0437\u0430\u0442\u0440\u0430\u0442\u043d\u044b\u043c \u043f\u043e \u0440\u0435\u0441\u0443\u0440\u0441\u0430\u043c.\u00a0<\/p>\n<\/div>\n<\/div>\n<\/div>\n<p><!----><!----><\/div>\n<p><!----><!----><br \/> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habr.com\/ru\/articles\/915466\/\"> https:\/\/habr.com\/ru\/articles\/915466\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<div><!--[--><!--]--><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-2\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<h2>\u0412\u0432\u0435\u0434\u0435\u043d\u0438\u0435<\/h2>\n<p>\u0412 Intelsy, \u0433\u0434\u0435 \u044f \u0440\u0430\u0431\u043e\u0442\u0430\u044e \u043d\u0430\u0434 \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u043c\u0438 \u043f\u0440\u043e\u0435\u043a\u0442\u0430\u043c\u0438 \u0432 \u0440\u043e\u043b\u0438 \u0432\u0435\u0431-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430, \u043c\u044b \u0447\u0430\u0441\u0442\u043e \u0441\u0442\u0430\u043b\u043a\u0438\u0432\u0430\u0435\u043c\u0441\u044f \u0441 \u0437\u0430\u0434\u0430\u0447\u0430\u043c\u0438 \u044d\u0444\u0444\u0435\u043a\u0442\u0438\u0432\u043d\u043e\u0433\u043e \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u0441 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u043c\u0438 \u0434\u0430\u043d\u043d\u044b\u043c\u0438. \u0412 \u0442\u0430\u043a\u0438\u0445 \u0441\u043b\u0443\u0447\u0430\u044f\u0445 \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e \u0432\u044b\u0440\u0443\u0447\u0430\u0435\u0442 React Query \u2014 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0434\u043b\u044f \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435\u043c \u0434\u0430\u043d\u043d\u044b\u0445 \u0441\u0435\u0440\u0432\u0435\u0440\u0430. \u041e\u043d\u0430 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043a\u044d\u0448\u0438\u0440\u0443\u0435\u0442 \u0434\u0430\u043d\u043d\u044b\u0435, \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u0438\u0437\u0438\u0440\u0443\u0435\u0442 \u0438\u0445 \u0438 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u0442, \u0447\u0442\u043e \u0438\u0437\u0431\u0430\u0432\u043b\u044f\u0435\u0442 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430 \u043e\u0442 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438 \u0432\u0440\u0443\u0447\u043d\u0443\u044e \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u044d\u0442\u0438\u043c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435\u043c, \u0430 \u0442\u0430\u043a\u0436\u0435 \u0441\u043d\u0438\u0436\u0430\u0435\u0442 \u043d\u0430\u0433\u0440\u0443\u0437\u043a\u0443 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440.<\/p>\n<p>React Query \u043d\u0435 \u0437\u0430\u043c\u0435\u043d\u044f\u0435\u0442 \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, Redux), \u0430 \u0434\u043e\u043f\u043e\u043b\u043d\u044f\u0435\u0442 \u0435\u0433\u043e, \u0444\u043e\u043a\u0443\u0441\u0438\u0440\u0443\u044f\u0441\u044c \u043d\u0430 \u0434\u0430\u043d\u043d\u044b\u0445, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u0440\u0438\u0445\u043e\u0434\u044f\u0442 \u0438\u0437 \u0432\u043d\u0435\u0448\u043d\u0438\u0445 \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u043e\u0432.<\/p>\n<p>\u041a\u043e\u043d\u0435\u0447\u043d\u043e, \u0434\u043b\u044f \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u0434\u0430\u043d\u043d\u044b\u0445 \u0441 API \u0438 \u043a\u044d\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0435 \u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0430 React (useEffect \u0438 useState), \u043d\u043e \u0442\u0430\u043a\u043e\u0439 \u043f\u043e\u0434\u0445\u043e\u0434, \u0432 \u043a\u043e\u043d\u0435\u0447\u043d\u043e\u043c \u0438\u0442\u043e\u0433\u0435, \u043f\u0440\u0438\u0432\u0435\u0434\u0451\u0442 \u043a \u0433\u0440\u043e\u043c\u043e\u0437\u0434\u043a\u043e\u043c\u0443 \u043a\u043e\u0434\u0443, \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e, \u043a\u043e\u0433\u0434\u0430 \u0434\u0435\u043b\u043e \u0434\u043e\u0439\u0434\u0451\u0442 \u0434\u043e \u043a\u044d\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0438\u043b\u0438 \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u043d\u0438\u044f \u043e\u0448\u0438\u0431\u043e\u043a \u0438 \u0441\u0442\u0430\u0442\u0443\u0441\u043e\u0432 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438.<\/p>\n<p>React Query \u0445\u0440\u0430\u043d\u0438\u0442 \u0434\u0430\u043d\u043d\u044b\u0435 \u0432 \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u043e\u043c \u043a\u044d\u0448\u0435, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0434\u043e\u0441\u0442\u0443\u043f\u0435\u043d \u0432\u0441\u0435\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. \u042d\u0442\u043e \u043f\u043e\u0445\u043e\u0436\u0435 \u043d\u0430 \u0442\u043e, \u043a\u0430\u043a \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442 \u0434\u0440\u0443\u0433\u0438\u0435 \u043c\u0435\u043d\u0435\u0434\u0436\u0435\u0440\u044b \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0439, \u043d\u043e \u0441 \u0444\u043e\u043a\u0443\u0441\u043e\u043c \u043d\u0430 \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435. \u041c\u043e\u0436\u043d\u043e \u0432\u044b\u0434\u0435\u043b\u0438\u0442\u044c \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438:<\/p>\n<ul>\n<li>\n<p>\u041a\u044d\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0434\u0430\u043d\u043d\u044b\u0445: React Query \u0437\u0430\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u0442 \u043e\u0442\u0432\u0435\u0442 \u043d\u0430 \u0437\u0430\u043f\u0440\u043e\u0441 \u0432 \u043a\u044d\u0448\u0435 \u043f\u043e \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u043e\u043c\u0443 \u043a\u043b\u044e\u0447\u0443 \u0438 \u043f\u0440\u0438 \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e\u043c \u0437\u0430\u043f\u0440\u043e\u0441\u0435 \u043f\u0440\u043e\u0441\u0442\u043e \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u0434\u0430\u043d\u043d\u044b\u0435 \u0438\u0437 \u043a\u044d\u0448\u0430\u200b, \u0447\u0442\u043e \u0443\u043c\u0435\u043d\u044c\u0448\u0430\u0435\u0442 \u043d\u0430\u0433\u0440\u0443\u0437\u043a\u0443 \u043d\u0430 \u0441\u0435\u0442\u044c \u0438 \u043c\u043e\u043c\u0435\u043d\u0442\u0430\u043b\u044c\u043d\u043e \u0432\u044b\u0432\u043e\u0434\u0438\u0442 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u043d\u0430 \u044d\u043a\u0440\u0430\u043d. \u0422\u0430\u043a\u0436\u0435 \u0435\u0441\u0442\u044c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0438\u043d\u0432\u0430\u043b\u0438\u0434\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043a\u044d\u0448 \u0437\u0430\u043f\u0440\u043e\u0441\u0430, \u0447\u0442\u043e\u0431\u044b \u043e\u043d \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u043b\u0441\u044f \u0437\u0430\u043d\u043e\u0432\u043e, \u0430 \u043d\u0435 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u043b \u0434\u0430\u043d\u043d\u044b\u0435 \u0438\u0437 \u043a\u044d\u0448\u0430, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043f\u043e\u0441\u043b\u0435 \u043c\u0443\u0442\u0430\u0446\u0438\u0438 \u0441 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f\u043c\u0438 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435.<\/p>\n<\/li>\n<li>\n<p>\u0424\u043e\u043d\u043e\u0432\u043e\u0435 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435: \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u043c\u043e\u0436\u0435\u0442 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043f\u0435\u0440\u0435\u0437\u0430\u043f\u0440\u0430\u0448\u0438\u0432\u0430\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435 \u0444\u043e\u043d\u043e\u0432\u043e, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043f\u0440\u0438 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0435\u043d\u0438\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u043a \u043e\u043a\u043d\u0443 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0438\u043b\u0438 \u043f\u043e \u0442\u0430\u0439\u043c\u0435\u0440\u0443, \u0447\u0442\u043e\u0431\u044b \u0434\u0430\u043d\u043d\u044b\u0435 \u043e\u0441\u0442\u0430\u0432\u0430\u043b\u0438\u0441\u044c \u0430\u043a\u0442\u0443\u0430\u043b\u044c\u043d\u044b\u043c\u0438\u200b.<\/p>\n<\/li>\n<li>\n<p>\u0423\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0441\u0442\u0430\u0442\u0443\u0441\u0430\u043c\u0438: React Query \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u0435 \u0444\u043b\u0430\u0433\u0438 \u0434\u043b\u044f \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u043d\u0438\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u0438 \u0438\u043c\u0435\u0435\u0442 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0443 \u043e\u0448\u0438\u0431\u043e\u043a.<\/p>\n<\/li>\n<li>\n<p>\u041e\u0442\u043c\u0435\u043d\u0430 \u0438 \u0434\u0435\u0434\u0443\u043f\u043b\u0438\u043a\u0430\u0446\u0438\u044f \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432: React Query \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043e\u0442\u043c\u0435\u043d\u044f\u0435\u0442 \u0434\u0443\u0431\u043b\u0438\u043a\u0430\u0442\u044b \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 \u0438 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043e\u0442\u043c\u0435\u043d\u044f\u0442\u044c \u0437\u0430\u043f\u0440\u043e\u0441\u044b \u043f\u0440\u0438 \u0434\u0435\u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430, \u043f\u0440\u0435\u0434\u043e\u0442\u0432\u0440\u0430\u0449\u0430\u044f \u043d\u0435\u043d\u0443\u0436\u043d\u044b\u0435 \u0432\u044b\u0437\u043e\u0432\u044b API.<\/p>\n<\/li>\n<\/ul>\n<p>\u0423\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430:<\/p>\n<div>\n<div class=\"table\">\n<table>\n<tbody>\n<tr>\n<td>\n<p align=\"left\">npm install @tanstack\/react-query<\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<h2>QueryClient<\/h2>\n<p>\u0414\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u0440\u0430\u0431\u043e\u0442\u044b React Query \u0442\u0440\u0435\u0431\u0443\u0435\u0442 \u043e\u0431\u0435\u0440\u043d\u0443\u0442\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0432 QueryClientProvider \u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u044c \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440 QueryClient, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0446\u0435\u043d\u0442\u0440\u0430\u043b\u044c\u043d\u044b\u043c \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u043c \u0432 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0435 \u0438 \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442 \u043a\u044d\u0448\u0435\u043c \u0438 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435\u043c \u0434\u0430\u043d\u043d\u044b\u0445:<\/p>\n<div>\n<div class=\"table\">\n<table>\n<tbody>\n<tr>\n<td>\n<p align=\"left\">import { QueryClient, QueryClientProvider } from &#8216;@tanstack\/react-query&#8217;;<\/p>\n<p>const queryClient = new QueryClient();<\/p>\n<p>function App() {<br \/>\u00a0 return (<br \/>\u00a0 \u00a0 &lt;QueryClientProvider client={queryClient}&gt;<br \/>\u00a0 \u00a0 \u00a0 \u2026<br \/>\u00a0 \u00a0 &lt;\/QueryClientProvider&gt;<br \/>\u00a0 );<br \/>}<\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<p>\u0412 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440 QueryClient \u043c\u043e\u0436\u043d\u043e \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u044c \u043e\u0431\u044a\u0435\u043a\u0442 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u0438 \u0434\u043b\u044f \u0431\u0430\u0437\u043e\u0432\u043e\u0439 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u043a\u044d\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f, \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0439, \u043e\u0448\u0438\u0431\u043e\u043a, \u043f\u043e\u0432\u0442\u043e\u0440\u043e\u0432 \u0438 \u0434\u0440\u0443\u0433\u0438\u0445 \u0430\u0441\u043f\u0435\u043a\u0442\u043e\u0432 \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u0434\u0430\u043d\u043d\u044b\u043c\u0438, \u043d\u043e \u0438\u0445 \u0442\u0430\u043a\u0436\u0435 \u043c\u043e\u0436\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e \u0432\u043d\u0443\u0442\u0440\u0438 \u043b\u044e\u0431\u043e\u0433\u043e \u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u0438\u043b\u0438 \u043b\u044e\u0431\u043e\u0439 \u043c\u0443\u0442\u0430\u0446\u0438\u0438.<\/p>\n<div>\n<div class=\"table\">\n<table>\n<tbody>\n<tr>\n<td>\n<p align=\"left\">const queryClient = new QueryClient({<br \/>\u00a0 defaultOptions: { &#8230; }, <em>\/\/ \u0414\u0435\u0444\u043e\u043b\u0442\u043d\u044b\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0434\u043b\u044f \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 \u0438 \u043c\u0443\u0442\u0430\u0446\u0438\u0439<\/em><br \/>\u00a0 queryCache: { &#8230; }, \u00a0 \u00a0 <em>\/\/ \u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u043a\u044d\u0448\u0430 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432<\/em><br \/>\u00a0 mutationCache: { &#8230; },\u00a0 <em>\/\/ \u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u043a\u044d\u0448\u0430 \u043c\u0443\u0442\u0430\u0446\u0438\u0439<\/em><br \/>});<\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<p>\u0412 \u043f\u043e\u043b\u0435 <strong>defaultOptions<\/strong> \u043c\u043e\u0436\u043d\u043e \u0443\u043a\u0430\u0437\u0430\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0434\u043b\u044f \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 (queries) \u0438 \u043c\u0443\u0442\u0430\u0446\u0438\u0439 (mutations). \u0412\u043e\u0442 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438, \u043e\u0442\u043d\u043e\u0441\u044f\u0449\u0438\u0435\u0441\u044f \u043a \u0437\u0430\u043f\u0440\u043e\u0441\u0430\u043c:<\/p>\n<ul>\n<li>\n<p>queryFn \u2013 \u0444\u0443\u043d\u043a\u0446\u0438\u044f, \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u044e\u0449\u0430\u044f \u0437\u0430\u043f\u0440\u043e\u0441;<\/p>\n<\/li>\n<li>\n<p>staleTime \u2013 \u0447\u0435\u0440\u0435\u0437 \u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043c\u0438\u043b\u043b\u0438\u0441\u0435\u043a\u0443\u043d\u0434 \u0434\u0430\u043d\u043d\u044b\u0435 \u043a\u044d\u0448\u0430 \u0431\u0443\u0434\u0443\u0442 \u0441\u0447\u0438\u0442\u0430\u0442\u044c\u0441\u044f \u0443\u0441\u0442\u0430\u0440\u0435\u0432\u0448\u0438\u043c\u0438 \u0438 React Query \u0440\u0435\u0448\u0438\u0442 \u0438\u0445 \u043e\u0431\u043d\u043e\u0432\u0438\u0442\u044c (\u043c\u043e\u0436\u043d\u043e \u0434\u0430\u0436\u0435 \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u044c Infinity \u0438 \u0442\u043e\u0433\u0434\u0430 \u0434\u0430\u043d\u043d\u044b\u0435 \u043d\u0438\u043a\u043e\u0433\u0434\u0430 \u043d\u0435 \u0443\u0441\u0442\u0430\u0440\u0435\u044e\u0442);<\/p>\n<\/li>\n<li>\n<p>gcTime \u2013 \u0447\u0435\u0440\u0435\u0437 \u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043c\u0438\u043b\u043b\u0438\u0441\u0435\u043a\u0443\u043d\u0434 \u043d\u0435\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u043a\u044d\u0448\u0430 \u0431\u0443\u0434\u0443\u0442 \u0443\u0434\u0430\u043b\u0435\u043d\u044b \u0441\u0431\u043e\u0440\u0449\u0438\u043a\u043e\u043c \u043c\u0443\u0441\u043e\u0440\u0430;<\/p>\n<\/li>\n<li>\n<p>retry \u2013 \u043a\u043e\u043b-\u0432\u043e \u043f\u043e\u043f\u044b\u0442\u043e\u043a \u043f\u043e\u0432\u0442\u043e\u0440\u0430, \u0435\u0441\u043b\u0438 \u0437\u0430\u043f\u0440\u043e\u0441 \u043f\u0440\u043e\u0432\u0430\u043b\u0438\u0442\u0441\u044f (\u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e 3), \u043f\u0440\u0438 \u044d\u0442\u043e\u043c \u043f\u043e\u043b\u0435 \u043c\u043e\u0436\u0435\u0442 \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0442\u044c \u043a\u0430\u043a \u0447\u0438\u0441\u043b\u043e, \u0442\u0430\u043a \u0438 \u0431\u0443\u043b\u0435\u0432\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0438\u043b\u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u044e;<\/p>\n<\/li>\n<li>\n<p>retryDelay \u2013 \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0438\u043b\u0438 \u0447\u0438\u0441\u043b\u043e, \u0447\u0435\u0440\u0435\u0437 \u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043c\u0438\u043b\u043b\u0438\u0441\u0435\u043a\u0443\u043d\u0434 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u044c \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u044b\u0439 \u0437\u0430\u043f\u0440\u043e\u0441;<\/p>\n<\/li>\n<li>\n<p>refetchOnWindowFocus \u2013 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 \u0434\u0430\u043d\u043d\u044b\u0445 \u0432\u043e \u0432\u0440\u0435\u043c\u044f \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0435\u043d\u0438\u044f \u043d\u0430 \u0432\u043a\u043b\u0430\u0434\u043a\u0443 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435;<\/p>\n<\/li>\n<li>\n<p>refetchOnReconnect \u2013 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0442\u044c \u043b\u0438 \u0434\u0430\u043d\u043d\u044b\u0435 \u043f\u0440\u0438 \u0432\u043e\u0441\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0438 \u0441\u043e\u0435\u0434\u0438\u043d\u0435\u043d\u0438\u044f;<\/p>\n<\/li>\n<li>\n<p>refetchOnMount \u2013 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0442\u044c \u043b\u0438 \u0434\u0430\u043d\u043d\u044b\u0435 \u043f\u0440\u0438 \u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430;<\/p>\n<\/li>\n<li>\n<p>enabled \u2013 \u0431\u0443\u0434\u0443\u0442 \u043b\u0438 \u0437\u0430\u043f\u0440\u043e\u0441\u044b \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u044c\u0441\u044f \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e;<\/p>\n<\/li>\n<li>\n<p>structuralSharing \u2013 \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0438\u043b\u0438 \u0431\u0443\u043b\u0435\u0432\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0434\u043b\u044f \u043f\u0440\u0435\u0434\u043e\u0442\u0432\u0440\u0430\u0449\u0435\u043d\u0438\u044f \u043b\u0438\u0448\u043d\u0438\u0445 \u0440\u0435\u0440\u0435\u043d\u0434\u0435\u0440\u043e\u0432 \u043f\u0440\u0438 \u0441\u0432\u0435\u0440\u043a\u0435 \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u044b\u0445 \u0434\u0430\u043d\u043d\u044b\u0445 (\u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e true).<\/p>\n<\/li>\n<\/ul>\n<p>\u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0434\u043b\u044f \u043c\u0443\u0442\u0430\u0446\u0438\u0439:<\/p>\n<ul>\n<li>\n<p>retry, retryDelay, gcTime \u2013 \u043f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0442\u043e \u0436\u0435 \u0441\u0430\u043c\u043e\u0435, \u0447\u0442\u043e \u0438 \u0443 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 (staleTime \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0443\u0435\u0442);<\/p>\n<\/li>\n<li>\n<p>mutationFn \u2013 \u0444\u0443\u043d\u043a\u0446\u0438\u044f, \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u044e\u0449\u0430\u044f \u043c\u0443\u0442\u0430\u0446\u0438\u044e;<\/p>\n<\/li>\n<li>\n<p>onMutate \u2013 \u0444\u0443\u043d\u043a\u0446\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0437\u0432\u0430\u043d\u0430 \u043f\u0435\u0440\u0435\u0434 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435\u043c \u043c\u0443\u0442\u0430\u0446\u0438\u0438 (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043f\u043e\u043b\u0435\u0437\u043d\u043e \u0434\u043b\u044f \u043e\u043f\u0442\u0438\u043c\u0438\u0441\u0442\u0438\u0447\u043d\u044b\u0445 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0439);<\/p>\n<\/li>\n<li>\n<p>onSuccess \u2013 \u0444\u0443\u043d\u043a\u0446\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0430 \u043f\u043e\u0441\u043b\u0435 \u0443\u0441\u043f\u0435\u0448\u043d\u043e\u0433\u043e \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u043c\u0443\u0442\u0430\u0446\u0438\u0438;<\/p>\n<\/li>\n<li>\n<p>onError \u2013 \u0444\u0443\u043d\u043a\u0446\u0438\u044f, \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u043c\u0430\u044f \u043f\u043e\u0441\u043b\u0435 \u043e\u0448\u0438\u0431\u043a\u0438;<\/p>\n<\/li>\n<li>\n<p>onSettled \u2013 \u0444\u0443\u043d\u043a\u0446\u0438\u044f, \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u043c\u0430\u044f \u043a\u0430\u043a \u043f\u043e\u0441\u043b\u0435 \u0443\u0441\u043f\u0435\u0445\u0430, \u0442\u0430\u043a \u0438 \u043f\u043e\u0441\u043b\u0435 \u043e\u0448\u0438\u0431\u043a\u0438.<\/p>\n<\/li>\n<\/ul>\n<div>\n<div class=\"table\">\n<table>\n<tbody>\n<tr>\n<td>\n<p align=\"left\">const queryClient = new QueryClient({<br \/>\u00a0 defaultOptions: {<br \/>\u00a0 \u00a0 mutations: {<br \/>\u00a0 \u00a0 \u00a0 retry: 3,<br \/>\u00a0 \u00a0 \u00a0 onError: (error) =&gt; console.error(error.message),<br \/>\u00a0 \u00a0 \u00a0 onSuccess: (data) =&gt; console.log(&#8216;\u0423\u0441\u043f\u0435\u0448\u043d\u043e\u0435 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 \u043c\u0443\u0442\u0430\u0446\u0438\u0438&#8217;, data),<br \/>\u00a0 \u00a0 \u00a0 onMutate: (variables) =&gt; console.log(&#8216;\u041c\u0443\u0442\u0430\u0446\u0438\u044f \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f&#8217;, variables),<br \/>\u00a0 \u00a0 \u00a0 onSettled: (data, error) =&gt; console.log(&#8216;\u041e\u0448\u0438\u0431\u043a\u0430 \/ \u0443\u0441\u043f\u0435\u0445&#8217;, error ?? data)<br \/>\u00a0 \u00a0 },<br \/>\u00a0 },<br \/>});<\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<p>\u0414\u043b\u044f \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440\u0430 QueryClient \u0432\u043d\u0443\u0442\u0440\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0435\u0441\u0442\u044c \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0439 \u0445\u0443\u043a <strong>useQueryClient<\/strong>. \u042d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440 \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u043f\u043e\u043b\u0435\u0437\u043d\u044b\u0435 \u043c\u0435\u0442\u043e\u0434\u044b \u0434\u043b\u044f \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u043c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435\u043c:<\/p>\n<ul>\n<li>\n<p>invalidateQueries \u2013 \u043f\u043e\u043c\u0435\u0447\u0430\u0435\u0442 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0451\u043d\u043d\u044b\u0435 \u0437\u0430\u043f\u0440\u043e\u0441\u044b \u043a\u0430\u043a \u0443\u0441\u0442\u0430\u0440\u0435\u0432\u0448\u0438\u0435, \u0447\u0442\u043e\u0431\u044b React Query \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u043b \u0438\u0445 \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u044b\u0439 \u0432\u044b\u0437\u043e\u0432;<\/p>\n<\/li>\n<li>\n<p>refetchQueries \u2013 \u043d\u0435\u043c\u0435\u0434\u043b\u0435\u043d\u043d\u043e \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442 \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u044b\u0439 \u0432\u044b\u0437\u043e\u0432 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432;<\/p>\n<\/li>\n<li>\n<p>setQueryData \u2013 \u0437\u0430\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u0442 \u0434\u0430\u043d\u043d\u044b\u0435 \u043f\u043e \u0437\u0430\u043f\u0440\u043e\u0441\u0443 \u0432 \u043a\u044d\u0448 \u0432\u0440\u0443\u0447\u043d\u0443\u044e, \u0447\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u043f\u0440\u0438\u0433\u043e\u0434\u0438\u0442\u044c\u0441\u044f \u043f\u0440\u0438 \u043e\u043f\u0442\u0438\u043c\u0438\u0441\u0442\u0438\u0447\u043d\u043e\u043c \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0438 \u0438\u043b\u0438 \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u0438\u0437\u0430\u0446\u0438\u0438 \u0434\u0430\u043d\u043d\u044b\u0445 \u043f\u043e\u0441\u043b\u0435 \u043c\u0443\u0442\u0430\u0446\u0438\u0438;<\/p>\n<\/li>\n<li>\n<p>getQueryData \u2013 \u0447\u0442\u0435\u043d\u0438\u0435 \u0434\u0430\u043d\u043d\u044b\u0445 \u0438\u0437 \u043a\u044d\u0448\u0430 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432;<\/p>\n<\/li>\n<li>\n<p>getQueryCache \u2013 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u043e\u0431\u044a\u0435\u043a\u0442 QueryCache \u0434\u043b\u044f \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043a\u044d\u0448\u0435\u043c \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432;<\/p>\n<\/li>\n<li>\n<p>getMutationCache \u2013 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u043e\u0431\u044a\u0435\u043a\u0442 MutationCache \u0434\u043b\u044f \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043a\u044d\u0448\u0435\u043c \u043c\u0443\u0442\u0430\u0446\u0438\u0439;<\/p>\n<\/li>\n<li>\n<p>clear \u2013 \u043f\u043e\u043b\u043d\u0430\u044f \u043e\u0447\u0438\u0441\u0442\u043a\u0430 \u043a\u044d\u0448\u0430.<\/p>\n<\/li>\n<\/ul>\n<div>\n<div class=\"table\">\n<table>\n<tbody>\n<tr>\n<td>\n<p align=\"left\">const queryClient = useQueryClient();<\/p>\n<p><em>\/\/ \u0418\u043d\u0432\u0430\u043b\u0438\u0434\u0438\u0440\u0443\u0435\u043c \u0437\u0430\u043f\u0440\u043e\u0441 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439 \u0434\u043b\u044f \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e\u0433\u043e \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f<\/em><br \/>queryClient.invalidateQueries({ queryKey: [&#8216;users&#8217;] });<\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<h3>QueryCache<\/h3>\n<p>QueryCache \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0437\u0432\u0430\u0442\u044c \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0435\u043c \u0432\u0441\u0435\u0445 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438. \u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, \u043a\u043e\u0433\u0434\u0430 React Query \u0441\u043e\u0431\u0438\u0440\u0430\u0435\u0442\u0441\u044f \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u044c \u0437\u0430\u043f\u0440\u043e\u0441, \u043e\u043d \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u0441\u043c\u043e\u0442\u0440\u0438\u0442, \u0435\u0441\u0442\u044c \u043b\u0438 \u0434\u0430\u043d\u043d\u044b\u0435 \u0432 \u043a\u044d\u0448\u0435 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432. \u0415\u0441\u043b\u0438 \u043e\u043d\u0438 \u0435\u0441\u0442\u044c \u0438 \u0430\u043a\u0442\u0443\u0430\u043b\u044c\u043d\u044b (staleTime), \u0442\u043e \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u044e\u0442\u0441\u044f \u044d\u0442\u0438 \u0434\u0430\u043d\u043d\u044b\u0435. \u0415\u0441\u043b\u0438 \u0436\u0435 \u0442\u0430\u043a\u0438\u0445 \u0434\u0430\u043d\u043d\u044b\u0445 \u043d\u0435\u0442 \u0438\u043b\u0438 \u043e\u043d\u0438 \u043d\u0435\u0430\u043a\u0442\u0443\u0430\u043b\u044c\u043d\u044b, \u0442\u043e React Query \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442 \u0437\u0430\u043f\u0440\u043e\u0441 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440 \u0438 \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u0442 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u0432 \u043a\u044d\u0448 \u043d\u0430 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0451\u043d\u043d\u043e\u0435 \u0432\u0440\u0435\u043c\u044f (gcTime) \u0438 \u0441\u0447\u0438\u0442\u0430\u0435\u0442 \u0438\u0445 \u0441\u0432\u0435\u0436\u0438\u043c\u0438 \u0434\u043e \u043e\u043a\u043e\u043d\u0447\u0430\u043d\u0438\u044f staleTime.<\/p>\n<p>QueryCache \u043d\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0432 QueryClient \u2013 \u0441\u043e\u0437\u0434\u0430\u0451\u0442\u0441\u044f \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440 QueryCache \u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u0451\u0442\u0441\u044f \u0432 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440 QueryClient.<\/p>\n<div>\n<div class=\"table\">\n<table>\n<tbody>\n<tr>\n<td>\n<p align=\"left\">const queryCache = new QueryCache({<br \/> <em>\/\/ \u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u043a\u044d\u0448\u0430<\/em><br \/>});<\/p>\n<p>const queryClient = new QueryClient({<br \/> queryCache,<br \/>});<\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<p>\u0412 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440\u0430 QueryCache \u043c\u043e\u0436\u043d\u043e \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u044c \u043e\u0431\u044a\u0435\u043a\u0442 \u0441 \u043f\u043e\u043b\u044f\u043c\u0438 onSuccess, onError \u0438 onSettled, \u043e\u0437\u043d\u0430\u0447\u0430\u044e\u0449\u0438\u0435 \u0442\u043e \u0436\u0435 \u0441\u0430\u043c\u043e\u0435, \u0447\u0442\u043e \u0438 \u0442\u0435 \u0436\u0435 \u043f\u043e\u043b\u044f \u0434\u043b\u044f \u043c\u0443\u0442\u0430\u0446\u0438\u0439 \u0432 defaultOptions.mutations, \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u0438\u043c\u0435\u043d\u0438\u043c\u043e \u043a \u0437\u0430\u043f\u0440\u043e\u0441\u0430\u043c.<\/p>\n<p>\u042d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440 QueryCache \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u0435\u0442\u043e\u0434\u044b \u0434\u043b\u044f \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043a\u044d\u0448\u0435\u043c:<\/p>\n<ul>\n<li>\n<p>find \u2013 \u043f\u043e\u0438\u0441\u043a \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u043d\u043e\u0433\u043e \u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u043f\u043e \u043a\u043b\u044e\u0447\u0443 \u0438 \u0434\u0440\u0443\u0433\u0438\u043c \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430\u043c;<\/p>\n<\/li>\n<li>\n<p>findAll \u2013 \u043f\u043e\u0438\u0441\u043a \u0432\u0441\u0435\u0445 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432;<\/p>\n<\/li>\n<li>\n<p>get \u2013 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u0437\u0430\u043f\u0440\u043e\u0441 \u043f\u043e \u0435\u0433\u043e \u0445\u044d\u0448\u0443;<\/p>\n<\/li>\n<li>\n<p>getAll \u2013 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u0432\u0441\u0435 \u0437\u0430\u043f\u0440\u043e\u0441\u044b \u0432 \u043a\u044d\u0448\u0435;<\/p>\n<\/li>\n<li>\n<p>remove \u2013 \u0443\u0434\u0430\u043b\u044f\u0435\u0442 \u0437\u0430\u043f\u0440\u043e\u0441 \u0438\u0437 \u043a\u044d\u0448\u0430;<\/p>\n<\/li>\n<li>\n<p>clear \u2013 \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u043e\u0447\u0438\u0449\u0430\u0435\u0442 \u043a\u044d\u0448 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432.<\/p>\n<\/li>\n<\/ul>\n<div>\n<div class=\"table\">\n<table>\n<tbody>\n<tr>\n<td>\n<p align=\"left\"><em>\/\/ \u041f\u043e\u043b\u0443\u0447\u0430\u0435\u043c QueryCache \u0438\u0437 QueryClient<\/em><br \/>const queryCache = queryClient.getQueryCache();<\/p>\n<p align=\"left\"><em>\/\/ \u0418\u0449\u0435\u043c \u0437\u0430\u043f\u0440\u043e\u0441 \u043f\u043e \u043a\u043b\u044e\u0447\u0443<\/em><br \/>const query = queryCache.find({ queryKey: [&#8216;users&#8217;] });<\/p>\n<p align=\"left\"><em>\/\/ \u0423\u0434\u0430\u043b\u044f\u0435\u043c \u0437\u0430\u043f\u0440\u043e\u0441 \u0438\u0437 \u043a\u044d\u0448\u0430<\/em><br \/>if (query) {<br \/>\u00a0 queryCache.remove(query);<br \/>}<\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<p>\u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043e\u0447\u0438\u0449\u0430\u0442\u044c \u043a\u044d\u0448 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043f\u043e\u0441\u043b\u0435 \u0432\u044b\u0445\u043e\u0434\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u0438\u0437 \u043f\u0440\u043e\u0444\u0438\u043b\u044f, \u0442\u0430\u043a \u043a\u0430\u043a \u044d\u0442\u0438 \u0434\u0430\u043d\u043d\u044b\u0435 \u043d\u0430\u043c \u0431\u043e\u043b\u044c\u0448\u0435 \u043d\u0435 \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u044f\u0442\u0441\u044f.<\/p>\n<h3>MutationCache<\/h3>\n<p>\u0415\u0449\u0451 \u043e\u0434\u0438\u043d \u043e\u0431\u044a\u0435\u043a\u0442 \u0434\u043b\u044f \u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u043a\u044d\u0448\u0430, \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u043b\u044f \u043c\u0443\u0442\u0430\u0446\u0438\u0439. \u0422\u0430\u043a \u0436\u0435 \u0441\u043e\u0437\u0434\u0430\u0451\u0442\u0441\u044f \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440 MutationCache \u0438 \u043f\u0440\u043e\u0431\u0440\u0430\u0441\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0432 QueryClient \u043f\u0440\u0438 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438. \u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 MutationCache \u0438\u0434\u0435\u043d\u0442\u0438\u0447\u043d\u0430 QueryCache \u0438 \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u0432 \u0441\u0435\u0431\u044f \u0442\u0435 \u0436\u0435 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b.<\/p>\n<div>\n<div class=\"table\">\n<table>\n<tbody>\n<tr>\n<td>\n<p align=\"left\">const mutationCache = new MutationCache({<br \/> <em>\/\/ \u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u043a\u044d\u0448\u0430<\/em><br \/>});<\/p>\n<p>const queryClient = new QueryClient({<br \/> mutationCache,<br \/>});<\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<p>\u042d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440 MutationCache \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u043f\u043e\u0445\u043e\u0436\u0438\u0435 \u043c\u0435\u0442\u043e\u0434\u044b QueryCache, \u043d\u043e \u0434\u043b\u044f \u043c\u0443\u0442\u0430\u0446\u0438\u0439:<\/p>\n<ul>\n<li>\n<p>find \u2013 \u043f\u043e\u0438\u0441\u043a \u043c\u0443\u0442\u0430\u0446\u0438\u0438 \u043f\u043e \u043a\u043b\u044e\u0447\u0443 \u0438\u043b\u0438 \u0434\u0440\u0443\u0433\u0438\u043c \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430\u043c;<\/p>\n<\/li>\n<li>\n<p>findAll \u2013 \u043f\u043e\u0438\u0441\u043a \u0432\u0441\u0435\u0445 \u043c\u0443\u0442\u0430\u0446\u0438\u0439;<\/p>\n<\/li>\n<li>\n<p>getAll \u2013 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u0432\u0441\u0435 \u043c\u0443\u0442\u0430\u0446\u0438\u0438 \u0432 \u043a\u044d\u0448\u0435;<\/p>\n<\/li>\n<li>\n<p>remove \u2013 \u0443\u0434\u0430\u043b\u044f\u0435\u0442 \u043c\u0443\u0442\u0430\u0446\u0438\u044e \u0438\u0437 \u043a\u044d\u0448\u0430;<\/p>\n<\/li>\n<li>\n<p>clear \u2013 \u043e\u0447\u0438\u0449\u0430\u0435\u0442 \u0432\u0435\u0441\u044c \u043a\u044d\u0448 \u043c\u0443\u0442\u0430\u0446\u0438\u0439.<\/p>\n<\/li>\n<\/ul>\n<div>\n<div class=\"table\">\n<table>\n<tbody>\n<tr>\n<td>\n<p align=\"left\"><em>\/\/ \u041f\u043e\u043b\u0443\u0447\u0430\u0435\u043c MutationCache \u0438\u0437 QueryClient<\/em><br \/>const mutationCache = queryClient.getMutationCache();<\/p>\n<p><em>\/\/ \u0418\u0449\u0435\u043c \u043c\u0443\u0442\u0430\u0446\u0438\u044e \u043f\u043e \u043a\u043b\u044e\u0447\u0443<\/em><br \/>const mutation = mutationCache.find({ mutationKey: [&#8216;users&#8217;, &#8216;edit&#8217;] });<\/p>\n<p><em>\/\/ \u0423\u0434\u0430\u043b\u044f\u0435\u043c \u0437\u0430\u043f\u0440\u043e\u0441 \u0438\u0437 \u043a\u044d\u0448\u0430<\/em><br \/>if (mutation) {<br \/>\u00a0 mutationCache.remove(mutation);<br \/>}<\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<h2>\u0417\u0430\u043f\u0440\u043e\u0441\u044b<\/h2>\n<p>\u0414\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u0437\u0430\u043f\u0440\u043e\u0441\u0430\u043c\u0438 React Query \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u0435\u0442 \u0445\u0443\u043a <strong>useQuery<\/strong>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043b\u0435\u0433\u043a\u043e \u043f\u043e\u043b\u0443\u0447\u0430\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435 \u0441 \u0441\u0435\u0440\u0432\u0435\u0440\u0430 \u0438 \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u0438\u0445 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435\u043c. \u0412\u0434\u043e\u0431\u0430\u0432\u043e\u043a \u043a \u044d\u0442\u043e\u043c\u0443, \u043e\u043d \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0434\u0435\u043b\u0430\u0435\u0442 \u043a\u044d\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435, \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u044b\u0435 \u0437\u0430\u043f\u0440\u043e\u0441\u044b \u0438 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 \u0434\u0430\u043d\u043d\u044b\u0445.<\/p>\n<p>useQuery \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u0434\u0432\u0430 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430:<\/p>\n<ul>\n<li>\n<p>options \u2013 \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u043e\u0431\u044a\u0435\u043a\u0442 \u0441 \u043e\u043f\u0446\u0438\u044f\u043c \u0434\u043b\u044f \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0437\u0430\u043f\u0440\u043e\u0441\u0430;<\/p>\n<\/li>\n<li>\n<p>queryClient \u2013 \u043d\u0435\u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u043e\u0431\u044a\u0435\u043a\u0442 \u0434\u043b\u044f \u043f\u0435\u0440\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u0431\u0430\u0437\u043e\u0432\u043e\u0433\u043e QueryClient.<\/p>\n<\/li>\n<\/ul>\n<p>\u0412 options \u043f\u0435\u0440\u0435\u0434\u0430\u044e\u0442\u0441\u044f \u0442\u0435 \u0436\u0435 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b, \u0447\u0442\u043e \u0438 \u0432 defaultOptions.queries \u0432\u043d\u0443\u0442\u0440\u0438 QueryClient, \u043d\u043e \u0441 \u0442\u0435\u043c \u043e\u0442\u043b\u0438\u0447\u0438\u0435\u043c, \u0447\u0442\u043e \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 useQuery \u0431\u0443\u0434\u0443\u0442 \u043f\u0435\u0440\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0442\u044c \u0431\u0430\u0437\u043e\u0432\u044b\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f, \u0443\u043a\u0430\u0437\u0430\u043d\u043d\u044b\u0435 \u0432 QueryClient. \u0412\u043e\u0442 \u043d\u0430\u0438\u0431\u043e\u043b\u0435\u0435 \u0432\u0430\u0436\u043d\u044b\u0435 \u0438\u0437 \u043d\u0438\u0445:<\/p>\n<ul>\n<li>\n<p>queryKey \u2013 \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u0439 \u043a\u043b\u044e\u0447 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0437\u0430\u043f\u0440\u043e\u0441\u0430;<\/p>\n<\/li>\n<li>\n<p>queryFn \u2013 \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0434\u043b\u044f \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u0437\u0430\u043f\u0440\u043e\u0441\u0430;<\/p>\n<\/li>\n<li>\n<p>enabled \u2013 \u0444\u043b\u0430\u0433, \u0432\u043a\u043b\u044e\u0447\u0430\u044e\u0449\u0438\u0439 \/ \u0432\u044b\u043a\u043b\u044e\u0447\u0430\u044e\u0449\u0438\u0439 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0435 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 \u0437\u0430\u043f\u0440\u043e\u0441\u0430;<\/p>\n<\/li>\n<li>\n<p>select \u2013 \u0444\u0443\u043d\u043a\u0446\u0438\u044f, \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0449\u0430\u044f \u0442\u0440\u0430\u043d\u0441\u0444\u043e\u0440\u043c\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435;<\/p>\n<\/li>\n<li>\n<p>initialData \u2013 \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435;<\/p>\n<\/li>\n<li>\n<p>meta \u2013 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u0430\u044f \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044f \u0434\u043b\u044f \u0437\u0430\u043f\u0440\u043e\u0441\u0430.<\/p>\n<\/li>\n<\/ul>\n<p>\u041e\u0431\u044a\u0435\u043a\u0442 options \u0442\u0440\u0435\u0431\u0443\u0435\u0442 \u0443\u043a\u0430\u0437\u0430\u0442\u044c \u043b\u0438\u0448\u044c \u043e\u0434\u043d\u043e \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 <strong>queryKey<\/strong> \u2013 \u043a\u043b\u044e\u0447 \u0437\u0430\u043f\u0440\u043e\u0441\u0430. React Query \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442 \u043a\u044d\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u044d\u0442\u0438\u0445 \u043a\u043b\u044e\u0447\u0435\u0439, \u043a \u0442\u043e\u043c\u0443 \u0436\u0435, \u0435\u0441\u043b\u0438 \u043a\u043b\u044e\u0447 \u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f, \u0437\u0430\u043f\u0440\u043e\u0441 \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d \u0437\u0430\u043d\u043e\u0432\u043e. \u0422\u0430\u043a\u0438\u0435 \u043a\u043b\u044e\u0447\u0438 \u0434\u043e\u043b\u0436\u043d\u044b \u0431\u044b\u0442\u044c \u043c\u0430\u0441\u0441\u0438\u0432\u043e\u043c \u0432\u0435\u0440\u0445\u043d\u0435\u0433\u043e \u0443\u0440\u043e\u0432\u043d\u044f \u0438 \u0441\u043f\u043e\u0441\u043e\u0431\u043d\u044b \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442\u044c \u0432 \u0441\u0435\u0431\u0435 \u043a\u0430\u043a \u043f\u0440\u0438\u043c\u0438\u0442\u0438\u0432\u044b, \u0442\u0430\u043a \u0438 \u043e\u0431\u044a\u0435\u043a\u0442\u044b. \u041a\u043b\u044e\u0447 \u0434\u043e\u043b\u0436\u0435\u043d \u0431\u044b\u0442\u044c \u0443\u043d\u0438\u043a\u0430\u043b\u0435\u043d \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0441\u043e\u0437\u0434\u0430\u044e\u0449\u0435\u0433\u043e\u0441\u044f \u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u0438 \u0432\u043a\u043b\u044e\u0447\u0430\u0442\u044c \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0431\u0443\u0434\u0443\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0432 \u0437\u0430\u043f\u0440\u043e\u0441\u0435.<\/p>\n<div>\n<div class=\"table\">\n<table>\n<tbody>\n<tr>\n<td>\n<p align=\"left\">const useFetchUsers = () =&gt; useQuery({<br \/>\u00a0 \u00a0 queryKey: [&#8216;users&#8217;],<br \/>});<\/p>\n<p>const useFetchUser = (id: number) =&gt; useQuery({<br \/>\u00a0 \u00a0 queryKey: [&#8216;users&#8217;, id],<br \/>});<\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<p>\u041f\u043e \u043a\u043b\u044e\u0447\u0430\u043c \u0442\u0430\u043a\u0436\u0435 \u043c\u043e\u0436\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u043b\u0443\u0447\u0430\u0442\u044c \u0437\u0430\u043f\u0440\u043e\u0441\u044b \u0438\u0437 \u043a\u044d\u0448\u0430 QueryCache \u0438\u043b\u0438 \u0434\u0435\u043b\u0430\u0442\u044c \u0434\u0440\u0443\u0433\u0438\u0435 \u043c\u0430\u043d\u0438\u043f\u0443\u043b\u044f\u0446\u0438\u0438, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043f\u043e\u043c\u0435\u0442\u0438\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435 \u043a\u0430\u043a \u0443\u0441\u0442\u0430\u0440\u0435\u0432\u0448\u0438\u0435.<\/p>\n<p>\u0414\u0440\u0443\u0433\u043e\u0439 \u0432\u0430\u0436\u043d\u044b\u0439 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440 \u2013 <strong>queryFn<\/strong> \u2013 \u0444\u0443\u043d\u043a\u0446\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0434\u043b\u044f<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-462067","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/462067","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=462067"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/462067\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=462067"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=462067"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=462067"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}