{"id":107658,"date":"2025-05-05T14:18:14","date_gmt":"2025-05-05T10:48:14","guid":{"rendered":"https:\/\/nabfollower.com\/blog\/react-query-factory-%d9%82%d9%84%d8%a7%d8%a8-%d9%87%d8%a7%db%8c-%d8%a7%db%8c%d9%85%d9%86-%d9%82%d8%a7%d8%a8%d9%84-%d8%a7%d8%b3%d8%aa%d9%81%d8%a7%d8%af%d9%87-%d9%85%d8%ac%d8%af%d8%af-%d8%a8%d8%a7-axio\/"},"modified":"2025-05-05T14:18:14","modified_gmt":"2025-05-05T10:48:14","slug":"react-query-factory-%d9%82%d9%84%d8%a7%d8%a8-%d9%87%d8%a7%db%8c-%d8%a7%db%8c%d9%85%d9%86-%d9%82%d8%a7%d8%a8%d9%84-%d8%a7%d8%b3%d8%aa%d9%81%d8%a7%d8%af%d9%87-%d9%85%d8%ac%d8%af%d8%af-%d8%a8%d8%a7-axio","status":"publish","type":"post","link":"https:\/\/nabfollower.com\/blog\/react-query-factory-%d9%82%d9%84%d8%a7%d8%a8-%d9%87%d8%a7%db%8c-%d8%a7%db%8c%d9%85%d9%86-%d9%82%d8%a7%d8%a8%d9%84-%d8%a7%d8%b3%d8%aa%d9%81%d8%a7%d8%af%d9%87-%d9%85%d8%ac%d8%af%d8%af-%d8%a8%d8%a7-axio\/","title":{"rendered":"React Query Factory: \u0642\u0644\u0627\u0628 \u0647\u0627\u06cc \u0627\u06cc\u0645\u0646 \u0642\u0627\u0628\u0644 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u062c\u062f\u062f \u0628\u0627 Axios &#038; FSD"},"content":{"rendered":"<div data-article-id=\"2460565\" id=\"article-body\">\n<p>\u062f\u0631 \u062f\u0646\u06cc\u0627\u06cc \u0645\u062f\u0631\u0646 \u062a\u0648\u0633\u0639\u0647 Frontend \u060c \u0628\u0647\u06cc\u0646\u0647 \u0633\u0627\u0632\u06cc \u062f\u0627\u062f\u0647 \u0647\u0627 \u06a9\u0644\u06cc\u062f \u0627\u06cc\u062c\u0627\u062f \u0628\u0631\u0646\u0627\u0645\u0647 \u0647\u0627\u06cc \u067e\u0627\u0633\u062e\u06af\u0648 \u0648 \u0645\u0642\u06cc\u0627\u0633 \u067e\u0630\u06cc\u0631 \u0627\u0633\u062a. \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 \u0628\u0631\u0627\u06cc \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u0647\u0627\u06cc \u0646\u0627\u0647\u0645\u0632\u0645\u0627\u0646 \u060c \u0645\u0627\u0646\u0646\u062f <code>@tanstack\/react-query<\/code> \u0648\u062a <code>axios<\/code>\u060c \u06cc\u06a9 \u0633\u06cc\u0633\u062a\u0645 \u0645\u0646\u0627\u0633\u0628 \u0628\u0631\u0627\u06cc \u06a9\u0627\u0631 \u0628\u0627 \u0622\u0646 \u0641\u0631\u0627\u0647\u0645 \u0645\u06cc \u06a9\u0646\u062f <code>REST APIs<\/code>\u0628\u0627 <code>tRPC<\/code>\u060c \u06cc\u0627 <code>GraphQL<\/code>\u0628\u0634\u0631<\/p>\n<p>\u062f\u0631 \u0647\u0646\u06af\u0627\u0645 \u062a\u0647\u06cc\u0647 \u0628\u0631\u0646\u0627\u0645\u0647 \u0647\u0627 \u060c \u0645\u0627 \u0627\u063a\u0644\u0628 \u0628\u0627\u06cc\u062f \u0627\u0642\u062f\u0627\u0645\u0627\u062a \u0645\u0634\u0627\u0628\u0647\u06cc \u0631\u0627 \u0628\u0631\u0627\u06cc \u0645\u0648\u062c\u0648\u062f\u0627\u062a \u0645\u062e\u062a\u0644\u0641 API \u0627\u0646\u062c\u0627\u0645 \u062f\u0647\u06cc\u0645: \u0644\u06cc\u0633\u062a\u06cc \u0627\u0632 \u0645\u0648\u0627\u0631\u062f \u0631\u0627 \u062f\u0631\u06cc\u0627\u0641\u062a \u06a9\u0646\u06cc\u062f \u060c \u06cc\u06a9 \u0645\u0648\u0631\u062f \u0648\u0627\u062d\u062f \u0631\u0627 \u0628\u0627 \u0634\u0646\u0627\u0633\u0647 \u0628\u0627\u0632\u06cc\u0627\u0628\u06cc \u06a9\u0646\u06cc\u062f \u060c \u06cc\u06a9 \u0645\u0648\u0631\u062f \u062c\u062f\u06cc\u062f \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f \u0648 \u0647\u0645\u0686\u0646\u06cc\u0646 \u0628\u0647 \u0631\u0648\u0632\u0631\u0633\u0627\u0646\u06cc \u0647\u0627 \u0648 \u062d\u0630\u0641 \u0647\u0627 \u0631\u0627 \u0627\u0646\u062c\u0627\u0645 \u062f\u0647\u06cc\u062f. \u0627\u06cc\u0646 \u0639\u0645\u0644\u06cc\u0627\u062a \u0646\u0627\u0645\u06cc\u062f\u0647 \u0645\u06cc \u0634\u0648\u062f <code>CRUD<\/code> (\u0627\u06cc\u062c\u0627\u062f \u060c \u062e\u0648\u0627\u0646\u062f\u0646 \u060c \u0628\u0647 \u0631\u0648\u0632\u0631\u0633\u0627\u0646\u06cc \u060c \u062d\u0630\u0641).<\/p>\n<p>\u0645\u0646 \u0646\u062d\u0648\u0647 \u0627\u062c\u0631\u0627\u06cc \u0642\u0644\u0627\u0628 \u0647\u0627\u06cc \u062c\u0647\u0627\u0646\u06cc Crud \u0631\u0627 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 \u0647\u0627\u06cc \u0641\u0648\u0642 \u0627\u0644\u0630\u06a9\u0631 \u0628\u0647 \u0633\u0628\u06a9 \u06a9\u0627\u0631\u0628\u0631\u062f\u06cc \u0628\u0631 \u0627\u0633\u0627\u0633 \u0627\u0644\u06af\u0648\u06cc \u06a9\u0627\u0631\u062e\u0627\u0646\u0647 \u0646\u0634\u0627\u0646 \u062e\u0648\u0627\u0647\u0645 \u062f\u0627\u062f. \u0628\u0647 \u062c\u0627\u06cc \u06a9\u067e\u06cc \u06a9\u0631\u062f\u0646 \u06a9\u062f \u0628\u0631\u0627\u06cc \u0647\u0631 \u0646\u0647\u0627\u062f \u060c \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u0645 \u0642\u0644\u0627\u0628 \u0647\u0627\u06cc\u06cc \u062a\u0648\u0644\u06cc\u062f \u06a9\u0646\u06cc\u0645 \u06a9\u0647 \u0628\u0647 \u0637\u0648\u0631 \u0642\u0627\u0628\u0644 \u062a\u0648\u062c\u0647\u06cc \u0645\u06cc\u0632\u0627\u0646 \u06a9\u062f \u06a9\u067e\u06cc \u0686\u0633\u0628\u0627\u0646\u062f\u0647 \u0631\u0627 \u06a9\u0627\u0647\u0634 \u0645\u06cc \u062f\u0647\u062f \u0648 \u0622\u0646 \u0631\u0627 \u0627\u0646\u0639\u0637\u0627\u0641 \u067e\u0630\u06cc\u0631 \u0648 \u0642\u0627\u0628\u0644 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u062c\u062f\u062f \u0645\u06cc \u06a9\u0646\u062f. \u0627\u06cc\u0646 \u0631\u0648\u06cc\u06a9\u0631\u062f \u0628\u0647 \u0631\u0627\u062d\u062a\u06cc \u0645\u0642\u06cc\u0627\u0633 \u067e\u0630\u06cc\u0631 \u060c \u062c\u0647\u0627\u0646\u06cc \u0648 \u0628\u0631\u0627\u06cc \u0647\u0631 API \u0642\u0627\u0628\u0644 \u0627\u062c\u0631\u0627 \u0627\u0633\u062a.<\/p>\n<p>\u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0627\u06cc\u0646 \u0645\u0642\u0627\u0644\u0647 \u0631\u0627 \u062f\u0631 \u0648\u0628\u0644\u0627\u06af \u0645\u0646 \u0628\u062e\u0648\u0627\u0646\u06cc\u062f \u06cc\u0627 \u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u0628\u062e\u0648\u0627\u0646\u06cc\u062f.<\/p>\n<hr\/>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_84 counter-hierarchy ez-toc-counter-rtl ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">\u0641\u0647\u0631\u0633\u062a \u0645\u0637\u0627\u0644\u0628<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/nabfollower.com\/blog\/react-query-factory-%d9%82%d9%84%d8%a7%d8%a8-%d9%87%d8%a7%db%8c-%d8%a7%db%8c%d9%85%d9%86-%d9%82%d8%a7%d8%a8%d9%84-%d8%a7%d8%b3%d8%aa%d9%81%d8%a7%d8%af%d9%87-%d9%85%d8%ac%d8%af%d8%af-%d8%a8%d8%a7-axio\/#tanstackreact-query_%D9%88_axios\" >@tanstack\/react-query \u0648 axios<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/nabfollower.com\/blog\/react-query-factory-%d9%82%d9%84%d8%a7%d8%a8-%d9%87%d8%a7%db%8c-%d8%a7%db%8c%d9%85%d9%86-%d9%82%d8%a7%d8%a8%d9%84-%d8%a7%d8%b3%d8%aa%d9%81%d8%a7%d8%af%d9%87-%d9%85%d8%ac%d8%af%d8%af-%d8%a8%d8%a7-axio\/#%D8%A7%D8%AC%D8%B1%D8%A7%DB%8C_%D9%82%D9%84%D8%A7%D8%A8_%D9%87%D8%A7%DB%8C_Crud_%D8%A8%D9%87_%D8%B3%D8%A8%DA%A9_%D8%B9%D9%85%D9%84%DA%A9%D8%B1%D8%AF%DB%8C\" >\u0627\u062c\u0631\u0627\u06cc \u0642\u0644\u0627\u0628 \u0647\u0627\u06cc Crud \u0628\u0647 \u0633\u0628\u06a9 \u0639\u0645\u0644\u06a9\u0631\u062f\u06cc<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/nabfollower.com\/blog\/react-query-factory-%d9%82%d9%84%d8%a7%d8%a8-%d9%87%d8%a7%db%8c-%d8%a7%db%8c%d9%85%d9%86-%d9%82%d8%a7%d8%a8%d9%84-%d8%a7%d8%b3%d8%aa%d9%81%d8%a7%d8%af%d9%87-%d9%85%d8%ac%d8%af%d8%af-%d8%a8%d8%a7-axio\/#%D9%85%D8%B1%D8%AD%D9%84%D9%87_1_%DA%A9%D8%AA%D8%A7%D8%A8%D8%AE%D8%A7%D9%86%D9%87_%D9%87%D8%A7%DB%8C_%D9%84%D8%A7%D8%B2%D9%85_%D8%B1%D8%A7_%D9%88%D8%B5%D9%84_%DA%A9%D9%86%DB%8C%D8%AF\" >\u0645\u0631\u062d\u0644\u0647 1: \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 \u0647\u0627\u06cc \u0644\u0627\u0632\u0645 \u0631\u0627 \u0648\u0635\u0644 \u06a9\u0646\u06cc\u062f<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/nabfollower.com\/blog\/react-query-factory-%d9%82%d9%84%d8%a7%d8%a8-%d9%87%d8%a7%db%8c-%d8%a7%db%8c%d9%85%d9%86-%d9%82%d8%a7%d8%a8%d9%84-%d8%a7%d8%b3%d8%aa%d9%81%d8%a7%d8%af%d9%87-%d9%85%d8%ac%d8%af%d8%af-%d8%a8%d8%a7-axio\/#%D9%85%D8%B1%D8%AD%D9%84%D9%87_2_%D8%B9%D9%85%D9%84%DA%A9%D8%B1%D8%AF_%D8%A7%D8%B5%D9%84%DB%8C_%D8%B1%D8%A7_%D8%A7%DB%8C%D8%AC%D8%A7%D8%AF_%DA%A9%D9%86%DB%8C%D8%AF\" >\u0645\u0631\u062d\u0644\u0647 2: \u0639\u0645\u0644\u06a9\u0631\u062f \u0627\u0635\u0644\u06cc \u0631\u0627 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/nabfollower.com\/blog\/react-query-factory-%d9%82%d9%84%d8%a7%d8%a8-%d9%87%d8%a7%db%8c-%d8%a7%db%8c%d9%85%d9%86-%d9%82%d8%a7%d8%a8%d9%84-%d8%a7%d8%b3%d8%aa%d9%81%d8%a7%d8%af%d9%87-%d9%85%d8%ac%d8%af%d8%af-%d8%a8%d8%a7-axio\/#HOOK_USEFETCHALL\" >HOOK USEFETCHALL<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/nabfollower.com\/blog\/react-query-factory-%d9%82%d9%84%d8%a7%d8%a8-%d9%87%d8%a7%db%8c-%d8%a7%db%8c%d9%85%d9%86-%d9%82%d8%a7%d8%a8%d9%84-%d8%a7%d8%b3%d8%aa%d9%81%d8%a7%d8%af%d9%87-%d9%85%d8%ac%d8%af%d8%af-%d8%a8%d8%a7-axio\/#Hook_UseFetchone\" >Hook UseFetchone<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/nabfollower.com\/blog\/react-query-factory-%d9%82%d9%84%d8%a7%d8%a8-%d9%87%d8%a7%db%8c-%d8%a7%db%8c%d9%85%d9%86-%d9%82%d8%a7%d8%a8%d9%84-%d8%a7%d8%b3%d8%aa%d9%81%d8%a7%d8%af%d9%87-%d9%85%d8%ac%d8%af%d8%af-%d8%a8%d8%a7-axio\/#%D9%82%D9%84%D8%A7%D8%A8\" >\u0642\u0644\u0627\u0628<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/nabfollower.com\/blog\/react-query-factory-%d9%82%d9%84%d8%a7%d8%a8-%d9%87%d8%a7%db%8c-%d8%a7%db%8c%d9%85%d9%86-%d9%82%d8%a7%d8%a8%d9%84-%d8%a7%d8%b3%d8%aa%d9%81%d8%a7%d8%af%d9%87-%d9%85%d8%ac%d8%af%d8%af-%d8%a8%d8%a7-axio\/#HookeUpdate\" >HookeUpdate<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/nabfollower.com\/blog\/react-query-factory-%d9%82%d9%84%d8%a7%d8%a8-%d9%87%d8%a7%db%8c-%d8%a7%db%8c%d9%85%d9%86-%d9%82%d8%a7%d8%a8%d9%84-%d8%a7%d8%b3%d8%aa%d9%81%d8%a7%d8%af%d9%87-%d9%85%d8%ac%d8%af%d8%af-%d8%a8%d8%a7-axio\/#%D9%82%D9%84%D8%A7%D8%A8-2\" >\u0642\u0644\u0627\u0628<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/nabfollower.com\/blog\/react-query-factory-%d9%82%d9%84%d8%a7%d8%a8-%d9%87%d8%a7%db%8c-%d8%a7%db%8c%d9%85%d9%86-%d9%82%d8%a7%d8%a8%d9%84-%d8%a7%d8%b3%d8%aa%d9%81%d8%a7%d8%af%d9%87-%d9%85%d8%ac%d8%af%d8%af-%d8%a8%d8%a7-axio\/#%D9%85%D8%B1%D8%AD%D9%84%D9%87_3_%D8%AA%D8%B3%D8%AA_%D9%87%D8%A7\" >\u0645\u0631\u062d\u0644\u0647 3: \u062a\u0633\u062a \u0647\u0627<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/nabfollower.com\/blog\/react-query-factory-%d9%82%d9%84%d8%a7%d8%a8-%d9%87%d8%a7%db%8c-%d8%a7%db%8c%d9%85%d9%86-%d9%82%d8%a7%d8%a8%d9%84-%d8%a7%d8%b3%d8%aa%d9%81%d8%a7%d8%af%d9%87-%d9%85%d8%ac%d8%af%d8%af-%d8%a8%d8%a7-axio\/#%D8%A7%D8%B3%D8%AA%D9%81%D8%A7%D8%AF%D9%87_%D8%A7%D8%B2_%D9%85%D8%AB%D8%A7%D9%84_%D8%AF%D8%B1_%DB%8C%DA%A9_%D9%85%D8%A4%D9%84%D9%81%D9%87_React\" >\u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0645\u062b\u0627\u0644 \u062f\u0631 \u06cc\u06a9 \u0645\u0624\u0644\u0641\u0647 React<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/nabfollower.com\/blog\/react-query-factory-%d9%82%d9%84%d8%a7%d8%a8-%d9%87%d8%a7%db%8c-%d8%a7%db%8c%d9%85%d9%86-%d9%82%d8%a7%d8%a8%d9%84-%d8%a7%d8%b3%d8%aa%d9%81%d8%a7%d8%af%d9%87-%d9%85%d8%ac%d8%af%d8%af-%d8%a8%d8%a7-axio\/#%D8%A7%DB%8C%D9%86_%D8%B1%D9%88%DB%8C%DA%A9%D8%B1%D8%AF_%DA%86%D9%87_%D9%85%D8%B4%DA%A9%D9%84%DB%8C_%D8%AF%D8%A7%D8%B1%D8%AF%D8%9F\" >\u0627\u06cc\u0646 \u0631\u0648\u06cc\u06a9\u0631\u062f \u0686\u0647 \u0645\u0634\u06a9\u0644\u06cc \u062f\u0627\u0631\u062f\u061f<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/nabfollower.com\/blog\/react-query-factory-%d9%82%d9%84%d8%a7%d8%a8-%d9%87%d8%a7%db%8c-%d8%a7%db%8c%d9%85%d9%86-%d9%82%d8%a7%d8%a8%d9%84-%d8%a7%d8%b3%d8%aa%d9%81%d8%a7%d8%af%d9%87-%d9%85%d8%ac%d8%af%d8%af-%d8%a8%d8%a7-axio\/#%D9%86%D9%85%D9%88%D9%86%D9%87_%D8%A7%DB%8C_%D8%A7%D8%B2_%D8%A7%D8%B3%D8%AA%D9%81%D8%A7%D8%AF%D9%87_%D8%A7%D8%B2_%DB%8C%DA%A9_%DA%A9%D8%A7%D8%B1%D8%AE%D8%A7%D9%86%D9%87_%D9%BE%D8%B1%D8%B3_%D9%88_%D8%AC%D9%88_%D8%AF%D8%B1_%DB%8C%DA%A9_%D8%A8%D8%B1%D9%86%D8%A7%D9%85%D9%87_%D8%B3%D8%A7%D8%AE%D8%AA%D9%87_%D8%B4%D8%AF%D9%87_%D8%A8%D8%B1_%D8%B1%D9%88%DB%8C_%D8%A7%D8%B5%D9%88%D9%84_%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C_%D8%AF%D8%A7%D8%B1%D8%A7%DB%8C_%D9%88%DB%8C%DA%98%DA%AF%DB%8C_FSD\" >\u0646\u0645\u0648\u0646\u0647 \u0627\u06cc \u0627\u0632 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u06cc\u06a9 \u06a9\u0627\u0631\u062e\u0627\u0646\u0647 \u067e\u0631\u0633 \u0648 \u062c\u0648 \u062f\u0631 \u06cc\u06a9 \u0628\u0631\u0646\u0627\u0645\u0647 \u0633\u0627\u062e\u062a\u0647 \u0634\u062f\u0647 \u0628\u0631 \u0631\u0648\u06cc \u0627\u0635\u0648\u0644 \u0637\u0631\u0627\u062d\u06cc \u062f\u0627\u0631\u0627\u06cc \u0648\u06cc\u0698\u06af\u06cc (FSD)<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-14\" href=\"https:\/\/nabfollower.com\/blog\/react-query-factory-%d9%82%d9%84%d8%a7%d8%a8-%d9%87%d8%a7%db%8c-%d8%a7%db%8c%d9%85%d9%86-%d9%82%d8%a7%d8%a8%d9%84-%d8%a7%d8%b3%d8%aa%d9%81%d8%a7%d8%af%d9%87-%d9%85%d8%ac%d8%af%d8%af-%d8%a8%d8%a7-axio\/#%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C_%D8%AF%D8%A7%D8%B1%D8%A7%DB%8C_%D9%88%DB%8C%DA%98%DA%AF%DB%8C_%DA%86%DB%8C%D8%B3%D8%AA%D8%9F\" >\u0637\u0631\u0627\u062d\u06cc \u062f\u0627\u0631\u0627\u06cc \u0648\u06cc\u0698\u06af\u06cc \u0686\u06cc\u0633\u062a\u061f<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-15\" href=\"https:\/\/nabfollower.com\/blog\/react-query-factory-%d9%82%d9%84%d8%a7%d8%a8-%d9%87%d8%a7%db%8c-%d8%a7%db%8c%d9%85%d9%86-%d9%82%d8%a7%d8%a8%d9%84-%d8%a7%d8%b3%d8%aa%d9%81%d8%a7%d8%af%d9%87-%d9%85%d8%ac%d8%af%d8%af-%d8%a8%d8%a7-axio\/#%D8%B3%D8%B7%D8%AD_FSD\" >\u0633\u0637\u062d FSD<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-16\" href=\"https:\/\/nabfollower.com\/blog\/react-query-factory-%d9%82%d9%84%d8%a7%d8%a8-%d9%87%d8%a7%db%8c-%d8%a7%db%8c%d9%85%d9%86-%d9%82%d8%a7%d8%a8%d9%84-%d8%a7%d8%b3%d8%aa%d9%81%d8%a7%d8%af%d9%87-%d9%85%d8%ac%d8%af%d8%af-%d8%a8%d8%a7-axio\/#%DA%A9%D8%A7%D8%B1%D8%AE%D8%A7%D9%86%D9%87_%D9%BE%D8%B1%D8%B3_%D9%88_%D8%AC%D9%88_%D9%88_FSD\" >\u06a9\u0627\u0631\u062e\u0627\u0646\u0647 \u067e\u0631\u0633 \u0648 \u062c\u0648 \u0648 FSD<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-17\" href=\"https:\/\/nabfollower.com\/blog\/react-query-factory-%d9%82%d9%84%d8%a7%d8%a8-%d9%87%d8%a7%db%8c-%d8%a7%db%8c%d9%85%d9%86-%d9%82%d8%a7%d8%a8%d9%84-%d8%a7%d8%b3%d8%aa%d9%81%d8%a7%d8%af%d9%87-%d9%85%d8%ac%d8%af%d8%af-%d8%a8%d8%a7-axio\/#%D9%85%D8%B4%D8%AA%D8%B1%DA%A9_%D9%85%D9%86%D8%A7%D8%A8%D8%B9_%D9%85%D8%B4%D8%AA%D8%B1%DA%A9\" >\u0645\u0634\u062a\u0631\u06a9 (\u0645\u0646\u0627\u0628\u0639 \u0645\u0634\u062a\u0631\u06a9)<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-18\" href=\"https:\/\/nabfollower.com\/blog\/react-query-factory-%d9%82%d9%84%d8%a7%d8%a8-%d9%87%d8%a7%db%8c-%d8%a7%db%8c%d9%85%d9%86-%d9%82%d8%a7%d8%a8%d9%84-%d8%a7%d8%b3%d8%aa%d9%81%d8%a7%d8%af%d9%87-%d9%85%d8%ac%d8%af%d8%af-%d8%a8%d8%a7-axio\/#%D9%85%D9%88%D8%AC%D9%88%D8%AF%D8%A7%D8%AA\" >\u0645\u0648\u062c\u0648\u062f\u0627\u062a<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-19\" href=\"https:\/\/nabfollower.com\/blog\/react-query-factory-%d9%82%d9%84%d8%a7%d8%a8-%d9%87%d8%a7%db%8c-%d8%a7%db%8c%d9%85%d9%86-%d9%82%d8%a7%d8%a8%d9%84-%d8%a7%d8%b3%d8%aa%d9%81%d8%a7%d8%af%d9%87-%d9%85%d8%ac%d8%af%d8%af-%d8%a8%d8%a7-axio\/#%D9%88%DB%8C%DA%98%DA%AF%DB%8C\" >\u0648\u06cc\u0698\u06af\u06cc<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-20\" href=\"https:\/\/nabfollower.com\/blog\/react-query-factory-%d9%82%d9%84%d8%a7%d8%a8-%d9%87%d8%a7%db%8c-%d8%a7%db%8c%d9%85%d9%86-%d9%82%d8%a7%d8%a8%d9%84-%d8%a7%d8%b3%d8%aa%d9%81%d8%a7%d8%af%d9%87-%d9%85%d8%ac%d8%af%d8%af-%d8%a8%d8%a7-axio\/#%D9%88%DB%8C%D8%B1%D8%A7%DA%86%D9%87\" >\u0648\u06cc\u0631\u0627\u0686\u0647<\/a><\/li><\/ul><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-21\" href=\"https:\/\/nabfollower.com\/blog\/react-query-factory-%d9%82%d9%84%d8%a7%d8%a8-%d9%87%d8%a7%db%8c-%d8%a7%db%8c%d9%85%d9%86-%d9%82%d8%a7%d8%a8%d9%84-%d8%a7%d8%b3%d8%aa%d9%81%d8%a7%d8%af%d9%87-%d9%85%d8%ac%d8%af%d8%af-%d8%a8%d8%a7-axio\/#%D9%86%D8%AA%DB%8C%D8%AC%D9%87_%DA%AF%DB%8C%D8%B1%DB%8C\" >\u0646\u062a\u06cc\u062c\u0647 \u06af\u06cc\u0631\u06cc<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-22\" href=\"https:\/\/nabfollower.com\/blog\/react-query-factory-%d9%82%d9%84%d8%a7%d8%a8-%d9%87%d8%a7%db%8c-%d8%a7%db%8c%d9%85%d9%86-%d9%82%d8%a7%d8%a8%d9%84-%d8%a7%d8%b3%d8%aa%d9%81%d8%a7%d8%af%d9%87-%d9%85%d8%ac%d8%af%d8%af-%d8%a8%d8%a7-axio\/#%D9%BE%DB%8C%D9%88%D9%86%D8%AF%D9%87%D8%A7%DB%8C_%D8%AC%D8%A7%D9%84%D8%A8\" >\u067e\u06cc\u0648\u0646\u062f\u0647\u0627\u06cc \u062c\u0627\u0644\u0628:<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"tanstackreact-query_%D9%88_axios\"><\/span>\n<p>  @tanstack\/react-query \u0648 axios<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<ul>\n<li>\n<code>@tanstack\/react-query<\/code>  -\u06a9\u0647 \u0642\u0628\u0644\u0627\u064b \u0628\u0627 \u0639\u0646\u0648\u0627\u0646 React-Query \u0634\u0646\u0627\u062e\u062a\u0647 \u0645\u06cc \u0634\u062f \u060c \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 \u0627\u06cc \u0628\u0631\u0627\u06cc \u0645\u062f\u06cc\u0631\u06cc\u062a \u0648\u0636\u0639\u06cc\u062a \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u0647\u0627 \u060c \u0630\u062e\u06cc\u0631\u0647 \u06a9\u0631\u062f\u0646 \u062f\u0627\u062f\u0647 \u0647\u0627 \u0648 \u0647\u0645\u06af\u0627\u0645 \u0633\u0627\u0632\u06cc \u0622\u0646 \u0628\u0627 \u0633\u0631\u0648\u0631 \u0627\u0633\u062a. \u0627\u06cc\u0646 \u0639\u0645\u0644\u06a9\u0631\u062f \u0631\u0627 \u0628\u0647 \u0637\u0648\u0631 \u0642\u0627\u0628\u0644 \u062a\u0648\u062c\u0647\u06cc \u0628\u0647\u0628\u0648\u062f \u0645\u06cc \u0628\u062e\u0634\u062f \u0648 \u06a9\u0627\u0631 \u0628\u0627 \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u0647\u0627\u06cc \u0646\u0627\u0647\u0645\u0632\u0645\u0627\u0646 \u0631\u0627 \u0628\u0627 \u0627\u0646\u062a\u0632\u0627\u0639 \u0645\u0646\u0637\u0642 API \u0628\u0647 \u062f\u0648\u0631 \u0627\u0632 \u0645\u0646\u0637\u0642 \u0627\u0631\u0627\u0626\u0647 \u062f\u0627\u062f\u0647 \u0647\u0627 \u062f\u0631 \u0645\u0624\u0644\u0641\u0647 \u0647\u0627\u06cc React \u0633\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u062f.<\/li>\n<li>\n<code>axios<\/code>  \u06cc\u06a9 \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 \u0645\u062d\u0628\u0648\u0628 \u0628\u0631\u0627\u06cc \u062f\u0631\u062e\u0648\u0627\u0633\u062a HTTP \u0627\u0633\u062a. \u0627\u06cc\u0646 \u0627\u0645\u0631 \u0628\u0647 \u062f\u0644\u06cc\u0644 \u0627\u0646\u0639\u0637\u0627\u0641 \u067e\u0630\u06cc\u0631\u06cc \u0648 \u0633\u0647\u0648\u0644\u062a \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u062c\u0645\u0644\u0647 \u0647\u0646\u06af\u0627\u0645 \u06a9\u0627\u0631 \u0628\u0627 \u0639\u0645\u0644\u06cc\u0627\u062a \u0646\u0627\u0647\u0645\u0632\u0645\u0627\u0646 \u0634\u0646\u0627\u062e\u062a\u0647 \u0634\u062f\u0647 \u0627\u0633\u062a.<\/li>\n<\/ul>\n<p>\u0647\u062f\u0641 \u0645\u0627 \u0627\u06cc\u062c\u0627\u062f \u062a\u0627\u0628\u0639\u06cc \u0627\u0633\u062a \u06a9\u0647 \u0628\u0647 \u0637\u0648\u0631 \u062e\u0648\u062f\u06a9\u0627\u0631 \u0642\u0644\u0627\u0628 \u0647\u0627\u06cc Crud \u0631\u0627 \u0628\u0631\u0627\u06cc \u0647\u0631 \u0646\u0647\u0627\u062f \u0627\u06cc\u062c\u0627\u062f \u0645\u06cc \u06a9\u0646\u062f \u0648 \u0645\u0627 \u0631\u0627 \u0627\u0632 \u0646\u0648\u0634\u062a\u0646 \u0647\u0645\u0627\u0646 \u06a9\u062f \u0628\u0627\u0631\u0647\u0627 \u0648 \u0628\u0627\u0631\u0647\u0627 \u0646\u062c\u0627\u062a \u0645\u06cc \u062f\u0647\u062f. \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0645\u062b\u0627\u0644 \u060c \u0627\u06af\u0631 \u0645\u0627 \u0646\u06cc\u0627\u0632 \u0628\u0647 \u0648\u0627\u06a9\u0634\u06cc \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u060c \u067e\u0633\u062a \u0647\u0627 \u06cc\u0627 \u0646\u0638\u0631\u0627\u062a \u062f\u0627\u0631\u06cc\u0645 \u060c \u0646\u0645\u06cc \u062e\u0648\u0627\u0647\u06cc\u0645 \u0647\u0645\u0627\u0646 \u06a9\u062f \u062f\u06cc\u06af \u0628\u062e\u0627\u0631 \u0631\u0627 \u0628\u0631\u0627\u06cc \u0647\u0631 \u0646\u0647\u0627\u062f \u062a\u06a9\u0631\u0627\u0631 \u06a9\u0646\u06cc\u0645.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"%D8%A7%D8%AC%D8%B1%D8%A7%DB%8C_%D9%82%D9%84%D8%A7%D8%A8_%D9%87%D8%A7%DB%8C_Crud_%D8%A8%D9%87_%D8%B3%D8%A8%DA%A9_%D8%B9%D9%85%D9%84%DA%A9%D8%B1%D8%AF%DB%8C\"><\/span>\n<p>  \u0627\u062c\u0631\u0627\u06cc \u0642\u0644\u0627\u0628 \u0647\u0627\u06cc Crud \u0628\u0647 \u0633\u0628\u06a9 \u0639\u0645\u0644\u06a9\u0631\u062f\u06cc<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0628\u06cc\u0627\u06cc\u06cc\u062f \u0628\u0627 \u0627\u062c\u0631\u0627\u06cc \u0622\u0646 \u0627\u062f\u0627\u0645\u0647 \u062f\u0647\u06cc\u0645. \u0645\u0627 \u06cc\u06a9 \u062a\u0627\u0628\u0639 \u0627\u06cc\u062c\u0627\u062f \u062e\u0648\u0627\u0647\u06cc\u0645 \u06a9\u0631\u062f <code>createCrudHooks<\/code> \u0627\u06cc\u0646 \u0645\u062c\u0645\u0648\u0639\u0647 \u0627\u06cc \u0627\u0632 \u0642\u0644\u0627\u0628 \u0647\u0627\u06cc Crud \u0631\u0627 \u0628\u0631\u0627\u06cc \u0647\u0631 \u0645\u0648\u062c\u0648\u062f\u06cc\u062a \u062e\u0627\u0635 \u0628\u0631\u0645\u06cc \u06af\u0631\u062f\u0627\u0646\u062f.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%D9%85%D8%B1%D8%AD%D9%84%D9%87_1_%DA%A9%D8%AA%D8%A7%D8%A8%D8%AE%D8%A7%D9%86%D9%87_%D9%87%D8%A7%DB%8C_%D9%84%D8%A7%D8%B2%D9%85_%D8%B1%D8%A7_%D9%88%D8%B5%D9%84_%DA%A9%D9%86%DB%8C%D8%AF\"><\/span>\n<p>  \u0645\u0631\u062d\u0644\u0647 1: \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 \u0647\u0627\u06cc \u0644\u0627\u0632\u0645 \u0631\u0627 \u0648\u0635\u0644 \u06a9\u0646\u06cc\u062f<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0628\u0631\u0627\u06cc \u0631\u0633\u06cc\u062f\u06af\u06cc \u0628\u0647 \u067e\u0631\u0633 \u0648 \u062c\u0648 \u0648 \u062d\u0627\u0641\u0638\u0647 \u067e\u0646\u0647\u0627\u0646 \u060c \u0646\u0635\u0628 \u06a9\u0646\u06cc\u062f <code>@tanstack\/react-query<\/code> \u0648\u062a <code>axios<\/code> (\u0628\u0639\u062f \u0627\u0632 \u062c\u0627\u0628\u062c\u0627\u06cc\u06cc \u0628\u0647 \u0641\u0647\u0631\u0633\u062a \u067e\u0631\u0648\u0698\u0647 \u062e\u0648\u062f):<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight console\"><code><span class=\"go\">cd .\/my-awesome-project\nnpm i axios react-query\n<\/span><\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<h3><span class=\"ez-toc-section\" id=\"%D9%85%D8%B1%D8%AD%D9%84%D9%87_2_%D8%B9%D9%85%D9%84%DA%A9%D8%B1%D8%AF_%D8%A7%D8%B5%D9%84%DB%8C_%D8%B1%D8%A7_%D8%A7%DB%8C%D8%AC%D8%A7%D8%AF_%DA%A9%D9%86%DB%8C%D8%AF\"><\/span>\n<p>  \u0645\u0631\u062d\u0644\u0647 2: \u0639\u0645\u0644\u06a9\u0631\u062f \u0627\u0635\u0644\u06cc \u0631\u0627 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0627\u06a9\u0646\u0648\u0646 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f <code>createCRUDHooks<\/code> \u0639\u0645\u0644\u06a9\u0631\u062f \u060c \u06a9\u0647 \u06cc\u06a9 URL \u067e\u0627\u06cc\u0647 \u0648 \u06cc\u06a9 \u0646\u0627\u0645 \u0645\u0648\u062c\u0648\u062f\u06cc\u062a (\u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0645\u062b\u0627\u0644 \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u06cc\u0627 \u067e\u0633\u062a \u0647\u0627) \u0645\u06cc \u06af\u06cc\u0631\u062f. \u0627\u06cc\u0646 \u062a\u0627\u0628\u0639 \u0645\u062c\u0645\u0648\u0639\u0647 \u0627\u06cc \u0627\u0632 \u0642\u0644\u0627\u0628 \u0647\u0627 \u0631\u0627 \u0628\u0631\u0627\u06cc \u0627\u0646\u062c\u0627\u0645 \u0639\u0645\u0644\u06cc\u0627\u062a CRUD \u0628\u0631\u0645\u06cc \u06af\u0631\u062f\u0627\u0646\u062f.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight typescript\"><code><span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">useMutation<\/span><span class=\"p\">,<\/span> <span class=\"nx\">useQuery<\/span><span class=\"p\">,<\/span> <span class=\"nx\">useQueryClient<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">@tanstack\/react-query<\/span><span class=\"dl\">'<\/span>\n\n<span class=\"k\">import<\/span> <span class=\"nx\">axios<\/span><span class=\"p\">,<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">AxiosResponse<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">axios<\/span><span class=\"dl\">'<\/span>\n\n<span class=\"kd\">const<\/span> <span class=\"nx\">createCrudHooks<\/span> <span class=\"o\">=<\/span> <span class=\"o\">&lt;<\/span><span class=\"nx\">T<\/span><span class=\"o\">&gt;<\/span><span class=\"p\">(<\/span><span class=\"nx\">baseUrl<\/span><span class=\"p\">:<\/span> <span class=\"kr\">string<\/span><span class=\"p\">,<\/span> <span class=\"nx\">entity<\/span><span class=\"p\">:<\/span> <span class=\"kr\">string<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"nx\">api<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">axios<\/span><span class=\"p\">.<\/span><span class=\"nf\">create<\/span><span class=\"p\">({<\/span>\n    <span class=\"na\">baseURL<\/span><span class=\"p\">:<\/span> <span class=\"nx\">baseUrl<\/span><span class=\"p\">,<\/span>\n  <span class=\"p\">})<\/span>\n\n  <span class=\"c1\">\/\/ Fetch All (GET)<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"nx\">useFetchAll<\/span> <span class=\"o\">=<\/span> <span class=\"p\">(<\/span><span class=\"na\">queryKey<\/span><span class=\"p\">:<\/span> <span class=\"kr\">string<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">return<\/span> <span class=\"nx\">useQuery<\/span><span class=\"o\">&lt;<\/span><span class=\"nx\">T<\/span><span class=\"p\">[]<\/span><span class=\"o\">&gt;<\/span><span class=\"p\">(<\/span><span class=\"nx\">queryKey<\/span><span class=\"p\">,<\/span> <span class=\"k\">async <\/span><span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n      <span class=\"kd\">const<\/span> <span class=\"na\">response<\/span><span class=\"p\">:<\/span> <span class=\"nx\">AxiosResponse<\/span><span class=\"o\">&lt;<\/span><span class=\"nx\">T<\/span><span class=\"p\">[]<\/span><span class=\"o\">&gt;<\/span> <span class=\"o\">=<\/span> <span class=\"k\">await<\/span> <span class=\"nx\">api<\/span><span class=\"p\">.<\/span><span class=\"nf\">get<\/span><span class=\"p\">(<\/span><span class=\"s2\">`\/<\/span><span class=\"p\">${<\/span><span class=\"nx\">entity<\/span><span class=\"p\">}<\/span><span class=\"s2\">`<\/span><span class=\"p\">)<\/span>\n      <span class=\"k\">return<\/span> <span class=\"nx\">response<\/span><span class=\"p\">.<\/span><span class=\"nx\">data<\/span>\n    <span class=\"p\">})<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"c1\">\/\/ Fetch One by ID (GET)<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"nx\">useFetchOne<\/span> <span class=\"o\">=<\/span> <span class=\"p\">(<\/span><span class=\"na\">queryKey<\/span><span class=\"p\">:<\/span> <span class=\"kr\">string<\/span><span class=\"p\">,<\/span> <span class=\"na\">id<\/span><span class=\"p\">:<\/span> <span class=\"kr\">string<\/span> <span class=\"o\">|<\/span> <span class=\"kr\">number<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">return<\/span> <span class=\"nx\">useQuery<\/span><span class=\"o\">&lt;<\/span><span class=\"nx\">T<\/span><span class=\"o\">&gt;<\/span><span class=\"p\">([<\/span><span class=\"nx\">queryKey<\/span><span class=\"p\">,<\/span> <span class=\"nx\">id<\/span><span class=\"p\">],<\/span> <span class=\"k\">async <\/span><span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n      <span class=\"kd\">const<\/span> <span class=\"na\">response<\/span><span class=\"p\">:<\/span> <span class=\"nx\">AxiosResponse<\/span><span class=\"o\">&lt;<\/span><span class=\"nx\">T<\/span><span class=\"o\">&gt;<\/span> <span class=\"o\">=<\/span> <span class=\"k\">await<\/span> <span class=\"nx\">api<\/span><span class=\"p\">.<\/span><span class=\"nf\">get<\/span><span class=\"p\">(<\/span><span class=\"s2\">`\/<\/span><span class=\"p\">${<\/span><span class=\"nx\">entity<\/span><span class=\"p\">}<\/span><span class=\"s2\">\/<\/span><span class=\"p\">${<\/span><span class=\"nx\">id<\/span><span class=\"p\">}<\/span><span class=\"s2\">`<\/span><span class=\"p\">)<\/span>\n      <span class=\"k\">return<\/span> <span class=\"nx\">response<\/span><span class=\"p\">.<\/span><span class=\"nx\">data<\/span>\n    <span class=\"p\">})<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"c1\">\/\/ Create (POST)<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"nx\">useCreate<\/span> <span class=\"o\">=<\/span> <span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n    <span class=\"kd\">const<\/span> <span class=\"nx\">queryClient<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">useQueryClient<\/span><span class=\"p\">()<\/span>\n\n    <span class=\"k\">return<\/span> <span class=\"nf\">useMutation<\/span><span class=\"p\">(<\/span>\n      <span class=\"k\">async <\/span><span class=\"p\">(<\/span><span class=\"na\">data<\/span><span class=\"p\">:<\/span> <span class=\"nb\">Partial<\/span><span class=\"o\">&lt;<\/span><span class=\"nx\">T<\/span><span class=\"o\">&gt;<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n        <span class=\"kd\">const<\/span> <span class=\"na\">response<\/span><span class=\"p\">:<\/span> <span class=\"nx\">AxiosResponse<\/span><span class=\"o\">&lt;<\/span><span class=\"nx\">T<\/span><span class=\"o\">&gt;<\/span> <span class=\"o\">=<\/span> <span class=\"k\">await<\/span> <span class=\"nx\">api<\/span><span class=\"p\">.<\/span><span class=\"nf\">post<\/span><span class=\"p\">(<\/span><span class=\"s2\">`\/<\/span><span class=\"p\">${<\/span><span class=\"nx\">entity<\/span><span class=\"p\">}<\/span><span class=\"s2\">`<\/span><span class=\"p\">,<\/span> <span class=\"nx\">data<\/span><span class=\"p\">)<\/span>\n        <span class=\"k\">return<\/span> <span class=\"nx\">response<\/span><span class=\"p\">.<\/span><span class=\"nx\">data<\/span>\n      <span class=\"p\">},<\/span>\n      <span class=\"p\">{<\/span>\n        <span class=\"na\">onSuccess<\/span><span class=\"p\">:<\/span> <span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n          <span class=\"nx\">queryClient<\/span><span class=\"p\">.<\/span><span class=\"nf\">invalidateQueries<\/span><span class=\"p\">(<\/span><span class=\"nx\">entity<\/span><span class=\"p\">)<\/span>\n        <span class=\"p\">},<\/span>\n      <span class=\"p\">}<\/span>\n    <span class=\"p\">)<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"c1\">\/\/ Update (PUT)<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"nx\">useUpdate<\/span> <span class=\"o\">=<\/span> <span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n    <span class=\"kd\">const<\/span> <span class=\"nx\">queryClient<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">useQueryClient<\/span><span class=\"p\">()<\/span>\n\n    <span class=\"k\">return<\/span> <span class=\"nf\">useMutation<\/span><span class=\"p\">(<\/span>\n      <span class=\"k\">async <\/span><span class=\"p\">({<\/span> <span class=\"nx\">id<\/span><span class=\"p\">,<\/span> <span class=\"nx\">data<\/span> <span class=\"p\">}:<\/span> <span class=\"p\">{<\/span> <span class=\"na\">id<\/span><span class=\"p\">:<\/span> <span class=\"kr\">string<\/span> <span class=\"o\">|<\/span> <span class=\"kr\">number<\/span><span class=\"p\">;<\/span> <span class=\"nl\">data<\/span><span class=\"p\">:<\/span> <span class=\"nb\">Partial<\/span><span class=\"o\">&lt;<\/span><span class=\"nx\">T<\/span><span class=\"o\">&gt;<\/span> <span class=\"p\">})<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n        <span class=\"kd\">const<\/span> <span class=\"na\">response<\/span><span class=\"p\">:<\/span> <span class=\"nx\">AxiosResponse<\/span><span class=\"o\">&lt;<\/span><span class=\"nx\">T<\/span><span class=\"o\">&gt;<\/span> <span class=\"o\">=<\/span> <span class=\"k\">await<\/span> <span class=\"nx\">api<\/span><span class=\"p\">.<\/span><span class=\"nf\">put<\/span><span class=\"p\">(<\/span>\n          <span class=\"s2\">`\/<\/span><span class=\"p\">${<\/span><span class=\"nx\">entity<\/span><span class=\"p\">}<\/span><span class=\"s2\">\/<\/span><span class=\"p\">${<\/span><span class=\"nx\">id<\/span><span class=\"p\">}<\/span><span class=\"s2\">`<\/span><span class=\"p\">,<\/span>\n          <span class=\"nx\">data<\/span>\n        <span class=\"p\">)<\/span>\n        <span class=\"k\">return<\/span> <span class=\"nx\">response<\/span><span class=\"p\">.<\/span><span class=\"nx\">data<\/span>\n      <span class=\"p\">},<\/span>\n      <span class=\"p\">{<\/span>\n        <span class=\"na\">onSuccess<\/span><span class=\"p\">:<\/span> <span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n          <span class=\"nx\">queryClient<\/span><span class=\"p\">.<\/span><span class=\"nf\">invalidateQueries<\/span><span class=\"p\">(<\/span><span class=\"nx\">entity<\/span><span class=\"p\">)<\/span>\n        <span class=\"p\">},<\/span>\n      <span class=\"p\">}<\/span>\n    <span class=\"p\">)<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"c1\">\/\/ Delete (DELETE)<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"nx\">useDelete<\/span> <span class=\"o\">=<\/span> <span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n    <span class=\"kd\">const<\/span> <span class=\"nx\">queryClient<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">useQueryClient<\/span><span class=\"p\">()<\/span>\n\n    <span class=\"k\">return<\/span> <span class=\"nf\">useMutation<\/span><span class=\"p\">(<\/span>\n      <span class=\"k\">async <\/span><span class=\"p\">(<\/span><span class=\"na\">id<\/span><span class=\"p\">:<\/span> <span class=\"kr\">string<\/span> <span class=\"o\">|<\/span> <span class=\"kr\">number<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n        <span class=\"kd\">const<\/span> <span class=\"na\">response<\/span><span class=\"p\">:<\/span> <span class=\"nx\">AxiosResponse<\/span><span class=\"o\">&lt;<\/span><span class=\"k\">void<\/span><span class=\"o\">&gt;<\/span> <span class=\"o\">=<\/span> <span class=\"k\">await<\/span> <span class=\"nx\">api<\/span><span class=\"p\">.<\/span><span class=\"k\">delete<\/span><span class=\"p\">(<\/span>\n          <span class=\"s2\">`\/<\/span><span class=\"p\">${<\/span><span class=\"nx\">entity<\/span><span class=\"p\">}<\/span><span class=\"s2\">\/<\/span><span class=\"p\">${<\/span><span class=\"nx\">id<\/span><span class=\"p\">}<\/span><span class=\"s2\">`<\/span>\n        <span class=\"p\">)<\/span>\n        <span class=\"k\">return<\/span> <span class=\"nx\">response<\/span><span class=\"p\">.<\/span><span class=\"nx\">data<\/span>\n      <span class=\"p\">},<\/span>\n      <span class=\"p\">{<\/span>\n        <span class=\"na\">onSuccess<\/span><span class=\"p\">:<\/span> <span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n          <span class=\"nx\">queryClient<\/span><span class=\"p\">.<\/span><span class=\"nf\">invalidateQueries<\/span><span class=\"p\">(<\/span><span class=\"nx\">entity<\/span><span class=\"p\">)<\/span>\n        <span class=\"p\">},<\/span>\n      <span class=\"p\">}<\/span>\n    <span class=\"p\">)<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"k\">return<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nx\">useFetchAll<\/span><span class=\"p\">,<\/span>\n    <span class=\"nx\">useFetchOne<\/span><span class=\"p\">,<\/span>\n    <span class=\"nx\">useCreate<\/span><span class=\"p\">,<\/span>\n    <span class=\"nx\">useUpdate<\/span><span class=\"p\">,<\/span>\n    <span class=\"nx\">useDelete<\/span>\n  <span class=\"p\">}<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0627\u0637\u0644\u0627\u0639\u0627\u062a \u0628\u06cc\u0634\u062a\u0631 \u062f\u0631 \u0645\u0648\u0631\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0646\u0648\u0639 \u0627\u06cc\u0645\u0646 \u0628\u0627 @tanstack\/react-query \u0631\u0627 \u062f\u0631 \u0645\u0642\u0627\u0644\u0647 query React Retact-Safe \u0628\u062e\u0648\u0627\u0646\u06cc\u062f.<\/p>\n<p>\u0628\u06cc\u0627\u06cc\u06cc\u062f \u0628\u0627 \u062c\u0632\u0626\u06cc\u0627\u062a \u0628\u06cc\u0634\u062a\u0631\u06cc \u0628\u0631\u0631\u0633\u06cc \u06a9\u0646\u06cc\u0645 \u06a9\u0647 \u0686\u0647 \u0686\u06cc\u0632\u06cc \u0631\u0627 \u0642\u0644\u0627\u0628 \u0645\u06cc \u06a9\u0646\u062f <code>createCrudHooks<\/code> \u0639\u0645\u0644\u06a9\u0631\u062f \u0628\u0631\u0645\u06cc \u06af\u0631\u062f\u062f:<\/p>\n<h4><span class=\"ez-toc-section\" id=\"HOOK_USEFETCHALL\"><\/span>\n<p>  HOOK USEFETCHALL<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>\u0627\u06cc\u0646 \u0642\u0644\u0627\u0628 \u0628\u0631\u0627\u06cc \u0628\u0627\u0632\u06cc\u0627\u0628\u06cc \u0644\u06cc\u0633\u062a\u06cc \u0627\u0632 \u0645\u0648\u0627\u0631\u062f \u0628\u0631\u0627\u06cc \u06cc\u06a9 \u0645\u0648\u062c\u0648\u062f \u062e\u0627\u0635 (\u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0645\u062b\u0627\u0644 \u060c \u0644\u06cc\u0633\u062a\u06cc \u0627\u0632 \u06a9\u0627\u0631\u0628\u0631\u0627\u0646) \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u062f\u0631\u06cc\u0627\u0641\u062a \u0645\u06cc \u06a9\u0646\u062f \u0648 \u0627\u0632 \u0627\u06cc\u0646 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u062f <code>useQuery<\/code> \u0642\u0644\u0627\u0628 \u0627\u0632 <code>@tanstack\/react-query<\/code> \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 \u0628\u0631\u0627\u06cc \u0630\u062e\u06cc\u0631\u0647 \u0648 \u0631\u062f\u06cc\u0627\u0628\u06cc \u0648\u0636\u0639\u06cc\u062a \u062f\u0631\u062e\u0648\u0627\u0633\u062a. \u0627\u06cc\u0646 \u0645\u062c\u0645\u0648\u0639\u0647 \u0627\u0632 \u0645\u0648\u0627\u0631\u062f\u06cc \u0631\u0627 \u06a9\u0647 \u0645\u06cc \u062a\u0648\u0627\u0646\u062f \u062f\u0631 \u0647\u0631 \u0645\u0624\u0644\u0641\u0647 React \u0628\u0631\u0627\u06cc \u0627\u0631\u0627\u0626\u0647 \u06cc\u0627 \u062f\u0633\u062a\u06a9\u0627\u0631\u06cc \u0628\u06cc\u0634\u062a\u0631 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0634\u0648\u062f \u060c \u0628\u0631\u0645\u06cc \u06af\u0631\u062f\u0627\u0646\u062f. \u0627\u06cc\u0646 \u062a\u0627\u0628\u0639 \u0631\u0627 \u0645\u06cc \u062a\u0648\u0627\u0646 \u0628\u0631\u0627\u06cc \u062a\u0635\u0648\u06cc\u0628 \u067e\u0627\u0631\u0627\u0645\u062a\u0631\u0647\u0627\u06cc \u067e\u0631\u0633 \u0648 \u062c\u0648 \u0627\u0636\u0627\u0641\u06cc \u060c \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0645\u062b\u0627\u0644 \u060c \u0628\u0631\u0627\u06cc \u0641\u06cc\u0644\u062a\u0631 \u06a9\u0631\u062f\u0646 \u0646\u062a\u0627\u06cc\u062c \u06af\u0633\u062a\u0631\u0634 \u062f\u0627\u062f.<\/p>\n<h4><span class=\"ez-toc-section\" id=\"Hook_UseFetchone\"><\/span>\n<p>  Hook UseFetchone<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>\u0627\u06cc\u0646 \u0642\u0644\u0627\u0628 \u062a\u0648\u0633\u0637 \u0634\u0646\u0627\u0633\u0647 \u062e\u0648\u062f (\u0634\u0646\u0627\u0633\u0647 \u0645\u0646\u062d\u0635\u0631 \u0628\u0647 \u0641\u0631\u062f) \u06cc\u06a9 \u0645\u0648\u0631\u062f \u0648\u0627\u062d\u062f \u0631\u0627 \u0628\u0627\u0632\u06cc\u0627\u0628\u06cc \u0645\u06cc \u06a9\u0646\u062f. \u0647\u0645\u0686\u0646\u06cc\u0646 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u062f <code>useQuery<\/code>\u060c \u0627\u0645\u0627 \u06cc\u06a9 \u0627\u0633\u062a\u062f\u0644\u0627\u0644 \u062f\u0648\u0645 &#8211; \u0634\u0646\u0627\u0633\u0647 \u0645\u0648\u0631\u062f. \u0627\u06cc\u0646 \u0628\u0647 \u0634\u0645\u0627 \u0627\u0645\u06a9\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f \u062f\u0627\u062f\u0647 \u0647\u0627 \u0631\u0627 \u0628\u0631\u0627\u06cc \u06cc\u06a9 \u0645\u0648\u0631\u062f \u062e\u0627\u0635 \u0645\u0648\u062c\u0648\u062f\u06cc \u062f\u0631\u06cc\u0627\u0641\u062a \u06a9\u0646\u06cc\u062f.<\/p>\n<h4><span class=\"ez-toc-section\" id=\"%D9%82%D9%84%D8%A7%D8%A8\"><\/span>\n<p>  \u0642\u0644\u0627\u0628<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>\u0627\u06cc\u0646 \u0642\u0644\u0627\u0628 \u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u0645\u0648\u0627\u0631\u062f \u062c\u062f\u06cc\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u0634\u0648\u062f. \u0627\u06cc\u0646 \u06cc\u06a9 \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u067e\u0633\u062a \u0628\u0647 API \u0635\u0627\u062f\u0631 \u0645\u06cc \u06a9\u0646\u062f \u0648 \u067e\u0633 \u0627\u0632 \u0627\u06cc\u062c\u0627\u062f \u0645\u0648\u0641\u0642\u06cc\u062a \u0622\u0645\u06cc\u0632 \u06cc\u06a9 \u0645\u0648\u0631\u062f \u060c \u062a\u0645\u0627\u0633 \u0645\u06cc \u06af\u06cc\u0631\u062f <code>invalidateQueries<\/code> \u0628\u0631\u0627\u06cc \u062a\u0627\u0632\u0647 \u06a9\u0631\u062f\u0646 \u062d\u0627\u0641\u0638\u0647 \u067e\u0646\u0647\u0627\u0646 \u060c \u0628\u0627\u0631\u06af\u06cc\u0631\u06cc \u0645\u062c\u062f\u062f \u062f\u0627\u062f\u0647 \u0647\u0627 \u062f\u0631 \u0633\u0627\u06cc\u0631 \u0645\u0624\u0644\u0641\u0647 \u0647\u0627\u06cc\u06cc \u06a9\u0647 \u0627\u0632 \u0642\u0644\u0627\u0628 \u0647\u0627\u06cc \u0645\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u0634\u0648\u062f \u060c \u0628\u0627\u0631\u06af\u06cc\u0631\u06cc \u0645\u062c\u062f\u062f \u0645\u06cc \u0634\u0648\u062f.<\/p>\n<h4><span class=\"ez-toc-section\" id=\"HookeUpdate\"><\/span>\n<p>  HookeUpdate<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>\u0627\u0632 \u062f\u0631\u062e\u0648\u0627\u0633\u062a Put \u0628\u0631\u0627\u06cc \u0628\u0647 \u0631\u0648\u0632\u0631\u0633\u0627\u0646\u06cc \u06cc\u06a9 \u0645\u0648\u0631\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u0634\u0648\u062f. \u0642\u0644\u0627\u0628 \u06cc\u06a9 \u0634\u06cc\u0621 \u062d\u0627\u0648\u06cc \u0634\u0646\u0627\u0633\u0647 \u0645\u0648\u0631\u062f \u0648 \u062f\u0627\u062f\u0647 \u0647\u0627 \u0631\u0627 \u0628\u0631\u0627\u06cc \u0628\u0647 \u0631\u0648\u0632\u0631\u0633\u0627\u0646\u06cc \u0645\u06cc \u06af\u06cc\u0631\u062f. \u067e\u0633 \u0627\u0632 \u0628\u0631\u0648\u0632\u0631\u0633\u0627\u0646\u06cc \u0645\u0648\u0641\u0642 \u060c \u062d\u0627\u0641\u0638\u0647 \u0646\u0647\u0627\u0646 \u062f\u0627\u062f\u0647 \u0646\u06cc\u0632 \u062a\u0627\u0632\u0647 \u0645\u06cc \u0634\u0648\u062f.<\/p>\n<h4><span class=\"ez-toc-section\" id=\"%D9%82%D9%84%D8%A7%D8%A8-2\"><\/span>\n<p>  \u0642\u0644\u0627\u0628<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>\u0627\u06cc\u0646 \u0642\u0644\u0627\u0628 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u06cc\u06a9 \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u062d\u0630\u0641 \u060c \u06cc\u06a9 \u0645\u0648\u0631\u062f \u0631\u0627 \u062a\u0648\u0633\u0637 \u0634\u0646\u0627\u0633\u0647 \u062e\u0648\u062f \u062d\u0630\u0641 \u0645\u06cc \u06a9\u0646\u062f \u0648 \u067e\u0633 \u0627\u0632 \u062d\u0630\u0641 \u060c \u062d\u0627\u0641\u0638\u0647 \u067e\u0646\u0647\u0627\u0646 \u062f\u0627\u062f\u0647 \u0631\u0627 \u0628\u0647 \u0631\u0648\u0632 \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%D9%85%D8%B1%D8%AD%D9%84%D9%87_3_%D8%AA%D8%B3%D8%AA_%D9%87%D8%A7\"><\/span>\n<p>  \u0645\u0631\u062d\u0644\u0647 3: \u062a\u0633\u062a \u0647\u0627<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0628\u06cc\u0627\u06cc\u06cc\u062f \u062a\u0633\u062a \u0647\u0627 \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u0645 \u062a\u0627 \u0627\u0637\u0645\u06cc\u0646\u0627\u0646 \u062d\u0627\u0635\u0644 \u0634\u0648\u062f \u06a9\u0647 \u06a9\u062f \u0645\u0627 \u0628\u0647 \u062f\u0631\u0633\u062a\u06cc \u0648 \u0628\u062f\u0648\u0646 \u062e\u0637\u0627 \u06a9\u0627\u0631 \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<p>\u0627\u0628\u062a\u062f\u0627 \u0645\u062d\u06cc\u0637 \u0622\u0632\u0645\u0627\u06cc\u0634 \u0631\u0627 \u0628\u0627 \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 \u0647\u0627\u06cc \u0632\u06cc\u0631 \u062a\u0646\u0638\u06cc\u0645 \u06a9\u0646\u06cc\u062f:<\/p>\n<ul>\n<li>\n<code>@testing-library\/react<\/code>  &#8211; \u0628\u0631\u0627\u06cc \u0622\u0632\u0645\u0627\u06cc\u0634 \u0627\u062c\u0632\u0627\u06cc React.<\/li>\n<li>\n<code>@testing-library\/jest-dom<\/code>  &#8211; \u062a\u0637\u0627\u0628\u0642 \u0627\u0636\u0627\u0641\u06cc \u0631\u0627 \u0628\u0631\u0627\u06cc \u0627\u062f\u0639\u0627\u0647\u0627 \u0641\u0631\u0627\u0647\u0645 \u0645\u06cc \u06a9\u0646\u062f (\u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0645\u062b\u0627\u0644 \u060c <code>toBeInTheDocument<\/code>).<\/li>\n<li>\n<code>vitest<\/code>  &#8211; \u06cc\u06a9 \u062f\u0648\u0646\u062f\u0647 \u0622\u0632\u0645\u0648\u0646 \u0648 \u0686\u0627\u0631\u0686\u0648\u0628\u06cc \u0628\u0631\u0627\u06cc \u0646\u0648\u0634\u062a\u0646 \u062a\u0633\u062a.<\/li>\n<li>\n<code>axios-mock-adapter<\/code>  &#8211; \u0628\u0631\u0627\u06cc \u062a\u0645\u0633\u062e\u0631 \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u0647\u0627 \u0627\u0632 \u0637\u0631\u06cc\u0642 Axios.\n<\/li>\n<\/ul>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight console\"><code><span class=\"go\">npm i @testing-library\/react @testing-library\/jest-dom vitest axios-mock-adapter -D\n<\/span><\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0628\u0631\u0627\u06cc \u0627\u062c\u0631\u0627\u06cc \u062a\u0633\u062a \u0647\u0627 \u060c \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0632\u06cc\u0631 \u0631\u0627 \u0628\u0647 \u0622\u0646 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f <code>package.json<\/code>:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight json\"><code><span class=\"nl\">\"scripts\"<\/span><span class=\"p\">:<\/span><span class=\"w\"> <\/span><span class=\"p\">{<\/span><span class=\"w\">\n  <\/span><span class=\"nl\">\"test\"<\/span><span class=\"p\">:<\/span><span class=\"w\"> <\/span><span class=\"s2\">\"vitest\"<\/span><span class=\"w\">\n<\/span><span class=\"p\">}<\/span><span class=\"w\">\n<\/span><\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0627\u06a9\u0646\u0648\u0646 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u062a\u0633\u062a \u0647\u0627 \u0631\u0627 \u0627\u062c\u0631\u0627 \u06a9\u0646\u06cc\u062f:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight console\"><code><span class=\"go\">npm run test\n<\/span><\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0628\u0631\u0627\u06cc \u0645\u062b\u0627\u0644 \u0628\u06cc\u0627\u06cc\u06cc\u062f \u06cc\u06a9 \u0641\u0627\u06cc\u0644 \u0622\u0632\u0645\u0627\u06cc\u0634 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u0645 <code>crudHooks.test.tsx<\/code>:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight typescript\"><code><span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">QueryClient<\/span><span class=\"p\">,<\/span> <span class=\"nx\">QueryClientProvider<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">react-query<\/span><span class=\"dl\">'<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">act<\/span><span class=\"p\">,<\/span> <span class=\"nx\">renderHook<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">@testing-library\/react<\/span><span class=\"dl\">'<\/span>\n<span class=\"k\">import<\/span> <span class=\"nx\">axios<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">axios<\/span><span class=\"dl\">'<\/span>\n<span class=\"k\">import<\/span> <span class=\"nx\">MockAdapter<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">axios-mock-adapter<\/span><span class=\"dl\">'<\/span>\n<span class=\"c1\">\/\/ Your hooks<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">createCrudHooks<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">.\/crudHooks<\/span><span class=\"dl\">'<\/span>\n\n<span class=\"kd\">const<\/span> <span class=\"nx\">mock<\/span> <span class=\"o\">=<\/span> <span class=\"k\">new<\/span> <span class=\"nc\">MockAdapter<\/span><span class=\"p\">(<\/span><span class=\"nx\">axios<\/span><span class=\"p\">)<\/span>\n\n<span class=\"kd\">const<\/span> <span class=\"nx\">createTestQueryClient<\/span> <span class=\"o\">=<\/span> <span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n  <span class=\"k\">return<\/span> <span class=\"k\">new<\/span> <span class=\"nc\">QueryClient<\/span><span class=\"p\">({<\/span>\n    <span class=\"na\">defaultOptions<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\n      <span class=\"na\">queries<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\n        <span class=\"na\">retry<\/span><span class=\"p\">:<\/span> <span class=\"kc\">false<\/span><span class=\"p\">,<\/span>\n      <span class=\"p\">},<\/span>\n    <span class=\"p\">},<\/span>\n  <span class=\"p\">})<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"kd\">const<\/span> <span class=\"nx\">wrapper<\/span> <span class=\"o\">=<\/span> <span class=\"p\">({<\/span> <span class=\"nx\">children<\/span> <span class=\"p\">}:<\/span> <span class=\"p\">{<\/span> <span class=\"nl\">children<\/span><span class=\"p\">:<\/span> <span class=\"nx\">React<\/span><span class=\"p\">.<\/span><span class=\"nx\">ReactNode<\/span> <span class=\"p\">})<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"nx\">queryClient<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">createTestQueryClient<\/span><span class=\"p\">()<\/span>\n  <span class=\"k\">return <\/span><span class=\"p\">(<\/span>\n    <span class=\"o\">&lt;<\/span><span class=\"nx\">QueryClientProvider<\/span> <span class=\"nx\">client<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">queryClient<\/span><span class=\"p\">}<\/span><span class=\"o\">&gt;<\/span><span class=\"p\">{<\/span><span class=\"nx\">children<\/span><span class=\"p\">}<\/span><span class=\"o\">&lt;<\/span><span class=\"sr\">\/QueryClientProvider<\/span><span class=\"err\">&gt;\n<\/span>  <span class=\"p\">)<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"kr\">interface<\/span> <span class=\"nx\">User<\/span> <span class=\"p\">{<\/span>\n  <span class=\"nl\">id<\/span><span class=\"p\">:<\/span> <span class=\"kr\">number<\/span>\n  <span class=\"nx\">name<\/span><span class=\"p\">:<\/span> <span class=\"kr\">string<\/span>\n  <span class=\"nx\">email<\/span><span class=\"p\">:<\/span> <span class=\"kr\">string<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"c1\">\/\/ Create hooks for user entity<\/span>\n<span class=\"kd\">const<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">useFetchAll<\/span><span class=\"p\">,<\/span> <span class=\"nx\">useFetchOne<\/span><span class=\"p\">,<\/span> <span class=\"nx\">useCreate<\/span><span class=\"p\">,<\/span> <span class=\"nx\">useUpdate<\/span><span class=\"p\">,<\/span> <span class=\"nx\">useDelete<\/span> <span class=\"p\">}<\/span> <span class=\"o\">=<\/span>\n  <span class=\"nx\">createCrudHooks<\/span><span class=\"o\">&lt;<\/span><span class=\"nx\">User<\/span><span class=\"o\">&gt;<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">https:\/\/api.example.io<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">users<\/span><span class=\"dl\">'<\/span><span class=\"p\">)<\/span>\n\n<span class=\"nf\">beforeEach<\/span><span class=\"p\">(()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n  <span class=\"nx\">mock<\/span><span class=\"p\">.<\/span><span class=\"nf\">reset<\/span><span class=\"p\">()<\/span>\n<span class=\"p\">})<\/span>\n\n<span class=\"nf\">describe<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">CRUD Hooks<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n  <span class=\"nf\">it<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">should fetch all users successfully<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"k\">async <\/span><span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n    <span class=\"kd\">const<\/span> <span class=\"nx\">mockData<\/span> <span class=\"o\">=<\/span> <span class=\"p\">[<\/span>\n      <span class=\"p\">{<\/span> <span class=\"na\">id<\/span><span class=\"p\">:<\/span> <span class=\"mi\">1<\/span><span class=\"p\">,<\/span> <span class=\"na\">name<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">Ivan Green<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"na\">email<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">ivan@example.io<\/span><span class=\"dl\">'<\/span> <span class=\"p\">},<\/span>\n      <span class=\"p\">{<\/span> <span class=\"na\">id<\/span><span class=\"p\">:<\/span> <span class=\"mi\">2<\/span><span class=\"p\">,<\/span> <span class=\"na\">name<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">Inna Green<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"na\">email<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">inna@example.io<\/span><span class=\"dl\">'<\/span> <span class=\"p\">},<\/span>\n    <span class=\"p\">]<\/span>\n\n    <span class=\"nx\">mock<\/span><span class=\"p\">.<\/span><span class=\"nf\">onGet<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">\/users<\/span><span class=\"dl\">'<\/span><span class=\"p\">).<\/span><span class=\"nf\">reply<\/span><span class=\"p\">(<\/span><span class=\"mi\">200<\/span><span class=\"p\">,<\/span> <span class=\"nx\">mockData<\/span><span class=\"p\">)<\/span>\n\n    <span class=\"kd\">const<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">result<\/span><span class=\"p\">,<\/span> <span class=\"nx\">waitFor<\/span> <span class=\"p\">}<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">renderHook<\/span><span class=\"p\">(()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nf\">useFetchAll<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">users<\/span><span class=\"dl\">'<\/span><span class=\"p\">),<\/span> <span class=\"p\">{<\/span>\n      <span class=\"nx\">wrapper<\/span><span class=\"p\">,<\/span>\n    <span class=\"p\">})<\/span>\n\n    <span class=\"k\">await<\/span> <span class=\"nf\">waitFor<\/span><span class=\"p\">(()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nx\">result<\/span><span class=\"p\">.<\/span><span class=\"nx\">current<\/span><span class=\"p\">.<\/span><span class=\"nx\">isSuccess<\/span><span class=\"p\">)<\/span>\n\n    <span class=\"nf\">expect<\/span><span class=\"p\">(<\/span><span class=\"nx\">result<\/span><span class=\"p\">.<\/span><span class=\"nx\">current<\/span><span class=\"p\">.<\/span><span class=\"nx\">data<\/span><span class=\"p\">).<\/span><span class=\"nf\">toEqual<\/span><span class=\"p\">(<\/span><span class=\"nx\">mockData<\/span><span class=\"p\">)<\/span>\n  <span class=\"p\">})<\/span>\n\n  <span class=\"nf\">it<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">should fetch one user by ID<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"k\">async <\/span><span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n    <span class=\"kd\">const<\/span> <span class=\"nx\">mockUser<\/span> <span class=\"o\">=<\/span> <span class=\"p\">{<\/span> <span class=\"na\">id<\/span><span class=\"p\">:<\/span> <span class=\"mi\">1<\/span><span class=\"p\">,<\/span> <span class=\"na\">name<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">Ivan Green<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"na\">email<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">ivan@example.io<\/span><span class=\"dl\">'<\/span> <span class=\"p\">}<\/span>\n\n    <span class=\"nx\">mock<\/span><span class=\"p\">.<\/span><span class=\"nf\">onGet<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">\/users\/1<\/span><span class=\"dl\">'<\/span><span class=\"p\">).<\/span><span class=\"nf\">reply<\/span><span class=\"p\">(<\/span><span class=\"mi\">200<\/span><span class=\"p\">,<\/span> <span class=\"nx\">mockUser<\/span><span class=\"p\">)<\/span>\n\n    <span class=\"kd\">const<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">result<\/span><span class=\"p\">,<\/span> <span class=\"nx\">waitFor<\/span> <span class=\"p\">}<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">renderHook<\/span><span class=\"p\">(()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nf\">useFetchOne<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">users<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"mi\">1<\/span><span class=\"p\">),<\/span> <span class=\"p\">{<\/span>\n      <span class=\"nx\">wrapper<\/span><span class=\"p\">,<\/span>\n    <span class=\"p\">})<\/span>\n\n    <span class=\"k\">await<\/span> <span class=\"nf\">waitFor<\/span><span class=\"p\">(()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nx\">result<\/span><span class=\"p\">.<\/span><span class=\"nx\">current<\/span><span class=\"p\">.<\/span><span class=\"nx\">isSuccess<\/span><span class=\"p\">)<\/span>\n\n    <span class=\"nf\">expect<\/span><span class=\"p\">(<\/span><span class=\"nx\">result<\/span><span class=\"p\">.<\/span><span class=\"nx\">current<\/span><span class=\"p\">.<\/span><span class=\"nx\">data<\/span><span class=\"p\">).<\/span><span class=\"nf\">toEqual<\/span><span class=\"p\">(<\/span><span class=\"nx\">mockUser<\/span><span class=\"p\">)<\/span>\n  <span class=\"p\">})<\/span>\n\n  <span class=\"nf\">it<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">should create a new user<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"k\">async <\/span><span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n    <span class=\"kd\">const<\/span> <span class=\"nx\">newUser<\/span> <span class=\"o\">=<\/span> <span class=\"p\">{<\/span> <span class=\"na\">id<\/span><span class=\"p\">:<\/span> <span class=\"mi\">3<\/span><span class=\"p\">,<\/span> <span class=\"na\">name<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">Sam Smith<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"na\">email<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">sam@example.io<\/span><span class=\"dl\">'<\/span> <span class=\"p\">}<\/span>\n\n    <span class=\"nx\">mock<\/span><span class=\"p\">.<\/span><span class=\"nf\">onPost<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">\/users<\/span><span class=\"dl\">'<\/span><span class=\"p\">).<\/span><span class=\"nf\">reply<\/span><span class=\"p\">(<\/span><span class=\"mi\">201<\/span><span class=\"p\">,<\/span> <span class=\"nx\">newUser<\/span><span class=\"p\">)<\/span>\n\n    <span class=\"kd\">const<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">result<\/span><span class=\"p\">,<\/span> <span class=\"nx\">waitFor<\/span> <span class=\"p\">}<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">renderHook<\/span><span class=\"p\">(()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nf\">useCreate<\/span><span class=\"p\">(),<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">wrapper<\/span> <span class=\"p\">})<\/span>\n\n    <span class=\"nf\">act<\/span><span class=\"p\">(()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n      <span class=\"nx\">result<\/span><span class=\"p\">.<\/span><span class=\"nx\">current<\/span><span class=\"p\">.<\/span><span class=\"nf\">mutate<\/span><span class=\"p\">({<\/span> <span class=\"na\">name<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">Sam Smith<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"na\">email<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">sam@example.io<\/span><span class=\"dl\">'<\/span> <span class=\"p\">})<\/span>\n    <span class=\"p\">})<\/span>\n\n    <span class=\"k\">await<\/span> <span class=\"nf\">waitFor<\/span><span class=\"p\">(()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nx\">result<\/span><span class=\"p\">.<\/span><span class=\"nx\">current<\/span><span class=\"p\">.<\/span><span class=\"nx\">isSuccess<\/span><span class=\"p\">)<\/span>\n\n    <span class=\"nf\">expect<\/span><span class=\"p\">(<\/span><span class=\"nx\">result<\/span><span class=\"p\">.<\/span><span class=\"nx\">current<\/span><span class=\"p\">.<\/span><span class=\"nx\">data<\/span><span class=\"p\">).<\/span><span class=\"nf\">toEqual<\/span><span class=\"p\">(<\/span><span class=\"nx\">newUser<\/span><span class=\"p\">)<\/span>\n  <span class=\"p\">})<\/span>\n\n  <span class=\"nf\">it<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">should update a user<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"k\">async <\/span><span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n    <span class=\"kd\">const<\/span> <span class=\"nx\">updatedUser<\/span> <span class=\"o\">=<\/span> <span class=\"p\">{<\/span>\n      <span class=\"na\">id<\/span><span class=\"p\">:<\/span> <span class=\"mi\">1<\/span><span class=\"p\">,<\/span>\n      <span class=\"na\">name<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">Ivan Updated<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n      <span class=\"na\">email<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">ivan.updated@example.io<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n    <span class=\"p\">}<\/span>\n\n    <span class=\"nx\">mock<\/span><span class=\"p\">.<\/span><span class=\"nf\">onPut<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">\/users\/1<\/span><span class=\"dl\">'<\/span><span class=\"p\">).<\/span><span class=\"nf\">reply<\/span><span class=\"p\">(<\/span><span class=\"mi\">200<\/span><span class=\"p\">,<\/span> <span class=\"nx\">updatedUser<\/span><span class=\"p\">)<\/span>\n\n    <span class=\"kd\">const<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">result<\/span><span class=\"p\">,<\/span> <span class=\"nx\">waitFor<\/span> <span class=\"p\">}<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">renderHook<\/span><span class=\"p\">(()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nf\">useUpdate<\/span><span class=\"p\">(),<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">wrapper<\/span> <span class=\"p\">})<\/span>\n\n    <span class=\"nf\">act<\/span><span class=\"p\">(()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n      <span class=\"nx\">result<\/span><span class=\"p\">.<\/span><span class=\"nx\">current<\/span><span class=\"p\">.<\/span><span class=\"nf\">mutate<\/span><span class=\"p\">({<\/span>\n        <span class=\"na\">id<\/span><span class=\"p\">:<\/span> <span class=\"mi\">1<\/span><span class=\"p\">,<\/span>\n        <span class=\"na\">data<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span> <span class=\"na\">name<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">Ivan Updated<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"na\">email<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">Ivan.updated@example.io<\/span><span class=\"dl\">'<\/span> <span class=\"p\">},<\/span>\n      <span class=\"p\">})<\/span>\n    <span class=\"p\">})<\/span>\n\n    <span class=\"k\">await<\/span> <span class=\"nf\">waitFor<\/span><span class=\"p\">(()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nx\">result<\/span><span class=\"p\">.<\/span><span class=\"nx\">current<\/span><span class=\"p\">.<\/span><span class=\"nx\">isSuccess<\/span><span class=\"p\">)<\/span>\n\n    <span class=\"nf\">expect<\/span><span class=\"p\">(<\/span><span class=\"nx\">result<\/span><span class=\"p\">.<\/span><span class=\"nx\">current<\/span><span class=\"p\">.<\/span><span class=\"nx\">data<\/span><span class=\"p\">).<\/span><span class=\"nf\">toEqual<\/span><span class=\"p\">(<\/span><span class=\"nx\">updatedUser<\/span><span class=\"p\">)<\/span>\n  <span class=\"p\">})<\/span>\n\n  <span class=\"nf\">it<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">should delete a user<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"k\">async <\/span><span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nx\">mock<\/span><span class=\"p\">.<\/span><span class=\"nf\">onDelete<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">\/users\/1<\/span><span class=\"dl\">'<\/span><span class=\"p\">).<\/span><span class=\"nf\">reply<\/span><span class=\"p\">(<\/span><span class=\"mi\">200<\/span><span class=\"p\">)<\/span>\n\n    <span class=\"kd\">const<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">result<\/span><span class=\"p\">,<\/span> <span class=\"nx\">waitFor<\/span> <span class=\"p\">}<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">renderHook<\/span><span class=\"p\">(()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nf\">useDelete<\/span><span class=\"p\">(),<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">wrapper<\/span> <span class=\"p\">})<\/span>\n\n    <span class=\"nf\">act<\/span><span class=\"p\">(()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n      <span class=\"nx\">result<\/span><span class=\"p\">.<\/span><span class=\"nx\">current<\/span><span class=\"p\">.<\/span><span class=\"nf\">mutate<\/span><span class=\"p\">(<\/span><span class=\"mi\">1<\/span><span class=\"p\">)<\/span>\n    <span class=\"p\">})<\/span>\n\n    <span class=\"k\">await<\/span> <span class=\"nf\">waitFor<\/span><span class=\"p\">(()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nx\">result<\/span><span class=\"p\">.<\/span><span class=\"nx\">current<\/span><span class=\"p\">.<\/span><span class=\"nx\">isSuccess<\/span><span class=\"p\">)<\/span>\n\n    <span class=\"nf\">expect<\/span><span class=\"p\">(<\/span><span class=\"nx\">result<\/span><span class=\"p\">.<\/span><span class=\"nx\">current<\/span><span class=\"p\">.<\/span><span class=\"nx\">isSuccess<\/span><span class=\"p\">).<\/span><span class=\"nf\">toBe<\/span><span class=\"p\">(<\/span><span class=\"kc\">true<\/span><span class=\"p\">)<\/span>\n  <span class=\"p\">})<\/span>\n<span class=\"p\">})<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0645\u0627 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0645\u062c\u0645\u0648\u0639\u0647 \u0642\u0644\u0627\u0628 Crud \u062e\u0648\u062f \u062a\u0633\u062a \u0647\u0627\u06cc\u06cc \u0627\u06cc\u062c\u0627\u062f \u06a9\u0631\u062f\u0647 \u0627\u06cc\u0645 <code>react-testing-library<\/code>\u0628\u0627 <code>axios-mock-adapter<\/code>\u0648\u062a <code>vitest<\/code>\u0628\u0634\u0631 \u0627\u06cc\u0646 \u0628\u0627\u0639\u062b \u0645\u06cc \u0634\u0648\u062f \u06a9\u062f \u0645\u0627 \u0642\u0627\u0628\u0644 \u0627\u0639\u062a\u0645\u0627\u062f \u0648 \u0628\u0647 \u062e\u0648\u0628\u06cc \u0622\u0632\u0645\u0627\u06cc\u0634 \u0634\u062f\u0647 \u0628\u0627\u0634\u062f \u060c \u06a9\u0647 \u0628\u0631\u0627\u06cc \u062a\u0648\u0633\u0639\u0647 \u0628\u0631\u0646\u0627\u0645\u0647 \u0647\u0627\u06cc \u0645\u0642\u06cc\u0627\u0633 \u067e\u0630\u06cc\u0631 \u0648 \u0642\u0627\u0628\u0644 \u0646\u06af\u0647\u062f\u0627\u0631\u06cc \u0645\u0647\u0645 \u0627\u0633\u062a. \u0622\u0632\u0645\u0627\u06cc\u0634 \u0639\u0645\u0644\u06cc\u0627\u062a \u0646\u0627\u0647\u0645\u0632\u0645\u0627\u0646 \u0628\u0647 \u0644\u0637\u0641 \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u062a\u0645\u0633\u062e\u0631 \u0648 \u0627\u0628\u0632\u0627\u0631\u06cc \u0628\u0631\u0627\u06cc \u06a9\u0627\u0631 \u0628\u0627 \u0642\u0644\u0627\u0628 \u0628\u0633\u06cc\u0627\u0631 \u0633\u0627\u062f\u0647 \u062a\u0631 \u0645\u06cc \u0634\u0648\u062f.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"%D8%A7%D8%B3%D8%AA%D9%81%D8%A7%D8%AF%D9%87_%D8%A7%D8%B2_%D9%85%D8%AB%D8%A7%D9%84_%D8%AF%D8%B1_%DB%8C%DA%A9_%D9%85%D8%A4%D9%84%D9%81%D9%87_React\"><\/span>\n<p>  \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0645\u062b\u0627\u0644 \u062f\u0631 \u06cc\u06a9 \u0645\u0624\u0644\u0641\u0647 React<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0627\u06a9\u0646\u0648\u0646 \u06a9\u0647 \u0642\u0644\u0627\u0628 \u0647\u0627\u06cc \u062c\u0647\u0627\u0646\u06cc \u0631\u0627 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0631\u062f\u0647 \u0627\u06cc\u0645 \u060c \u0628\u06cc\u0627\u06cc\u06cc\u062f \u0628\u0628\u06cc\u0646\u06cc\u0645 \u0686\u06af\u0648\u0646\u0647 \u0627\u0632 \u0622\u0646\u0647\u0627 \u062f\u0631 \u06cc\u06a9 \u0645\u0624\u0644\u0641\u0647 \u0648\u0627\u0642\u0639\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u0645:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight tsx\"><code><span class=\"kr\">interface<\/span> <span class=\"nx\">User<\/span> <span class=\"p\">{<\/span>\n  <span class=\"nl\">id<\/span><span class=\"p\">:<\/span> <span class=\"kr\">number<\/span>\n  <span class=\"nx\">name<\/span><span class=\"p\">:<\/span> <span class=\"kr\">string<\/span>\n  <span class=\"nx\">email<\/span><span class=\"p\">:<\/span> <span class=\"kr\">string<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"c1\">\/\/ Can be moved to a separate file for reuse<\/span>\n<span class=\"kd\">const<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">useFetchAll<\/span><span class=\"p\">,<\/span> <span class=\"nx\">useCreate<\/span><span class=\"p\">,<\/span> <span class=\"nx\">useUpdate<\/span><span class=\"p\">,<\/span> <span class=\"nx\">useDelete<\/span> <span class=\"p\">}<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">createCrudHooks<\/span><span class=\"o\">&lt;<\/span><span class=\"nx\">User<\/span><span class=\"o\">&gt;<\/span><span class=\"p\">(<\/span>\n  <span class=\"dl\">'<\/span><span class=\"s1\">https:\/\/api.example.io<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n  <span class=\"dl\">'<\/span><span class=\"s1\">users<\/span><span class=\"dl\">'<\/span>\n<span class=\"p\">)<\/span>\n\n<span class=\"kd\">type<\/span> <span class=\"nx\">UserProps<\/span> <span class=\"o\">=<\/span> <span class=\"p\">{<\/span>\n  <span class=\"na\">user<\/span><span class=\"p\">:<\/span> <span class=\"nx\">User<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"kd\">const<\/span> <span class=\"nx\">UserItem<\/span> <span class=\"o\">=<\/span> <span class=\"p\">({<\/span> <span class=\"nx\">user<\/span> <span class=\"p\">}:<\/span> <span class=\"nx\">UserProps<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"p\">{<\/span> <span class=\"na\">mutate<\/span><span class=\"p\">:<\/span> <span class=\"nx\">updateUser<\/span> <span class=\"p\">}<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">useUpdate<\/span><span class=\"p\">()<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"p\">{<\/span> <span class=\"na\">mutate<\/span><span class=\"p\">:<\/span> <span class=\"nx\">deleteUser<\/span> <span class=\"p\">}<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">useDelete<\/span><span class=\"p\">()<\/span>\n\n  <span class=\"kd\">const<\/span> <span class=\"nx\">handleUpdate<\/span> <span class=\"o\">=<\/span> <span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nf\">updateUser<\/span><span class=\"p\">({<\/span> <span class=\"na\">id<\/span><span class=\"p\">:<\/span> <span class=\"nx\">user<\/span><span class=\"p\">.<\/span><span class=\"nx\">id<\/span><span class=\"p\">,<\/span> <span class=\"na\">data<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span> <span class=\"na\">name<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">Ivan<\/span><span class=\"dl\">'<\/span> <span class=\"p\">}<\/span> <span class=\"p\">})<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"kd\">const<\/span> <span class=\"nx\">handleDelete<\/span> <span class=\"o\">=<\/span> <span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nf\">deleteUser<\/span><span class=\"p\">(<\/span><span class=\"nx\">user<\/span><span class=\"p\">.<\/span><span class=\"nx\">id<\/span><span class=\"p\">)<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"k\">return <\/span><span class=\"p\">(<\/span>\n    <span class=\"p\">&lt;<\/span><span class=\"nt\">li<\/span> <span class=\"na\">key<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"nx\">user<\/span><span class=\"p\">.<\/span><span class=\"nx\">id<\/span><span class=\"si\">}<\/span><span class=\"p\">&gt;<\/span>\n      <span class=\"si\">{<\/span><span class=\"nx\">user<\/span><span class=\"p\">.<\/span><span class=\"nx\">name<\/span><span class=\"si\">}<\/span> - <span class=\"si\">{<\/span><span class=\"nx\">user<\/span><span class=\"p\">.<\/span><span class=\"nx\">email<\/span><span class=\"si\">}<\/span>\n      <span class=\"p\">&lt;<\/span><span class=\"nt\">button<\/span> <span class=\"na\">onClick<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"nx\">handleUpdate<\/span><span class=\"si\">}<\/span><span class=\"p\">&gt;<\/span>Update name<span class=\"p\"\/><span class=\"nt\">button<\/span><span class=\"p\">&gt;<\/span>\n      <span class=\"p\">&lt;<\/span><span class=\"nt\">button<\/span> <span class=\"na\">onClick<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"nx\">handleDelete<\/span><span class=\"si\">}<\/span><span class=\"p\">&gt;<\/span>Delete<span class=\"p\"\/><span class=\"nt\">button<\/span><span class=\"p\">&gt;<\/span>\n    <span class=\"p\"\/><span class=\"nt\">li<\/span><span class=\"p\">&gt;<\/span>\n  <span class=\"p\">)<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"k\">export<\/span> <span class=\"kd\">const<\/span> <span class=\"nx\">Users<\/span> <span class=\"o\">=<\/span> <span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"p\">{<\/span> <span class=\"na\">data<\/span><span class=\"p\">:<\/span> <span class=\"nx\">users<\/span><span class=\"p\">,<\/span> <span class=\"nx\">isLoading<\/span> <span class=\"p\">}<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">useFetchAll<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">users<\/span><span class=\"dl\">'<\/span><span class=\"p\">)<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"p\">{<\/span> <span class=\"na\">mutate<\/span><span class=\"p\">:<\/span> <span class=\"nx\">createUser<\/span> <span class=\"p\">}<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">useCreate<\/span><span class=\"p\">()<\/span>\n\n  <span class=\"kd\">const<\/span> <span class=\"nx\">handleCreateUser<\/span> <span class=\"o\">=<\/span> <span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nf\">createUser<\/span><span class=\"p\">({<\/span> <span class=\"na\">name<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">Darya<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"na\">email<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">darya@example.io<\/span><span class=\"dl\">'<\/span> <span class=\"p\">})<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"nx\">isLoading<\/span><span class=\"p\">)<\/span> <span class=\"k\">return<\/span> <span class=\"p\">&lt;<\/span><span class=\"nt\">div<\/span><span class=\"p\">&gt;<\/span>Loading users...<span class=\"p\"\/><span class=\"nt\">div<\/span><span class=\"p\">&gt;<\/span>\n\n  <span class=\"k\">return <\/span><span class=\"p\">(<\/span>\n    <span class=\"p\">&lt;<\/span><span class=\"nt\">div<\/span><span class=\"p\">&gt;<\/span>\n      <span class=\"p\">&lt;<\/span><span class=\"nt\">h1<\/span><span class=\"p\">&gt;<\/span>Users<span class=\"p\"\/><span class=\"nt\">h1<\/span><span class=\"p\">&gt;<\/span>\n      <span class=\"p\">&lt;<\/span><span class=\"nt\">ul<\/span><span class=\"p\">&gt;<\/span>\n        <span class=\"si\">{<\/span><span class=\"nx\">users<\/span><span class=\"p\">?.<\/span><span class=\"nf\">map<\/span><span class=\"p\">((<\/span><span class=\"nx\">user<\/span><span class=\"p\">:<\/span> <span class=\"nx\">User<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">(<\/span>\n          <span class=\"p\">&lt;<\/span><span class=\"nc\">UserItem<\/span> <span class=\"na\">key<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"nx\">user<\/span><span class=\"p\">.<\/span><span class=\"nx\">id<\/span><span class=\"si\">}<\/span> <span class=\"na\">user<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"nx\">user<\/span><span class=\"si\">}<\/span> <span class=\"p\">\/&gt;<\/span>\n        <span class=\"p\">))<\/span><span class=\"si\">}<\/span>\n      <span class=\"p\"\/><span class=\"nt\">ul<\/span><span class=\"p\">&gt;<\/span>\n      <span class=\"p\">&lt;<\/span><span class=\"nt\">button<\/span> <span class=\"na\">onClick<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"nx\">handleCreateUser<\/span><span class=\"si\">}<\/span><span class=\"p\">&gt;<\/span>Create user<span class=\"p\"\/><span class=\"nt\">button<\/span><span class=\"p\">&gt;<\/span>\n    <span class=\"p\"\/><span class=\"nt\">div<\/span><span class=\"p\">&gt;<\/span>\n  <span class=\"p\">)<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<h2><span class=\"ez-toc-section\" id=\"%D8%A7%DB%8C%D9%86_%D8%B1%D9%88%DB%8C%DA%A9%D8%B1%D8%AF_%DA%86%D9%87_%D9%85%D8%B4%DA%A9%D9%84%DB%8C_%D8%AF%D8%A7%D8%B1%D8%AF%D8%9F\"><\/span>\n<p>  \u0627\u06cc\u0646 \u0631\u0648\u06cc\u06a9\u0631\u062f \u0686\u0647 \u0645\u0634\u06a9\u0644\u06cc \u062f\u0627\u0631\u062f\u061f<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0647\u0646\u06af\u0627\u0645 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0628\u0633\u062a\u0647 \u0628\u0646\u062f\u06cc \u0647\u0627 \u0628\u0631\u0627\u06cc \u0642\u0644\u0627\u0628 \u060c \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0628\u0627 \u0634\u0645\u0627\u0631\u0647 \u0647\u0627\u06cc \u062a\u0627\u06cc\u067e \u0647\u0645\u0627\u0646\u0637\u0648\u0631 \u06a9\u0647 \u062f\u0631 \u0627\u06cc\u0646 \u0628\u062d\u062b GitHub \u062a\u0648\u0636\u06cc\u062d \u062f\u0627\u062f\u0647 \u0634\u062f\u0647 \u0627\u0633\u062a \u060c \u0631\u0648\u0628\u0631\u0648 \u0634\u0648\u06cc\u062f. \u06cc\u06a9\u06cc \u0627\u0632 \u06af\u0632\u06cc\u0646\u0647 \u0647\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u06a9\u0627\u0631\u062e\u0627\u0646\u0647 \u0647\u0627\u06cc \u067e\u0631\u0633 \u0648 \u062c\u0648 \u0627\u0633\u062a \u06a9\u0647 \u062f\u0631 \u0627\u062f\u0627\u0645\u0647 \u062f\u0631 \u0646\u0638\u0631 \u062e\u0648\u0627\u0647\u06cc\u0645 \u06af\u0631\u0641\u062a. \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u06a9\u0627\u0631\u062e\u0627\u0646\u0647 \u062e\u0648\u062f \u0631\u0627 \u0628\u0646\u0648\u06cc\u0633\u06cc\u062f \u06cc\u0627 \u0627\u0632 \u06a9\u0627\u0631\u062e\u0627\u0646\u0647 \u06a9\u0644\u06cc\u062f Query Query \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"%D9%86%D9%85%D9%88%D9%86%D9%87_%D8%A7%DB%8C_%D8%A7%D8%B2_%D8%A7%D8%B3%D8%AA%D9%81%D8%A7%D8%AF%D9%87_%D8%A7%D8%B2_%DB%8C%DA%A9_%DA%A9%D8%A7%D8%B1%D8%AE%D8%A7%D9%86%D9%87_%D9%BE%D8%B1%D8%B3_%D9%88_%D8%AC%D9%88_%D8%AF%D8%B1_%DB%8C%DA%A9_%D8%A8%D8%B1%D9%86%D8%A7%D9%85%D9%87_%D8%B3%D8%A7%D8%AE%D8%AA%D9%87_%D8%B4%D8%AF%D9%87_%D8%A8%D8%B1_%D8%B1%D9%88%DB%8C_%D8%A7%D8%B5%D9%88%D9%84_%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C_%D8%AF%D8%A7%D8%B1%D8%A7%DB%8C_%D9%88%DB%8C%DA%98%DA%AF%DB%8C_FSD\"><\/span>\n<p>  \u0646\u0645\u0648\u0646\u0647 \u0627\u06cc \u0627\u0632 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u06cc\u06a9 \u06a9\u0627\u0631\u062e\u0627\u0646\u0647 \u067e\u0631\u0633 \u0648 \u062c\u0648 \u062f\u0631 \u06cc\u06a9 \u0628\u0631\u0646\u0627\u0645\u0647 \u0633\u0627\u062e\u062a\u0647 \u0634\u062f\u0647 \u0628\u0631 \u0631\u0648\u06cc \u0627\u0635\u0648\u0644 \u0637\u0631\u0627\u062d\u06cc \u062f\u0627\u0631\u0627\u06cc \u0648\u06cc\u0698\u06af\u06cc (FSD)<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u06cc\u06a9 \u0645\u0642\u06cc\u0627\u0633 \u067e\u0631\u0648\u0698\u0647 \u060c \u0627\u0637\u0645\u06cc\u0646\u0627\u0646 \u0627\u0632 \u0645\u062f\u0648\u0644\u0627\u0631 \u0628\u0648\u062f\u0646 \u0648 \u0633\u0627\u0632\u0645\u0627\u0646 \u0622\u0646 \u0645\u0647\u0645 \u0645\u06cc \u0634\u0648\u062f. \u06cc\u06a9\u06cc \u0627\u0632 \u0631\u0648\u06cc\u06a9\u0631\u062f\u0647\u0627\u06cc \u0645\u0639\u0645\u0627\u0631\u06cc \u060c \u0637\u0631\u0627\u062d\u06cc \u062f\u0627\u0631\u0627\u06cc \u0648\u06cc\u0698\u06af\u06cc (FSD) \u0627\u0633\u062a \u06a9\u0647 \u0628\u0647 \u0633\u0627\u0632\u0645\u0627\u0646\u062f\u0647\u06cc \u06cc\u06a9 \u0628\u0631\u0646\u0627\u0645\u0647 \u0628\u0627 \u0639\u0645\u0644\u06a9\u0631\u062f \u06a9\u0645\u06a9 \u0645\u06cc \u06a9\u0646\u062f \u0648 \u0644\u0627\u06cc\u0647 \u0647\u0627\u06cc \u0645\u0633\u0626\u0648\u0644\u06cc\u062a \u0631\u0627 \u062a\u0631\u0633\u06cc\u0645 \u0645\u06cc \u06a9\u0646\u062f. \u0628\u06cc\u0627\u06cc\u06cc\u062f \u0646\u062d\u0648\u0647 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 FSD \u0631\u0627 \u062f\u0631 \u067e\u0631\u0648\u0698\u0647 \u0627\u06cc \u06a9\u0647 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u062f \u062f\u0631 \u0646\u0638\u0631 \u0628\u06af\u06cc\u0631\u06cc\u0645 <code>@tanstack\/react-query<\/code>\u0628\u0634\u0631<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C_%D8%AF%D8%A7%D8%B1%D8%A7%DB%8C_%D9%88%DB%8C%DA%98%DA%AF%DB%8C_%DA%86%DB%8C%D8%B3%D8%AA%D8%9F\"><\/span>\n<p>  \u0637\u0631\u0627\u062d\u06cc \u062f\u0627\u0631\u0627\u06cc \u0648\u06cc\u0698\u06af\u06cc \u0686\u06cc\u0633\u062a\u061f<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>FSD (\u0637\u0631\u0627\u062d\u06cc \u0628\u0627 \u0648\u06cc\u0698\u06af\u06cc) \u06cc\u06a9 \u0631\u0648\u06cc\u06a9\u0631\u062f \u0645\u0639\u0645\u0627\u0631\u06cc \u0627\u0633\u062a \u06a9\u0647 \u062f\u0631 \u0622\u0646 \u06cc\u06a9 \u0628\u0631\u0646\u0627\u0645\u0647 \u0628\u0631 \u0627\u0633\u0627\u0633 \u0639\u0645\u0644\u06a9\u0631\u062f \u0628\u0647 \u0645\u0627\u0698\u0648\u0644 \u0647\u0627\u06cc \u0645\u0633\u062a\u0642\u0644 (\u0648\u06cc\u0698\u06af\u06cc \u0647\u0627) \u062a\u0642\u0633\u06cc\u0645 \u0645\u06cc \u0634\u0648\u062f. \u0647\u062f\u0641 \u0627\u0635\u0644\u06cc \u0628\u0647\u0628\u0648\u062f \u0645\u0642\u06cc\u0627\u0633 \u067e\u0630\u06cc\u0631\u06cc \u060c \u062d\u0641\u0638 \u0648 \u062e\u0648\u0627\u0646\u0627\u06cc\u06cc \u067e\u0631\u0648\u0698\u0647 \u0627\u0633\u062a. FSD \u0628\u0647 \u062c\u0644\u0648\u06af\u06cc\u0631\u06cc \u0627\u0632 \u0631\u0634\u062f \u06a9\u0646\u062a\u0631\u0644 \u0646\u0634\u062f\u0647 \u067e\u0627\u06cc\u06af\u0627\u0647 \u06a9\u062f \u06a9\u0645\u06a9 \u0645\u06cc \u06a9\u0646\u062f \u0648 \u0622\u0632\u0645\u0627\u06cc\u0634 \u0631\u0627 \u0633\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%D8%B3%D8%B7%D8%AD_FSD\"><\/span>\n<p>  \u0633\u0637\u062d FSD<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<ul>\n<li>\n<strong>\u0628\u0631\u0646\u0627\u0645\u0647<\/strong>: \u062a\u0646\u0638\u06cc\u0645\u0627\u062a \u062c\u0647\u0627\u0646\u06cc \u060c \u0645\u0633\u06cc\u0631\u06cc\u0627\u0628\u06cc \u0648 \u0627\u0631\u0627\u0626\u0647 \u062f\u0647\u0646\u062f\u06af\u0627\u0646.<\/li>\n<li>\n<strong>\u0635\u0641\u062d\u0627\u062a<\/strong>: \u0635\u0641\u062d\u0627\u062a \u06a9\u0627\u0645\u0644 \u06cc\u0627 \u0642\u0633\u0645\u062a\u0647\u0627\u06cc \u0628\u0632\u0631\u06af \u06cc\u06a9 \u0635\u0641\u062d\u0647 \u0628\u0631\u0627\u06cc \u0645\u0633\u06cc\u0631\u06cc\u0627\u0628\u06cc \u062a\u0648 \u062f\u0631 \u062a\u0648.<\/li>\n<li>\n<strong>\u0648\u06cc\u0631\u0627\u0686\u0647<\/strong>: \u0642\u0637\u0639\u0627\u062a \u0628\u0632\u0631\u06af \u062e\u0648\u062f\u06a9\u0634\u06cc \u0627\u0632 \u0639\u0645\u0644\u06a9\u0631\u062f \u06cc\u0627 \u0631\u0627\u0628\u0637 \u060c \u0645\u0639\u0645\u0648\u0644\u0627\u064b \u0627\u062c\u0631\u0627\u06cc \u06cc\u06a9 \u0633\u0646\u0627\u0631\u06cc\u0648\u06cc \u06a9\u0644 \u06a9\u0627\u0631\u0628\u0631.<\/li>\n<li>\n<strong>\u0648\u06cc\u0698\u06af\u06cc<\/strong>: \u0627\u062c\u0631\u0627\u06cc \u0642\u0627\u0628\u0644 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u062c\u062f\u062f \u0627\u0632 \u0648\u06cc\u0698\u06af\u06cc \u0647\u0627\u06cc \u06a9\u0627\u0645\u0644 \u0645\u062d\u0635\u0648\u0644 \u060c \u06cc\u0639\u0646\u06cc \u0627\u0642\u062f\u0627\u0645\u0627\u062a\u06cc \u06a9\u0647 \u0627\u0631\u0632\u0634 \u06a9\u0633\u0628 \u0648 \u06a9\u0627\u0631 \u0631\u0627 \u0628\u0647 \u06a9\u0627\u0631\u0628\u0631 \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc \u062f\u0647\u062f.<\/li>\n<li>\n<strong>\u0645\u0648\u062c\u0648\u062f\u0627\u062a<\/strong>: \u0627\u0634\u06cc\u0627\u0621 \u0645\u0646\u0637\u0642\u06cc \u0645\u0646\u0637\u0642\u06cc \u062a\u062c\u0627\u0631\u062a \u060c \u0645\u0627\u0646\u0646\u062f \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u060c \u0633\u0641\u0627\u0631\u0634\u0627\u062a \u0648 \u0645\u062d\u0635\u0648\u0644\u0627\u062a.<\/li>\n<li>\n<strong>\u0645\u0634\u062a\u0631\u06a9<\/strong>: \u0645\u0627\u0698\u0648\u0644 \u0647\u0627\u06cc \u0645\u0634\u062a\u0631\u06a9 \u060c \u0645\u0627\u0646\u0646\u062f \u0645\u0624\u0644\u0641\u0647 \u0647\u0627\u06cc UI \u060c \u0628\u0631\u0646\u0627\u0645\u0647 \u0647\u0627\u06cc \u06a9\u0627\u0631\u0628\u0631\u062f\u06cc \u0648 \u06cc\u0627\u0631\u0627\u0646 API.<\/li>\n<\/ul>\n<h3><span class=\"ez-toc-section\" id=\"%DA%A9%D8%A7%D8%B1%D8%AE%D8%A7%D9%86%D9%87_%D9%BE%D8%B1%D8%B3_%D9%88_%D8%AC%D9%88_%D9%88_FSD\"><\/span>\n<p>  \u06a9\u0627\u0631\u062e\u0627\u0646\u0647 \u067e\u0631\u0633 \u0648 \u062c\u0648 \u0648 FSD<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u062d\u0627\u0644 \u0628\u06cc\u0627\u06cc\u06cc\u062f \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0645\u0639\u0645\u0627\u0631\u06cc \u067e\u0631\u0648\u0698\u0647 \u0646\u06af\u0627\u0647 \u06a9\u0646\u06cc\u0645 <code>query factory<\/code> \u0648 <code>FSD<\/code> \u0631\u0648\u06cc\u06a9\u0631\u062f<\/p>\n<p><strong>\u0633\u0627\u062e\u062a\u0627\u0631 \u067e\u0631\u0648\u0698\u0647<\/strong>:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>src\/\n\u251c\u2500\u2500 app\/                   \/\/ Global configurations, routing, and providers\n\u251c\u2500\u2500 entities\/              \/\/ Entities\n\u2502   \u2514\u2500\u2500 pokemon\/\n\u2502       \u251c\u2500\u2500 api\/\n\u2502       \u251c\u2500\u2500 model\/\n\u2502       \u2514\u2500\u2500 ui\/\n\u251c\u2500\u2500 features\/              \/\/ Features\n\u251c\u2500\u2500 widgets\/               \/\/ Widgets\n\u251c\u2500\u2500 pages\/                 \/\/ Pages (PokemonsPage for example)\n\u2514\u2500\u2500 shared\/                \/\/ Common modules, such as UI components, utilities..\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<h4><span class=\"ez-toc-section\" id=\"%D9%85%D8%B4%D8%AA%D8%B1%DA%A9_%D9%85%D9%86%D8%A7%D8%A8%D8%B9_%D9%85%D8%B4%D8%AA%D8%B1%DA%A9\"><\/span>\n<p>  \u0645\u0634\u062a\u0631\u06a9 (\u0645\u0646\u0627\u0628\u0639 \u0645\u0634\u062a\u0631\u06a9)<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p><strong>\u0645\u0634\u062a\u0631\u06a9<\/strong> \u0634\u0627\u0645\u0644 \u0645\u0624\u0644\u0641\u0647 \u0647\u0627\u06cc \u0645\u0634\u062a\u0631\u06a9 \u060c \u0628\u0631\u0646\u0627\u0645\u0647 \u0647\u0627\u06cc \u06a9\u0627\u0631\u0628\u0631\u062f\u06cc \u060c \u062a\u0646\u0638\u06cc\u0645\u0627\u062a \u0648 \u06cc\u0627\u0631\u0627\u0646 API \u0639\u0645\u0648\u0645\u06cc \u0627\u0633\u062a. \u0628\u06cc\u0627\u06cc\u06cc\u062f \u0628\u0646\u0648\u06cc\u0633\u06cc\u0645 <code>createQueries<\/code> \u0639\u0645\u0644\u06a9\u0631\u062f \u060c \u06a9\u0647 \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u06cc\u06a9 \u06a9\u0627\u0631\u062e\u0627\u0646\u0647 \u067e\u0631\u0633 \u0648 \u062c\u0648 \u062e\u062f\u0645\u062a \u0645\u06cc \u06a9\u0646\u062f. \u0628\u06cc\u0627\u06cc\u06cc\u062f \u0641\u0631\u0636 \u06a9\u0646\u06cc\u0645 \u06a9\u0647 \u0645\u0627 \u0627\u0632 \u06cc\u06a9 API \u0633\u0627\u062f\u0647 Crud \u0628\u0631\u0627\u06cc \u0628\u0631\u0642\u0631\u0627\u0631\u06cc \u0627\u0631\u062a\u0628\u0627\u0637 \u0628\u0627 \u0633\u0631\u0648\u0631 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u06cc\u0645:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight typescript\"><code><span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">keepPreviousData<\/span><span class=\"p\">,<\/span> <span class=\"nx\">queryOptions<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">@tanstack\/react-query<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"o\">*<\/span> <span class=\"k\">as<\/span> <span class=\"nx\">qs<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">qs<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">createQueryFn<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">..\/..\/api\/createQueryFn<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">createMutationFn<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">..\/..\/api\/createMutationFn<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">createDeleteMutationFn<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">..\/..\/api\/createDeleteMutationFn<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">createUpdateMutationFn<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">..\/..\/api\/createUpdateMutationFn<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n\n<span class=\"c1\">\/\/ We pass generics so that when we write code later, the types are displayed correctly.<\/span>\n<span class=\"k\">export<\/span> <span class=\"kd\">const<\/span> <span class=\"nx\">createQueries<\/span> <span class=\"o\">=<\/span> <span class=\"o\">&lt;<\/span>\n  <span class=\"nx\">CreateResponse<\/span><span class=\"p\">,<\/span>\n  <span class=\"nx\">CreateBody<\/span><span class=\"p\">,<\/span>\n  <span class=\"nx\">ReadResponse<\/span><span class=\"p\">,<\/span>\n  <span class=\"nx\">ReadOneResponse<\/span><span class=\"p\">,<\/span>\n  <span class=\"nx\">UpdateResponse<\/span><span class=\"p\">,<\/span>\n  <span class=\"nx\">UpdateBody<\/span><span class=\"p\">,<\/span>\n  <span class=\"nx\">DeleteResponse<\/span><span class=\"p\">,<\/span>\n  <span class=\"nx\">DeleteParams<\/span>\n<span class=\"o\">&gt;<\/span><span class=\"p\">(<\/span>\n  <span class=\"nx\">entity<\/span><span class=\"p\">:<\/span> <span class=\"kr\">string<\/span>\n<span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">({<\/span>\n  <span class=\"na\">all<\/span><span class=\"p\">:<\/span> <span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span>\n    <span class=\"nf\">queryOptions<\/span><span class=\"p\">({<\/span>\n      <span class=\"na\">queryKey<\/span><span class=\"p\">:<\/span> <span class=\"p\">[<\/span><span class=\"nx\">entity<\/span><span class=\"p\">],<\/span>\n    <span class=\"p\">}),<\/span>\n  <span class=\"na\">create<\/span><span class=\"p\">:<\/span> <span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">({<\/span>\n    <span class=\"na\">mutationKey<\/span><span class=\"p\">:<\/span> <span class=\"p\">[<\/span><span class=\"nx\">entity<\/span><span class=\"p\">],<\/span>\n    <span class=\"na\">mutationFn<\/span><span class=\"p\">:<\/span> <span class=\"p\">(<\/span><span class=\"na\">body<\/span><span class=\"p\">:<\/span> <span class=\"nx\">CreateBody<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span>\n      <span class=\"nx\">createMutationFn<\/span><span class=\"o\">&lt;<\/span><span class=\"nx\">CreateResponse<\/span><span class=\"p\">,<\/span> <span class=\"nx\">CreateBody<\/span><span class=\"o\">&gt;<\/span><span class=\"p\">({<\/span>\n        <span class=\"na\">path<\/span><span class=\"p\">:<\/span> <span class=\"s2\">`\/<\/span><span class=\"p\">${<\/span><span class=\"nx\">entity<\/span><span class=\"p\">}<\/span><span class=\"s2\">`<\/span><span class=\"p\">,<\/span>\n        <span class=\"nx\">body<\/span><span class=\"p\">,<\/span>\n      <span class=\"p\">}),<\/span>\n    <span class=\"na\">placeholderData<\/span><span class=\"p\">:<\/span> <span class=\"nx\">keepPreviousData<\/span><span class=\"p\">,<\/span>\n  <span class=\"p\">}),<\/span>\n  <span class=\"na\">read<\/span><span class=\"p\">:<\/span> <span class=\"p\">(<\/span><span class=\"nx\">filters<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span>\n    <span class=\"nf\">queryOptions<\/span><span class=\"p\">({<\/span>\n      <span class=\"na\">queryKey<\/span><span class=\"p\">:<\/span> <span class=\"p\">[<\/span><span class=\"nx\">entity<\/span><span class=\"p\">,<\/span> <span class=\"nx\">filters<\/span><span class=\"p\">],<\/span>\n      <span class=\"na\">queryFn<\/span><span class=\"p\">:<\/span> <span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span>\n        <span class=\"nx\">createQueryFn<\/span><span class=\"o\">&lt;<\/span><span class=\"nx\">ReadResponse<\/span><span class=\"o\">&gt;<\/span><span class=\"p\">({<\/span>\n          <span class=\"na\">path<\/span><span class=\"p\">:<\/span> <span class=\"s2\">`\/<\/span><span class=\"p\">${<\/span><span class=\"nx\">entity<\/span><span class=\"p\">}<\/span><span class=\"s2\">?<\/span><span class=\"p\">${<\/span><span class=\"nx\">qs<\/span><span class=\"p\">.<\/span><span class=\"nf\">stringify<\/span><span class=\"p\">(<\/span><span class=\"nx\">filters<\/span><span class=\"p\">)}<\/span><span class=\"s2\">`<\/span><span class=\"p\">,<\/span>\n        <span class=\"p\">}),<\/span>\n      <span class=\"na\">placeholderData<\/span><span class=\"p\">:<\/span> <span class=\"nx\">keepPreviousData<\/span><span class=\"p\">,<\/span>\n    <span class=\"p\">}),<\/span>\n  <span class=\"na\">readOne<\/span><span class=\"p\">:<\/span> <span class=\"p\">({<\/span> <span class=\"nx\">id<\/span> <span class=\"p\">})<\/span> <span class=\"o\">=&gt;<\/span>\n    <span class=\"nf\">queryOptions<\/span><span class=\"p\">({<\/span>\n      <span class=\"na\">queryKey<\/span><span class=\"p\">:<\/span> <span class=\"p\">[<\/span><span class=\"nx\">entity<\/span><span class=\"p\">,<\/span> <span class=\"nx\">id<\/span><span class=\"p\">],<\/span>\n      <span class=\"na\">queryFn<\/span><span class=\"p\">:<\/span> <span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span>\n        <span class=\"nx\">createQueryFn<\/span><span class=\"o\">&lt;<\/span><span class=\"nx\">ReadOneResponse<\/span><span class=\"o\">&gt;<\/span><span class=\"p\">({<\/span>\n          <span class=\"na\">path<\/span><span class=\"p\">:<\/span> <span class=\"s2\">`\/<\/span><span class=\"p\">${<\/span><span class=\"nx\">entity<\/span><span class=\"p\">}<\/span><span class=\"s2\">\/<\/span><span class=\"p\">${<\/span><span class=\"nx\">id<\/span><span class=\"p\">}<\/span><span class=\"s2\">`<\/span><span class=\"p\">,<\/span>\n        <span class=\"p\">}),<\/span>\n      <span class=\"na\">placeholderData<\/span><span class=\"p\">:<\/span> <span class=\"nx\">keepPreviousData<\/span><span class=\"p\">,<\/span>\n    <span class=\"p\">}),<\/span>\n  <span class=\"na\">update<\/span><span class=\"p\">:<\/span> <span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">({<\/span>\n    <span class=\"na\">mutationKey<\/span><span class=\"p\">:<\/span> <span class=\"p\">[<\/span><span class=\"nx\">entity<\/span><span class=\"p\">],<\/span>\n    <span class=\"na\">mutationFn<\/span><span class=\"p\">:<\/span> <span class=\"p\">({<\/span> <span class=\"nx\">id<\/span><span class=\"p\">,<\/span> <span class=\"nx\">body<\/span> <span class=\"p\">})<\/span> <span class=\"o\">=&gt;<\/span>\n      <span class=\"nx\">createUpdateMutationFn<\/span><span class=\"o\">&lt;<\/span><span class=\"nx\">UpdateResponse<\/span><span class=\"p\">,<\/span> <span class=\"nx\">UpdateBody<\/span><span class=\"o\">&gt;<\/span><span class=\"p\">({<\/span>\n        <span class=\"na\">path<\/span><span class=\"p\">:<\/span> <span class=\"s2\">`\/<\/span><span class=\"p\">${<\/span><span class=\"nx\">entity<\/span><span class=\"p\">}<\/span><span class=\"s2\">\/<\/span><span class=\"p\">${<\/span><span class=\"nx\">id<\/span><span class=\"p\">}<\/span><span class=\"s2\">`<\/span><span class=\"p\">,<\/span>\n        <span class=\"nx\">body<\/span><span class=\"p\">,<\/span>\n      <span class=\"p\">}),<\/span>\n    <span class=\"na\">placeholderData<\/span><span class=\"p\">:<\/span> <span class=\"nx\">keepPreviousData<\/span><span class=\"p\">,<\/span>\n  <span class=\"p\">}),<\/span>\n  <span class=\"na\">delete<\/span><span class=\"p\">:<\/span> <span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">({<\/span>\n    <span class=\"na\">mutationKey<\/span><span class=\"p\">:<\/span> <span class=\"p\">[<\/span><span class=\"nx\">entity<\/span><span class=\"p\">],<\/span>\n    <span class=\"na\">mutationFn<\/span><span class=\"p\">:<\/span> <span class=\"p\">(<\/span><span class=\"na\">params<\/span><span class=\"p\">:<\/span> <span class=\"nx\">DeleteParams<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span>\n      <span class=\"nx\">createDeleteMutationFn<\/span><span class=\"o\">&lt;<\/span><span class=\"nx\">DeleteResponse<\/span><span class=\"o\">&gt;<\/span><span class=\"p\">({<\/span>\n        <span class=\"na\">path<\/span><span class=\"p\">:<\/span> <span class=\"s2\">`\/<\/span><span class=\"p\">${<\/span><span class=\"nx\">entity<\/span><span class=\"p\">}<\/span><span class=\"s2\">\/<\/span><span class=\"p\">${<\/span><span class=\"nx\">params<\/span><span class=\"p\">.<\/span><span class=\"nx\">id<\/span><span class=\"p\">}<\/span><span class=\"s2\">`<\/span><span class=\"p\">,<\/span>\n      <span class=\"p\">}),<\/span>\n    <span class=\"na\">placeholderData<\/span><span class=\"p\">:<\/span> <span class=\"nx\">keepPreviousData<\/span><span class=\"p\">,<\/span>\n  <span class=\"p\">}),<\/span>\n<span class=\"p\">});<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0627\u06cc\u0646 \u0639\u0645\u0644\u06a9\u0631\u062f \u06cc\u06a9 \u0634\u06cc \u0631\u0627 \u0628\u0627 \u062a\u0646\u0638\u06cc\u0645\u0627\u062a \u067e\u0631\u0633 \u0648 \u062c\u0648 \u0628\u0631\u0627\u06cc \u0639\u0645\u0644\u06cc\u0627\u062a \u0627\u0633\u0627\u0633\u06cc CRUD \u0628\u0631\u0645\u06cc \u06af\u0631\u062f\u0627\u0646\u062f.<\/p>\n<p>\u0628\u06cc\u0627\u06cc\u06cc\u062f \u06cc\u06a9 \u0641\u0627\u06cc\u0644 \u0622\u0632\u0645\u0627\u06cc\u0634 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u0645 <code>createQueries.test.ts<\/code>:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight typescript\"><code><span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">describe<\/span><span class=\"p\">,<\/span> <span class=\"nx\">it<\/span><span class=\"p\">,<\/span> <span class=\"nx\">expect<\/span><span class=\"p\">,<\/span> <span class=\"nx\">vi<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">vitest<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">createQueries<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">.\/createQueries.ts<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"o\">*<\/span> <span class=\"k\">as<\/span> <span class=\"nx\">api<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">..\/..\/api\/createQueryFn<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"o\">*<\/span> <span class=\"k\">as<\/span> <span class=\"nx\">mutationApi<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">..\/..\/api\/createMutationFn<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n\n<span class=\"nx\">vi<\/span><span class=\"p\">.<\/span><span class=\"nf\">mock<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">..\/..\/api\/createQueryFn<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">({<\/span>\n  <span class=\"na\">createQueryFn<\/span><span class=\"p\">:<\/span> <span class=\"nx\">vi<\/span><span class=\"p\">.<\/span><span class=\"nf\">fn<\/span><span class=\"p\">(),<\/span>\n<span class=\"p\">}));<\/span>\n\n<span class=\"nx\">vi<\/span><span class=\"p\">.<\/span><span class=\"nf\">mock<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">..\/..\/api\/createMutationFn<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">({<\/span>\n  <span class=\"na\">createMutationFn<\/span><span class=\"p\">:<\/span> <span class=\"nx\">vi<\/span><span class=\"p\">.<\/span><span class=\"nf\">fn<\/span><span class=\"p\">(),<\/span>\n<span class=\"p\">}));<\/span>\n\n<span class=\"nx\">vi<\/span><span class=\"p\">.<\/span><span class=\"nf\">mock<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">..\/..\/api\/createDeleteMutationFn<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">({<\/span>\n  <span class=\"na\">createDeleteMutationFn<\/span><span class=\"p\">:<\/span> <span class=\"nx\">vi<\/span><span class=\"p\">.<\/span><span class=\"nf\">fn<\/span><span class=\"p\">(),<\/span>\n<span class=\"p\">}));<\/span>\n\n<span class=\"nx\">vi<\/span><span class=\"p\">.<\/span><span class=\"nf\">mock<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">..\/..\/api\/createUpdateMutationFn<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">({<\/span>\n  <span class=\"na\">createUpdateMutationFn<\/span><span class=\"p\">:<\/span> <span class=\"nx\">vi<\/span><span class=\"p\">.<\/span><span class=\"nf\">fn<\/span><span class=\"p\">(),<\/span>\n<span class=\"p\">}));<\/span>\n\n<span class=\"nf\">describe<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">createQueries<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"nx\">entity<\/span> <span class=\"o\">=<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">user<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n\n  <span class=\"nf\">it<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">should return correct query options for \"all\"<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n    <span class=\"kd\">const<\/span> <span class=\"nx\">queries<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">createQueries<\/span><span class=\"p\">(<\/span><span class=\"nx\">entity<\/span><span class=\"p\">);<\/span>\n    <span class=\"kd\">const<\/span> <span class=\"nx\">result<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">queries<\/span><span class=\"p\">.<\/span><span class=\"nf\">all<\/span><span class=\"p\">();<\/span>\n\n    <span class=\"nf\">expect<\/span><span class=\"p\">(<\/span><span class=\"nx\">result<\/span><span class=\"p\">.<\/span><span class=\"nx\">queryKey<\/span><span class=\"p\">).<\/span><span class=\"nf\">toEqual<\/span><span class=\"p\">([<\/span><span class=\"nx\">entity<\/span><span class=\"p\">]);<\/span>\n  <span class=\"p\">});<\/span>\n\n  <span class=\"nf\">it<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">should create mutation for \"create\"<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n    <span class=\"kd\">const<\/span> <span class=\"nx\">queries<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">createQueries<\/span><span class=\"p\">(<\/span><span class=\"nx\">entity<\/span><span class=\"p\">);<\/span>\n    <span class=\"kd\">const<\/span> <span class=\"nx\">body<\/span> <span class=\"o\">=<\/span> <span class=\"p\">{<\/span> <span class=\"na\">name<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">Alexander<\/span><span class=\"dl\">'<\/span> <span class=\"p\">};<\/span>\n\n    <span class=\"nx\">queries<\/span><span class=\"p\">.<\/span><span class=\"nf\">create<\/span><span class=\"p\">().<\/span><span class=\"nf\">mutationFn<\/span><span class=\"p\">(<\/span><span class=\"nx\">body<\/span><span class=\"p\">);<\/span>\n\n    <span class=\"nf\">expect<\/span><span class=\"p\">(<\/span><span class=\"nx\">mutationApi<\/span><span class=\"p\">.<\/span><span class=\"nx\">createMutationFn<\/span><span class=\"p\">).<\/span><span class=\"nf\">toHaveBeenCalledWith<\/span><span class=\"p\">({<\/span>\n      <span class=\"na\">path<\/span><span class=\"p\">:<\/span> <span class=\"s2\">`\/<\/span><span class=\"p\">${<\/span><span class=\"nx\">entity<\/span><span class=\"p\">}<\/span><span class=\"s2\">`<\/span><span class=\"p\">,<\/span>\n      <span class=\"nx\">body<\/span><span class=\"p\">,<\/span>\n    <span class=\"p\">});<\/span>\n  <span class=\"p\">});<\/span>\n\n  <span class=\"nf\">it<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">should return correct query options for \"read\"<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n    <span class=\"kd\">const<\/span> <span class=\"nx\">queries<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">createQueries<\/span><span class=\"p\">(<\/span><span class=\"nx\">entity<\/span><span class=\"p\">);<\/span>\n    <span class=\"kd\">const<\/span> <span class=\"nx\">filters<\/span> <span class=\"o\">=<\/span> <span class=\"p\">{<\/span> <span class=\"na\">page<\/span><span class=\"p\">:<\/span> <span class=\"mi\">1<\/span> <span class=\"p\">};<\/span>\n\n    <span class=\"nx\">queries<\/span><span class=\"p\">.<\/span><span class=\"nf\">read<\/span><span class=\"p\">(<\/span><span class=\"nx\">filters<\/span><span class=\"p\">).<\/span><span class=\"nf\">queryFn<\/span><span class=\"p\">();<\/span>\n\n    <span class=\"nf\">expect<\/span><span class=\"p\">(<\/span><span class=\"nx\">api<\/span><span class=\"p\">.<\/span><span class=\"nx\">createQueryFn<\/span><span class=\"p\">).<\/span><span class=\"nf\">toHaveBeenCalledWith<\/span><span class=\"p\">({<\/span>\n      <span class=\"na\">path<\/span><span class=\"p\">:<\/span> <span class=\"s2\">`\/<\/span><span class=\"p\">${<\/span><span class=\"nx\">entity<\/span><span class=\"p\">}<\/span><span class=\"s2\">?page=1`<\/span><span class=\"p\">,<\/span>\n    <span class=\"p\">});<\/span>\n  <span class=\"p\">});<\/span>\n\n  <span class=\"nf\">it<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">should return correct query options for \"readOne\"<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n    <span class=\"kd\">const<\/span> <span class=\"nx\">queries<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">createQueries<\/span><span class=\"p\">(<\/span><span class=\"nx\">entity<\/span><span class=\"p\">);<\/span>\n    <span class=\"kd\">const<\/span> <span class=\"nx\">id<\/span> <span class=\"o\">=<\/span> <span class=\"mi\">123<\/span><span class=\"p\">;<\/span>\n\n    <span class=\"nx\">queries<\/span><span class=\"p\">.<\/span><span class=\"nf\">readOne<\/span><span class=\"p\">({<\/span> <span class=\"nx\">id<\/span> <span class=\"p\">}).<\/span><span class=\"nf\">queryFn<\/span><span class=\"p\">();<\/span>\n\n    <span class=\"nf\">expect<\/span><span class=\"p\">(<\/span><span class=\"nx\">api<\/span><span class=\"p\">.<\/span><span class=\"nx\">createQueryFn<\/span><span class=\"p\">).<\/span><span class=\"nf\">toHaveBeenCalledWith<\/span><span class=\"p\">({<\/span>\n      <span class=\"na\">path<\/span><span class=\"p\">:<\/span> <span class=\"s2\">`\/<\/span><span class=\"p\">${<\/span><span class=\"nx\">entity<\/span><span class=\"p\">}<\/span><span class=\"s2\">\/<\/span><span class=\"p\">${<\/span><span class=\"nx\">id<\/span><span class=\"p\">}<\/span><span class=\"s2\">`<\/span><span class=\"p\">,<\/span>\n    <span class=\"p\">});<\/span>\n  <span class=\"p\">});<\/span>\n\n  <span class=\"nf\">it<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">should create mutation for \"update\"<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n    <span class=\"kd\">const<\/span> <span class=\"nx\">queries<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">createQueries<\/span><span class=\"p\">(<\/span><span class=\"nx\">entity<\/span><span class=\"p\">);<\/span>\n    <span class=\"kd\">const<\/span> <span class=\"nx\">id<\/span> <span class=\"o\">=<\/span> <span class=\"mi\">123<\/span><span class=\"p\">;<\/span>\n    <span class=\"kd\">const<\/span> <span class=\"nx\">body<\/span> <span class=\"o\">=<\/span> <span class=\"p\">{<\/span> <span class=\"na\">name<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">Updated<\/span><span class=\"dl\">'<\/span> <span class=\"p\">};<\/span>\n\n    <span class=\"nx\">queries<\/span><span class=\"p\">.<\/span><span class=\"nf\">update<\/span><span class=\"p\">().<\/span><span class=\"nf\">mutationFn<\/span><span class=\"p\">({<\/span> <span class=\"nx\">id<\/span><span class=\"p\">,<\/span> <span class=\"nx\">body<\/span> <span class=\"p\">});<\/span>\n\n    <span class=\"nf\">expect<\/span><span class=\"p\">(<\/span><span class=\"nx\">mutationApi<\/span><span class=\"p\">.<\/span><span class=\"nx\">createUpdateMutationFn<\/span><span class=\"p\">).<\/span><span class=\"nf\">toHaveBeenCalledWith<\/span><span class=\"p\">({<\/span>\n      <span class=\"na\">path<\/span><span class=\"p\">:<\/span> <span class=\"s2\">`\/<\/span><span class=\"p\">${<\/span><span class=\"nx\">entity<\/span><span class=\"p\">}<\/span><span class=\"s2\">\/<\/span><span class=\"p\">${<\/span><span class=\"nx\">id<\/span><span class=\"p\">}<\/span><span class=\"s2\">`<\/span><span class=\"p\">,<\/span>\n      <span class=\"nx\">body<\/span><span class=\"p\">,<\/span>\n    <span class=\"p\">});<\/span>\n  <span class=\"p\">});<\/span>\n\n  <span class=\"nf\">it<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">should create mutation for \"delete\"<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n    <span class=\"kd\">const<\/span> <span class=\"nx\">queries<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">createQueries<\/span><span class=\"p\">(<\/span><span class=\"nx\">entity<\/span><span class=\"p\">);<\/span>\n    <span class=\"kd\">const<\/span> <span class=\"nx\">params<\/span> <span class=\"o\">=<\/span> <span class=\"p\">{<\/span> <span class=\"na\">id<\/span><span class=\"p\">:<\/span> <span class=\"mi\">123<\/span> <span class=\"p\">};<\/span>\n\n    <span class=\"nx\">queries<\/span><span class=\"p\">.<\/span><span class=\"k\">delete<\/span><span class=\"p\">().<\/span><span class=\"nf\">mutationFn<\/span><span class=\"p\">(<\/span><span class=\"nx\">params<\/span><span class=\"p\">);<\/span>\n\n    <span class=\"nf\">expect<\/span><span class=\"p\">(<\/span><span class=\"nx\">mutationApi<\/span><span class=\"p\">.<\/span><span class=\"nx\">createDeleteMutationFn<\/span><span class=\"p\">).<\/span><span class=\"nf\">toHaveBeenCalledWith<\/span><span class=\"p\">({<\/span>\n      <span class=\"na\">path<\/span><span class=\"p\">:<\/span> <span class=\"s2\">`\/<\/span><span class=\"p\">${<\/span><span class=\"nx\">entity<\/span><span class=\"p\">}<\/span><span class=\"s2\">\/<\/span><span class=\"p\">${<\/span><span class=\"nx\">params<\/span><span class=\"p\">.<\/span><span class=\"nx\">id<\/span><span class=\"p\">}<\/span><span class=\"s2\">`<\/span><span class=\"p\">,<\/span>\n    <span class=\"p\">});<\/span>\n  <span class=\"p\">});<\/span>\n<span class=\"p\">});<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0627\u06a9\u0646\u0648\u0646 \u0639\u0645\u0644\u06a9\u0631\u062f \u0645\u0627 \u0622\u0632\u0645\u0627\u06cc\u0634 \u0634\u062f\u0647 \u0627\u0633\u062a<\/p>\n<h4><span class=\"ez-toc-section\" id=\"%D9%85%D9%88%D8%AC%D9%88%D8%AF%D8%A7%D8%AA\"><\/span>\n<p>  \u0645\u0648\u062c\u0648\u062f\u0627\u062a<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>\u0646\u0647\u0627\u062f\u0647\u0627 \u0627\u0634\u06cc\u0627\u0621 \u0627\u0635\u0644\u06cc \u062f\u0627\u0645\u0646\u0647 \u0647\u0633\u062a\u0646\u062f \u06a9\u0647 \u0628\u0631\u0646\u0627\u0645\u0647 \u0628\u0627 \u0622\u0646 \u06a9\u0627\u0631 \u0645\u06cc \u06a9\u0646\u062f \u060c \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0645\u062b\u0627\u0644 \u060c <code>User<\/code> \u06cc\u0627 <code>Pokemon<\/code>\u0628\u0634\u0631 \u0647\u0631 \u0645\u0648\u062c\u0648\u062f\u06cc\u062a \u0645\u0627\u0698\u0648\u0644 \u062e\u0627\u0635 \u062e\u0648\u062f \u0631\u0627 \u062f\u0627\u0631\u062f \u06a9\u0647 \u0634\u0627\u0645\u0644 \u062a\u0639\u0627\u0631\u06cc\u0641 \u0646\u0648\u0639 \u062f\u0627\u062f\u0647 \u060c \u0642\u0644\u0627\u0628 \u0647\u0627\u06cc Crud \u060c \u0627\u062c\u0632\u0627\u06cc UI \u0628\u0631\u0627\u06cc \u0646\u0645\u0627\u06cc\u0634 \u0648 \u0627\u062d\u062a\u0645\u0627\u0644\u0627\u064b \u0622\u062f\u0627\u067e\u062a\u0648\u0631\u0647\u0627 \u0628\u0631\u0627\u06cc \u062a\u0639\u0627\u0645\u0644 \u0628\u0627 API \u0627\u0633\u062a.<\/p>\n<p>\u0633\u0627\u062e\u062a\u0627\u0631 \u0645\u062b\u0627\u0644 <code>Pokemon<\/code> \u0645\u0648\u062c\u0648\u062f\u06cc\u062a:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>src\/\n\u2514\u2500\u2500 entities\/\n    \u2514\u2500\u2500 pokemon\/\n        \u251c\u2500\u2500 api\/\n        \u2502   \u251c\u2500\u2500 pokemon.query.ts      \/\/ Pokemon Queries\n        \u2502   \u251c\u2500\u2500 usePokemon.tsx        \/\/ Hook for getting one Pokemon\n        \u2502   \u251c\u2500\u2500 usePokemonCreate.tsx  \/\/ Hook for Pokemon creation\n        \u2502   \u251c\u2500\u2500 usePokemonDelete.tsx  \/\/ Hook for Pokemon deletion\n        \u2502   \u251c\u2500\u2500 usePokemonList.tsx    \/\/ Hook for getting Pokemon list\n        \u2502   \u2514\u2500\u2500 usePokemonUpdate.tsx  \/\/ Hook for Pokemon update\n        \u2514\u2500\u2500 model\/\n            \u2514\u2500\u2500 Pokemon.ts            \/\/ Types for Pokemon entity\n        \u2514\u2500\u2500 ui\/\n            \u251c\u2500\u2500 PokemonList.tsx       \/\/ React component for Pokemon list\n            \u2514\u2500\u2500 PokemonCard.tsx       \/\/ React component for Pokemon card\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<ul>\n<li>\n<strong>API\/UsePokemon*.ts<\/strong>: \u0627\u062c\u0631\u0627\u06cc \u0642\u0644\u0627\u0628 Crud \u0628\u0631\u0627\u06cc API Pokemon.<\/li>\n<li>\n<strong>model\/pokemon.ts<\/strong>: \u062a\u0639\u0627\u0631\u06cc\u0641 \u0646\u0648\u0639 \u062f\u0627\u062f\u0647 \u0628\u0631\u0627\u06cc <code>Pokemon<\/code> \u0645\u0648\u062c\u0648\u062f\u06cc\u062a<\/li>\n<li>\n<strong>ui\/pokemonlist.tsx<\/strong> \u0648\u062a <strong>ui\/pokemoncard.tsx<\/strong>: \u0645\u0624\u0644\u0641\u0647 \u0647\u0627\u06cc UI \u0628\u0631\u0627\u06cc \u0645\u0648\u062c\u0648\u062f\u06cc\u062a Pokemon (\u0646\u0645\u0627\u06cc\u0634 \u0644\u06cc\u0633\u062a\u06cc \u0627\u0632 Pokemon \u0648 \u06cc\u06a9 Pokemon \u062c\u062f\u0627\u06af\u0627\u0646\u0647).<\/li>\n<\/ul>\n<p>\u0646\u0645\u0648\u0646\u0647 <strong>pokemon.query.ts<\/strong> \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 <code>createQueries<\/code>:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight typescript\"><code><span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">createQueries<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">..\/..\/..\/shared\/lib\/createQueries\/createQueries<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span>\n  <span class=\"nx\">CreatePokemonResponse<\/span><span class=\"p\">,<\/span>\n  <span class=\"nx\">CreatePokemonBody<\/span><span class=\"p\">,<\/span>\n  <span class=\"nx\">ReadPokemonResponse<\/span><span class=\"p\">,<\/span>\n  <span class=\"nx\">ReadOnePokemonResponse<\/span><span class=\"p\">,<\/span>\n  <span class=\"nx\">UpdatePokemonResponse<\/span><span class=\"p\">,<\/span>\n  <span class=\"nx\">UpdatePokemonBody<\/span><span class=\"p\">,<\/span>\n  <span class=\"nx\">DeletePokemonResponse<\/span><span class=\"p\">,<\/span>\n  <span class=\"nx\">DeletePokemonParams<\/span><span class=\"p\">,<\/span>\n<span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">..\/model\/Pokemon<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n\n<span class=\"k\">export<\/span> <span class=\"kd\">const<\/span> <span class=\"nx\">pokemonQueries<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">createQueries<\/span><span class=\"o\">&lt;<\/span>\n  <span class=\"nx\">CreatePokemonResponse<\/span><span class=\"p\">,<\/span>\n  <span class=\"nx\">CreatePokemonBody<\/span><span class=\"p\">,<\/span>\n  <span class=\"nx\">ReadPokemonResponse<\/span><span class=\"p\">,<\/span>\n  <span class=\"nx\">ReadOnePokemonResponse<\/span><span class=\"p\">,<\/span>\n  <span class=\"nx\">UpdatePokemonResponse<\/span><span class=\"p\">,<\/span>\n  <span class=\"nx\">UpdatePokemonBody<\/span><span class=\"p\">,<\/span>\n  <span class=\"nx\">DeletePokemonResponse<\/span><span class=\"p\">,<\/span>\n  <span class=\"nx\">DeletePokemonParams<\/span>\n<span class=\"o\">&gt;<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">pokemon<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u062f\u0631 <code>createQueries<\/code>\u060c \u0627\u0646\u0648\u0627\u0639 \u0645\u0648\u0631\u062f \u0646\u06cc\u0627\u0632 \u0628\u0631\u0627\u06cc \u062a\u0627\u06cc\u067e \u0645\u0646\u0627\u0633\u0628 \u0648 \u0646\u0627\u0645 \u0646\u0647\u0627\u062f \u0631\u0627 \u0628\u0627 \u062a\u0648\u062c\u0647 \u0628\u0647 \u0642\u0631\u0627\u0631\u062f\u0627\u062f \u067e\u0633 \u0632\u0645\u06cc\u0646\u0647 \u0645\u0646\u062a\u0642\u0644 \u0645\u06cc \u06a9\u0646\u06cc\u0645. \u0633\u067e\u0633 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u06cc\u0645 <code>pokemonQueries<\/code> \u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u0644\u0627\u0632\u0645 <code>CRUD<\/code> \u0642\u0644\u0627\u0628 \u060c \u0647\u0645\u0627\u0646\u0637\u0648\u0631 \u06a9\u0647 \u0628\u0627 <code>usePokemonList<\/code>:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight typescript\"><code><span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">useQuery<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">@tanstack\/react-query<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">pokemonQueries<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">.\/pokemon.query<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n\n<span class=\"kd\">type<\/span> <span class=\"nx\">Props<\/span> <span class=\"o\">=<\/span> <span class=\"p\">{<\/span>\n  <span class=\"na\">limit<\/span><span class=\"p\">:<\/span> <span class=\"kr\">number<\/span><span class=\"p\">;<\/span>\n  <span class=\"nl\">offset<\/span><span class=\"p\">:<\/span> <span class=\"kr\">number<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">};<\/span>\n\n<span class=\"k\">export<\/span> <span class=\"kd\">const<\/span> <span class=\"nx\">usePokemonList<\/span> <span class=\"o\">=<\/span> <span class=\"p\">({<\/span> <span class=\"nx\">limit<\/span><span class=\"p\">,<\/span> <span class=\"nx\">offset<\/span> <span class=\"p\">}:<\/span> <span class=\"nx\">Props<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n  <span class=\"k\">return<\/span> <span class=\"nf\">useQuery<\/span><span class=\"p\">({<\/span>\n    <span class=\"p\">...<\/span><span class=\"nx\">pokemonQueries<\/span><span class=\"p\">.<\/span><span class=\"nf\">read<\/span><span class=\"p\">({<\/span> <span class=\"nx\">limit<\/span><span class=\"p\">,<\/span> <span class=\"nx\">offset<\/span> <span class=\"p\">}),<\/span>\n  <span class=\"p\">});<\/span>\n<span class=\"p\">};<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0645\u0627 \u0647\u0645\u0647 \u0631\u0627 \u0628\u062f\u0633\u062a \u0645\u06cc \u0622\u0648\u0631\u06cc\u0645 <code>CRUD<\/code> \u0642\u0644\u0627\u0628 \u0647\u0627\u06cc \u0645\u0648\u0631\u062f \u0646\u06cc\u0627\u0632 \u0628\u0631\u0627\u06cc \u0628\u0631\u0646\u0627\u0645\u0647 \u060c \u06a9\u0647 \u0645\u06cc \u062a\u0648\u0627\u0646\u062f \u062f\u0631 \u0627\u062c\u0632\u0627\u06cc UI \u06cc\u0627 \u0633\u0627\u06cc\u0631 \u0644\u0627\u06cc\u0647 \u0647\u0627\u06cc \u0628\u0631\u0646\u0627\u0645\u0647 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0634\u0648\u062f. \u0627\u06cc\u0646 \u0628\u0627\u0639\u062b \u0645\u06cc \u0634\u0648\u062f \u0633\u0627\u062e\u062a\u0627\u0631 \u06a9\u062f \u0628\u06cc\u0634\u062a\u0631 \u0645\u062d\u0635\u0648\u0631 \u0648 \u0633\u0627\u0632\u06af\u0627\u0631 \u0634\u0648\u062f <code>FSD<\/code>\u0628\u0634\u0631<\/p>\n<blockquote>\n<p>\u0628\u0633\u062a\u0647 \u0628\u0647 \u062a\u0648\u0627\u0641\u0642 \u0647\u0627\u06cc \u0645\u0648\u062c\u0648\u062f \u062f\u0631 \u067e\u0631\u0648\u0698\u0647 \u062e\u0648\u062f \u060c \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u06cc\u06a9 \u06a9\u0627\u0631\u062e\u0627\u0646\u0647 \u0628\u0631\u0627\u06cc \u0642\u0644\u0627\u0628 \u0647\u0627\u06cc Crud \u0628\u0646\u0648\u06cc\u0633\u06cc\u062f \u060c \u06cc\u0627 \u0641\u0642\u0637 \u0628\u0647 \u0635\u0648\u0631\u062a \u062f\u0633\u062a\u06cc \u0641\u0642\u0637 \u0645\u0648\u0627\u0631\u062f \u0645\u0648\u0631\u062f \u0646\u06cc\u0627\u0632 \u062e\u0648\u062f \u0631\u0627 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f \u060c \u0647\u0645\u0627\u0646\u0637\u0648\u0631 \u06a9\u0647 \u0645\u0627 \u0627\u0646\u062c\u0627\u0645 \u062f\u0627\u062f\u06cc\u0645.<\/p>\n<\/blockquote>\n<h4><span class=\"ez-toc-section\" id=\"%D9%88%DB%8C%DA%98%DA%AF%DB%8C\"><\/span>\n<p>  \u0648\u06cc\u0698\u06af\u06cc<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>\u0648\u06cc\u0698\u06af\u06cc \u0647\u0627 \u0646\u0634\u0627\u0646 \u062f\u0647\u0646\u062f\u0647 \u0627\u0642\u062f\u0627\u0645\u0627\u062a \u062e\u0627\u0635 \u06a9\u0627\u0631\u0628\u0631 \u0627\u0633\u062a \u06a9\u0647 \u0627\u0631\u0632\u0634 \u06a9\u0633\u0628 \u0648 \u06a9\u0627\u0631 \u0631\u0627 \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc \u062f\u0647\u062f. \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0645\u062b\u0627\u0644 \u060c \u0648\u06cc\u0631\u0627\u06cc\u0634 \u06cc\u0627 \u0627\u06cc\u062c\u0627\u062f \u06cc\u06a9 Pokemon \u062c\u062f\u06cc\u062f. \u0627\u06cc\u0646 \u0648\u06cc\u0698\u06af\u06cc \u0647\u0627 \u0645\u06cc \u062a\u0648\u0627\u0646\u0646\u062f \u0627\u0632 \u0645\u0648\u062c\u0648\u062f\u0627\u062a \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u0646\u062f \u0648 \u062f\u0631 \u0635\u0648\u0631\u062a \u0644\u0632\u0648\u0645 \u0622\u0646\u0647\u0627 \u0631\u0627 \u062f\u0631 \u0642\u0648\u0627\u0646\u06cc\u0646 \u062a\u062c\u0627\u0631\u06cc \u0627\u0636\u0627\u0641\u06cc \u0628\u067e\u06cc\u0686\u0627\u0646\u0646\u062f.<\/p>\n<p>\u0633\u0627\u062e\u062a\u0627\u0631 \u0645\u062b\u0627\u0644 <code>create-pokemon<\/code> \u0648\u06cc\u0698\u06af\u06cc:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>src\/\n\u2514\u2500\u2500 features\/\n    \u2514\u2500\u2500 create-pokemon\/\n        \u251c\u2500\u2500 model\/\n        \u2514\u2500\u2500 ui\/\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<ul>\n<li>\n<strong>\u0645\u062f\u0644\/<\/strong>: \u0645\u0645\u06a9\u0646 \u0627\u0633\u062a \u062d\u0627\u0648\u06cc \u0642\u0644\u0627\u0628 \u06cc\u0627 \u0639\u0645\u0644\u06a9\u0631\u062f\u06cc \u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f Pokemon \u0628\u0627\u0634\u062f (\u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0645\u062b\u0627\u0644 \u060c \u0627\u0633\u062a\u0641\u0627\u062f\u0647 <code>usePokemonCreate<\/code> \u0627\u0632 <code>entities\/pokemon\/api<\/code>).<\/li>\n<li>\n<strong>UI\/<\/strong>: \u0645\u0624\u0644\u0641\u0647 \u0647\u0627\u06cc\u06cc \u06a9\u0647 \u0641\u0631\u0645 Add Pokemon \u06cc\u0627 UI \u0631\u0627 \u0628\u0631\u0627\u06cc \u062a\u0623\u06cc\u06cc\u062f \u0639\u0644\u0627\u0648\u0647 \u0628\u0631 \u0627\u06cc\u0646 \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc \u062f\u0647\u0646\u062f.\n<\/li>\n<\/ul>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight typescript\"><code><span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">usePokemonCreate<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span>\n<span class=\"dl\">'<\/span><span class=\"s1\">..\/..\/..\/entities\/pokemon\/api\/usePokemonCreate<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">CreatePokemonBody<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">..\/..\/..\/entities\/pokemon\/model\/Pokemon<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n\n<span class=\"kd\">type<\/span> <span class=\"nx\">Props<\/span> <span class=\"o\">=<\/span> <span class=\"p\">{<\/span>\n  <span class=\"na\">pokemon<\/span><span class=\"p\">:<\/span> <span class=\"nx\">CreatePokemonBody<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">};<\/span>\n\n<span class=\"k\">export<\/span> <span class=\"kd\">const<\/span> <span class=\"nx\">CreatePokemon<\/span> <span class=\"o\">=<\/span> <span class=\"p\">({<\/span> <span class=\"nx\">pokemon<\/span> <span class=\"p\">}:<\/span> <span class=\"nx\">Props<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"p\">{<\/span> <span class=\"na\">mutate<\/span><span class=\"p\">:<\/span> <span class=\"nx\">createPokemon<\/span> <span class=\"p\">}<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">usePokemonCreate<\/span><span class=\"p\">();<\/span>\n\n  <span class=\"kd\">const<\/span> <span class=\"nx\">handleCreate<\/span> <span class=\"o\">=<\/span> <span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nf\">createPokemon<\/span><span class=\"p\">({<\/span>\n      <span class=\"na\">name<\/span><span class=\"p\">:<\/span> <span class=\"nx\">pokemon<\/span><span class=\"p\">.<\/span><span class=\"nx\">name<\/span><span class=\"p\">,<\/span>\n    <span class=\"p\">});<\/span>\n  <span class=\"p\">};<\/span>\n\n  <span class=\"k\">return <\/span><span class=\"p\">(<\/span>\n    <span class=\"o\">&lt;<\/span><span class=\"nx\">button<\/span>\n      <span class=\"nx\">onClick<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">handleCreate<\/span><span class=\"p\">}<\/span>\n      <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">bg-green-500 text-white p-2 rounded hover:bg-green-600 transition-colors<\/span><span class=\"dl\">\"<\/span>\n    <span class=\"o\">&gt;<\/span>\n      <span class=\"nx\">Create<\/span> <span class=\"p\">{<\/span><span class=\"nx\">pokemon<\/span><span class=\"p\">.<\/span><span class=\"nx\">name<\/span><span class=\"p\">}<\/span>\n    <span class=\"o\">&lt;<\/span><span class=\"sr\">\/button<\/span><span class=\"err\">&gt;\n<\/span>  <span class=\"p\">);<\/span>\n<span class=\"p\">};<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0645\u0624\u0644\u0641\u0647:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight tsx\"><code><span class=\"p\">&lt;<\/span><span class=\"nc\">CreatePokemon<\/span> <span class=\"na\">pokemon<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"p\">{<\/span> <span class=\"na\">name<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">Pikachu<\/span><span class=\"dl\">'<\/span> <span class=\"p\">}<\/span><span class=\"si\">}<\/span> <span class=\"p\">\/&gt;<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<h4><span class=\"ez-toc-section\" id=\"%D9%88%DB%8C%D8%B1%D8%A7%DA%86%D9%87\"><\/span>\n<p>  \u0648\u06cc\u0631\u0627\u0686\u0647<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>\u0648\u06cc\u062c\u062a \u0647\u0627 \u0645\u0627\u0698\u0648\u0644 \u0647\u0627\u06cc UI \u0628\u0632\u0631\u06af\u062a\u0631 \u0647\u0633\u062a\u0646\u062f \u06a9\u0647 \u0645\u06cc \u062a\u0648\u0627\u0646\u0646\u062f \u0627\u0632 \u0686\u0646\u062f\u06cc\u0646 \u0648\u06cc\u0698\u06af\u06cc \u0648 \u0645\u0648\u062c\u0648\u062f\u0627\u062a \u062a\u0634\u06a9\u06cc\u0644 \u0634\u0648\u0646\u062f. \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0645\u062b\u0627\u0644 \u060c \u0627\u0644\u0641 <code>PokemonProfile<\/code> \u0648\u06cc\u062c\u062a \u0645\u0645\u06a9\u0646 \u0627\u0633\u062a \u0634\u0627\u0645\u0644 \u0644\u06cc\u0633\u062a\u06cc \u0627\u0632 \u062a\u0645\u0627\u0645 \u0633\u0631\u06cc\u0627\u0644 \u0647\u0627 \u0648 \u0628\u0627\u0632\u06cc \u0647\u0627\u06cc\u06cc \u0628\u0627\u0634\u062f \u06a9\u0647 Pokemon \u062f\u0631 \u0622\u0646 \u0638\u0627\u0647\u0631 \u0634\u062f\u0647 \u0627\u0633\u062a \u060c \u0627\u0637\u0644\u0627\u0639\u0627\u062a \u0645\u0631\u0628\u0648\u0637 \u0628\u0647 \u0645\u0634\u062e\u0635\u0627\u062a \u0622\u0646 \u0648 \u063a\u06cc\u0631\u0647.<\/p>\n<p>\u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0646\u0645\u0648\u0646\u0647 \u0645\u0641\u0635\u0644\u06cc \u0627\u0632 \u0627\u06cc\u0646 \u0631\u0648\u06cc\u06a9\u0631\u062f \u0631\u0627 \u062f\u0631 \u067e\u0631\u0648\u0698\u0647 \u0646\u0633\u062e\u0647 \u06cc \u0646\u0645\u0627\u06cc\u0634\u06cc \u067e\u06cc\u062f\u0627 \u06a9\u0646\u06cc\u062f.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"%D9%86%D8%AA%DB%8C%D8%AC%D9%87_%DA%AF%DB%8C%D8%B1%DB%8C\"><\/span>\n<p>  \u0646\u062a\u06cc\u062c\u0647 \u06af\u06cc\u0631\u06cc<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0645\u0627 \u06cc\u06a9 \u0627\u0646\u0639\u0637\u0627\u0641 \u067e\u0630\u06cc\u0631 \u0648 \u0642\u0627\u0628\u0644 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u062c\u062f\u062f \u0631\u0627 \u0627\u062c\u0631\u0627 \u06a9\u0631\u062f\u0647 \u0627\u06cc\u0645 <code>CRUD<\/code> \u0633\u06cc\u0633\u062a\u0645 \u0642\u0644\u0627\u0628 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 <code>@tanstack\/react-query<\/code> \u0648\u062a <code>axios<\/code>\u0628\u0634\u0631 \u0627\u06a9\u0646\u0648\u0646 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0628\u0647 \u0631\u0627\u062d\u062a\u06cc \u0627\u0632 \u0627\u06cc\u0646 \u0642\u0644\u0627\u0628 \u0647\u0627 \u0628\u0631\u0627\u06cc \u0647\u0631 \u0645\u0648\u062c\u0648\u062f \u062f\u0631 API \u062e\u0648\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f \u060c \u06a9\u062f \u062e\u0648\u062f \u0631\u0627 \u0628\u0647 \u0637\u0648\u0631 \u0642\u0627\u0628\u0644 \u062a\u0648\u062c\u0647\u06cc \u0633\u0627\u062f\u0647 \u06a9\u0631\u062f\u0647 \u0648 \u062e\u0648\u0627\u0646\u0627\u06cc\u06cc \u0631\u0627 \u0628\u0647\u0628\u0648\u062f \u0628\u062e\u0634\u06cc\u062f.<\/p>\n<p>\u0627\u06cc\u0646 \u0631\u0648\u0634 \u0628\u0647 \u0645\u0642\u06cc\u0627\u0633 \u0628\u0646\u062f\u06cc \u0628\u0631\u0646\u0627\u0645\u0647 \u0628\u0647 \u0631\u0627\u062d\u062a\u06cc \u0648 \u0628\u0647 \u062d\u062f\u0627\u0642\u0644 \u0631\u0633\u0627\u0646\u062f\u0646 \u06a9\u067e\u06cc \u06a9\u0631\u062f\u0646 \u06a9\u062f \u06a9\u0645\u06a9 \u0645\u06cc \u06a9\u0646\u062f. \u0645\u062a\u0642\u0627\u0636\u06cc <code>FSD<\/code> \u0627\u0635\u0648\u0644 \u0628\u0647 \u0633\u0627\u062e\u062a\u0627\u0631 \u067e\u0631\u0648\u0698\u0647 \u06a9\u0645\u06a9 \u0645\u06cc \u06a9\u0646\u062f \u0648 \u0622\u0646 \u0631\u0627 \u0645\u0642\u06cc\u0627\u0633 \u067e\u0630\u06cc\u0631 \u062a\u0631 \u0648 \u062d\u0641\u0638 \u0645\u06cc \u06a9\u0646\u062f. \u062a\u0631\u06a9\u06cc\u0628 \u0627\u06cc\u0646 \u0631\u0648\u06cc\u06a9\u0631\u062f\u0647\u0627 \u0628\u0647 \u0634\u0645\u0627 \u0627\u0645\u06a9\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f \u062a\u0627 \u0628\u0631\u0646\u0627\u0645\u0647 \u0647\u0627\u06cc \u0627\u0646\u0639\u0637\u0627\u0641 \u067e\u0630\u06cc\u0631 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f \u06a9\u0647 \u062f\u0631 \u0622\u0646 \u0645\u062f\u0648\u0644\u0627\u0631 \u0628\u0648\u062f\u0646 \u0648 \u0627\u0633\u062a\u0642\u0644\u0627\u0644 \u0645\u0624\u0644\u0641\u0647 \u060c \u067e\u0631\u0648\u0698\u0647 \u0631\u0627 \u0628\u0631\u0627\u06cc \u067e\u0634\u062a\u06cc\u0628\u0627\u0646\u06cc \u0648 \u06af\u0633\u062a\u0631\u0634 \u0622\u0633\u0627\u0646 \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<p>\u0633\u0639\u06cc \u06a9\u0646\u06cc\u062f \u0627\u06cc\u0646 \u0631\u0648\u06cc\u06a9\u0631\u062f \u0631\u0627 \u062f\u0631 \u067e\u0631\u0648\u0698\u0647 \u062e\u0648\u062f \u0628\u06af\u0646\u062c\u0627\u0646\u06cc\u062f \u060c \u0648 \u0628\u0647 \u0633\u0631\u0639\u062a \u0645\u062a\u0648\u062c\u0647 \u062e\u0648\u0627\u0647\u06cc\u062f \u0634\u062f \u06a9\u0647 \u0686\u06af\u0648\u0646\u0647 \u0645\u062f\u06cc\u0631\u06cc\u062a \u0648\u0636\u0639\u06cc\u062a \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u0631\u0627 \u0633\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u062f \u0648 \u0622\u0646 \u0631\u0627 \u062f\u0631 \u0645\u0624\u0644\u0641\u0647 \u0647\u0627\u06cc React \u0627\u062f\u063a\u0627\u0645 \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%D9%BE%DB%8C%D9%88%D9%86%D8%AF%D9%87%D8%A7%DB%8C_%D8%AC%D8%A7%D9%84%D8%A8\"><\/span>\n<p>  \u067e\u06cc\u0648\u0646\u062f\u0647\u0627\u06cc \u062c\u0627\u0644\u0628:<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<\/p><\/div>\n","protected":false},"excerpt":{"rendered":"<p>\u062f\u0631 \u062f\u0646\u06cc\u0627\u06cc \u0645\u062f\u0631\u0646 \u062a\u0648\u0633\u0639\u0647 Frontend \u060c \u0628\u0647\u06cc\u0646\u0647 \u0633\u0627\u0632\u06cc \u062f\u0627\u062f\u0647 \u0647\u0627 \u06a9\u0644\u06cc\u062f \u0627\u06cc\u062c\u0627\u062f \u0628\u0631\u0646\u0627\u0645\u0647 \u0647\u0627\u06cc \u067e\u0627\u0633\u062e\u06af\u0648 \u0648 \u0645\u0642\u06cc\u0627\u0633 \u067e\u0630\u06cc\u0631 \u0627\u0633\u062a. \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 \u0628\u0631\u0627\u06cc \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u0647\u0627\u06cc \u0646\u0627\u0647\u0645\u0632\u0645\u0627\u0646 \u060c \u0645\u0627\u0646\u0646\u062f @tanstack\/react-query \u0648\u062a axios\u060c \u06cc\u06a9 \u0633\u06cc\u0633\u062a\u0645 \u0645\u0646\u0627\u0633\u0628 \u0628\u0631\u0627\u06cc \u06a9\u0627\u0631 \u0628\u0627 \u0622\u0646 \u0641\u0631\u0627\u0647\u0645 \u0645\u06cc \u06a9\u0646\u062f REST APIs\u0628\u0627 tRPC\u060c \u06cc\u0627 GraphQL\u0628\u0634\u0631 \u062f\u0631 \u0647\u0646\u06af\u0627\u0645 \u062a\u0647\u06cc\u0647 \u0628\u0631\u0646\u0627\u0645\u0647 \u0647\u0627 \u060c \u0645\u0627 \u0627\u063a\u0644\u0628 \u0628\u0627\u06cc\u062f &hellip;<\/p>\n","protected":false},"author":2,"featured_media":107659,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"fifu_image_url":"https:\/\/media2.dev.to\/dynamic\/image\/width=1000,height=500,fit=cover,gravity=auto,format=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fa9p1p07lzer1knvu5qms.png","fifu_image_alt":"","footnotes":""},"categories":[339],"tags":[],"class_list":["post-107658","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-dev"],"_links":{"self":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts\/107658","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/comments?post=107658"}],"version-history":[{"count":0,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts\/107658\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media\/107659"}],"wp:attachment":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media?parent=107658"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/categories?post=107658"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/tags?post=107658"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}