{"id":1720,"date":"2024-10-05T22:12:52","date_gmt":"2024-10-05T15:12:52","guid":{"rendered":"https:\/\/fstack.io.vn\/?p=1720"},"modified":"2024-10-20T12:10:43","modified_gmt":"2024-10-20T05:10:43","slug":"react-query-la-gi-tai-sao-nen-dung-react-query","status":"publish","type":"post","link":"https:\/\/fstack.io.vn\/blog\/react-query-la-gi-tai-sao-nen-dung-react-query\/","title":{"rendered":"React-query l\u00e0 g\u00ec ? T\u1ea1i sao n\u00ean s\u1eed d\u1ee5ng react-query ?"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"1720\" class=\"elementor elementor-1720\" data-elementor-post-type=\"post\">\n\t\t\t\t<div class=\"elementor-element elementor-element-0688a97 e-flex e-con-boxed e-con e-parent\" data-id=\"0688a97\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-a9fbbbf elementor-widget elementor-widget-text-editor\" data-id=\"a9fbbbf\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Th\u00f4ng th\u01b0\u1eddng trong ReactJs ta\u00a0<span style=\"color: #1b1b1b; font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; font-size: 18px; letter-spacing: -0.054px; font-weight: var( --e-global-typography-text-font-weight ); text-align: var(--text-align); font-style: var(--postx_preset_Body_and_Others_typo_font_style); text-transform: var(--postx_preset_Body_and_Others_typo_text_transform); background-color: var(--postx_preset_base_1_color);\">c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng useEffect \u0111\u1ec3 fetch data t\u1eeb api,\u00a0 nh\u01b0ng t\u1ea1i <a href=\"https:\/\/fstack.io.vn\/blog\/10-the-meta-ma-ban-nen-biet-khi-lam-seo-website\/\">sao<\/a> b\u1ea1n th\u1ea5y c\u0169ng c\u00f3 m\u1ed9t v\u00e0i d\u1ef1 \u00e1n ng\u01b0\u1eddi ta l\u1ea1i kh\u00f4ng s\u1eed d\u1ee5ng\u00a0<\/span><span style=\"color: #1b1b1b; font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; font-size: 18px; letter-spacing: -0.054px; font-weight: var( --e-global-typography-text-font-weight ); text-align: var(--text-align); font-style: var(--postx_preset_Body_and_Others_typo_font_style); text-transform: var(--postx_preset_Body_and_Others_typo_text_transform); background-color: var(--postx_preset_base_1_color);\">useEffect v\u00e0 thay v\u00e0o \u0111\u00f3 l\u00e0 s\u1eed d\u1ee5ng react-query (hay TanStack Query<\/span><span style=\"background-color: var(--postx_preset_base_1_color); color: #1b1b1b; font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; font-size: 18px; font-style: var(--postx_preset_Body_and_Others_typo_font_style); font-weight: var( --e-global-typography-text-font-weight ); letter-spacing: -0.054px; text-align: var(--text-align); text-transform: var(--postx_preset_Body_and_Others_typo_text_transform);\">) ? B\u00e0i vi\u1ebft n\u00e0y ch\u00fang t\u00f4i s\u1ebd gi\u00fap b\u1ea1n gi\u1ea3i m\u00e3 th\u1eafc m\u1eafc \u0111\u00f3.<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-7b0ddcd e-con-full e-flex e-con e-child\" data-id=\"7b0ddcd\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5329475 elementor-widget elementor-widget-heading\" data-id=\"5329475\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_82_2 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Danh m\u1ee5c b\u00e0i vi\u1ebft<\/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:\/\/fstack.io.vn\/blog\/react-query-la-gi-tai-sao-nen-dung-react-query\/#React-query_la_gi\" >React-query l\u00e0 g\u00ec?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/fstack.io.vn\/blog\/react-query-la-gi-tai-sao-nen-dung-react-query\/#Tai_sao_lai_dung_react-query_thay_vi_useEffect\" >T\u1ea1i sao l\u1ea1i d\u00f9ng react-query thay v\u00ec useEffect ?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/fstack.io.vn\/blog\/react-query-la-gi-tai-sao-nen-dung-react-query\/#Su_dung_react-query_tanstack-query\" >S\u1eed d\u1ee5ng react-query (tanstack-query)<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/fstack.io.vn\/blog\/react-query-la-gi-tai-sao-nen-dung-react-query\/#useQuery\" >useQuery<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/fstack.io.vn\/blog\/react-query-la-gi-tai-sao-nen-dung-react-query\/#useMutation\" >useMutation<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/fstack.io.vn\/blog\/react-query-la-gi-tai-sao-nen-dung-react-query\/#Co_che_caching\" >C\u01a1 ch\u1ebf caching<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/fstack.io.vn\/blog\/react-query-la-gi-tai-sao-nen-dung-react-query\/#Tong_ket\" >T\u1ed5ng k\u1ebft<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"elementor-heading-title elementor-size-default\"><span class=\"ez-toc-section\" id=\"React-query_la_gi\"><\/span>React-query l\u00e0 g\u00ec?<span class=\"ez-toc-section-end\"><\/span><\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9b1a7a1 elementor-widget elementor-widget-text-editor\" data-id=\"9b1a7a1\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"color: #1b1b1b; font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; font-size: 18px; letter-spacing: -0.054px;\">\u0110\u01a1n gi\u1ea3n th\u00ec react-query (hay\u00a0<\/span><span style=\"color: #1b1b1b; font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; font-size: 18px; letter-spacing: -0.054px; font-weight: var( --e-global-typography-text-font-weight ); text-align: var(--text-align); font-style: var(--postx_preset_Body_and_Others_typo_font_style); text-transform: var(--postx_preset_Body_and_Others_typo_text_transform); background-color: var(--postx_preset_base_1_color);\">TanStack Query<\/span><span style=\"color: #1b1b1b; font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; font-size: 18px; letter-spacing: -0.054px; font-style: var(--postx_preset_Body_and_Others_typo_font_style); font-weight: var(--postx_preset_Body_and_Others_typo_font_weight); text-transform: var(--postx_preset_Body_and_Others_typo_text_transform); text-align: var(--text-align); background-color: var(--postx_preset_base_1_color);\">) l\u00e0 th\u01b0 vi\u1ec7n h\u1ed7 tr\u1ee3 fetching, caching v\u00e0 updating d\u1eef li\u1ec7u b\u1ea5t \u0111\u1ed3ng b\u1ed9 c\u1ee7a <a href=\"https:\/\/fstack.io.vn\/blog\/react-hook-form-1-giai-phap-hieu-qua-de-quan-ly-form\/\">react<\/a>.<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0946282 elementor-widget elementor-widget-heading\" data-id=\"0946282\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\"><span class=\"ez-toc-section\" id=\"Tai_sao_lai_dung_react-query_thay_vi_useEffect\"><\/span>T\u1ea1i sao l\u1ea1i d\u00f9ng react-query thay v\u00ec useEffect ?<span class=\"ez-toc-section-end\"><\/span><\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-fa5ec35 elementor-widget elementor-widget-text-editor\" data-id=\"fa5ec35\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Th\u00f4ng th\u01b0\u1eddng trong react \u0111\u1ec3 fetch d\u1eef li\u1ec7u t\u1eeb server th\u00ec ta hay d\u00f9ng useEffect.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5ddfeac elementor-widget elementor-widget-code-highlight\" data-id=\"5ddfeac\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>const MyComponent = () => {\r\n\tconst [data, setData] = useState(null);\r\n    \r\n    useEffect(() => {\r\n\t\tconst _fetch = async () => {\r\n\t\t\tconst res = await fetch(\"https:\/\/fstack.io.vn\/api\").then(response => response.json);\r\n            setData(response)\r\n\t\t}\r\n        \r\n        _fetch()\r\n\t},[])\r\n    \r\n    return (\r\n\t\t\/\/ Some JSX here\r\n\t)\r\n}\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-37a9880 elementor-widget elementor-widget-text-editor\" data-id=\"37a9880\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"color: #1b1b1b; font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; font-size: 18px; letter-spacing: -0.054px;\">C\u00e1ch n\u00e0y ho\u1ea1t \u0111\u1ed9ng kh\u00e1 \u1ed5n, tuy nhi\u00ean r\u1ea5t r\u01b0\u1eddm r\u00e0. B\u1ea1n s\u1ebd ph\u1ea3i vi\u1ebft 1 \u0111\u1ed1ng code ch\u1ec9 \u0111\u1ec3 l\u1ea5y d\u1eef li\u1ec7u t\u1eeb server.<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f5f382a elementor-widget elementor-widget-heading\" data-id=\"f5f382a\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\"><span class=\"ez-toc-section\" id=\"Su_dung_react-query_tanstack-query\"><\/span>S\u1eed d\u1ee5ng react-query (tanstack-query)<span class=\"ez-toc-section-end\"><\/span><\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b71ef73 elementor-widget elementor-widget-text-editor\" data-id=\"b71ef73\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><b>react-query<\/b> cung c\u1ea5p nhi\u1ec1u hooks c\u1ef1c k\u00ec \u0111\u01a1n gi\u1ea3n \u0111\u1ec3 fetch c\u0169ng nh\u01b0 update data . H\u1ed7 tr\u1ee3 caching, refetching gi\u00fap c\u1ea3i thi\u1ec7n trang Web c\u1ee7a b\u1ea1n.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e19fd7c elementor-widget elementor-widget-text-editor\" data-id=\"e19fd7c\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"color: #1b1b1b; font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; font-size: 18px; letter-spacing: -0.054px;\">\u0110\u1ea7u ti\u00ean ta s\u1ebd t\u00ecm hi\u1ec3u c\u00e1ch \u0111\u1ec3 fetch d\u1eef li\u1ec7u s\u1eed d\u1ee5ng <b>useQuery<\/b>.<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4976e5d elementor-widget elementor-widget-heading\" data-id=\"4976e5d\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\"><span class=\"ez-toc-section\" id=\"useQuery\"><\/span>useQuery<span class=\"ez-toc-section-end\"><\/span><\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-00201a3 elementor-widget elementor-widget-text-editor\" data-id=\"00201a3\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Th\u00f4ng th\u01b0\u1eddng useQuery th\u01b0\u1eddng \u0111\u01b0\u1ee3c d\u00f9ng \u0111\u1ec3 l\u1ea5y d\u1eef li\u1ec7u (Get).<\/p><p><span style=\"color: #1b1b1b; font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; font-size: 18px; letter-spacing: -0.054px;\">\u0110\u1ec3 s\u1eed d\u1ee5ng hook\u00a0<\/span><span style=\"font-family: var( --e-global-typography-text-font-family ), Sans-serif; text-align: var(--text-align); font-size: var(--postx_preset_body_typo_font_size_lg, initial); font-style: var(--postx_preset_Body_and_Others_typo_font_style); letter-spacing: var(--postx_preset_Body_and_Others_typo_letter_spacing_lg, normal); text-transform: var(--postx_preset_Body_and_Others_typo_text_transform); background-color: var(--postx_preset_base_1_color);\">useQuery<\/span><span style=\"font-style: var(--postx_preset_Body_and_Others_typo_font_style); font-weight: var(--postx_preset_Body_and_Others_typo_font_weight); text-transform: var(--postx_preset_Body_and_Others_typo_text_transform); text-align: var(--text-align); background-color: var(--postx_preset_base_1_color); color: #1b1b1b; font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; font-size: 18px; letter-spacing: -0.054px;\">\u00a0<\/span><span style=\"font-style: var(--postx_preset_Body_and_Others_typo_font_style); font-weight: var(--postx_preset_Body_and_Others_typo_font_weight); text-transform: var(--postx_preset_Body_and_Others_typo_text_transform); text-align: var(--text-align); background-color: var(--postx_preset_base_1_color); color: #1b1b1b; font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; font-size: 18px; letter-spacing: -0.054px;\">, ta ph\u1ea3i truy\u1ec1n \u00edt nh\u1ea5t 2 tham s\u1ed1:<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ff3a4c1 elementor-icon-list--layout-traditional elementor-list-item-link-full_width elementor-widget elementor-widget-icon-list\" data-id=\"ff3a4c1\" data-element_type=\"widget\" data-widget_type=\"icon-list.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<ul class=\"elementor-icon-list-items\">\n\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-icon\">\n\t\t\t\t\t\t\t<i aria-hidden=\"true\" class=\"fas fa-circle\"><\/i>\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">Tham s\u1ed1 \u0111\u1ea7u ti\u00ean l\u00e0 queryKey<\/span>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-icon\">\n\t\t\t\t\t\t\t<i aria-hidden=\"true\" class=\"fas fa-circle\"><\/i>\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">Tham s\u1ed1 th\u1ee9 2 l\u00e0 h\u00e0m tr\u1ea3 v\u1ec1 1 promise: Resolve data, ho\u1eb7c Throw error<\/span>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-icon\">\n\t\t\t\t\t\t\t<i aria-hidden=\"true\" class=\"fas fa-circle\"><\/i>\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">Tham s\u1ed1 th\u1ee9 3 l\u00e0 c\u00e1c options (ta s\u1ebd t\u00ecm hi\u1ec3u \u1edf b\u00ean d\u01b0\u1edbi).<\/span>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t<\/ul>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9a4970e elementor-widget elementor-widget-text-editor\" data-id=\"9a4970e\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"color: #1b1b1b; font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; font-size: 18px; letter-spacing: -0.054px;\">queryKey<\/span><span style=\"color: #1b1b1b; font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; font-size: 18px; letter-spacing: -0.054px;\">\u00a0\u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng \u0111\u1ec3 refetching, caching v\u00e0 chia s\u1ebb d\u1eef li\u1ec7u gi\u1eefa c\u00e1c component v\u1edbi nhau.<\/span><\/p><p><span style=\"color: #1b1b1b; font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; font-size: 18px; letter-spacing: -0.054px;\">Sau \u0111\u00e2y t\u00f4i s\u1ebd c\u00f3 1 v\u00ed d\u1ee5 s\u1eed d\u1ee5ng useQuery<\/span><span style=\"color: #1b1b1b; font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; font-size: 18px; letter-spacing: -0.054px;\">\u00a0c\u01a1 b\u1ea3n:<\/span><span style=\"color: #1b1b1b; font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; font-size: 18px; letter-spacing: -0.054px;\"><br \/><\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8fb286b elementor-widget elementor-widget-code-highlight\" data-id=\"8fb286b\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>\r\nconst Example=()=> {\r\n  const { isPending, error, data } = useQuery({\r\n    queryKey: ['todos'],\r\n    queryFn: () =>\r\n      fetch('https:\/\/fstack.io.vn\/api').then((res) =>\r\n        res.json(),\r\n      ),\r\n  })\r\n\r\n  if (isPending) return 'Loading...'\r\n\r\n  if (error) return 'An error has occurred: ' \r\n  return (\r\n   \t\t\/\/ Some JSX here\r\n  )\r\n}\r\n\r\nexport default Example<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f2ffe0f elementor-widget elementor-widget-text-editor\" data-id=\"f2ffe0f\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"color: #1b1b1b; font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; font-size: 18px; letter-spacing: -0.054px;\">useQuery tr\u1ea3 v\u1ec1 nh\u1eefng th\u00f4ng tin c\u1ea7n thi\u1ebft nh\u01b0 <span style=\"font-style: italic;\">data<\/span><b style=\"font-style: italic;\"> , <\/b><span style=\"font-style: italic;\">isLoading<\/span><b style=\"font-style: italic;\"> <\/b>hay<b style=\"font-style: italic;\"> <\/b><span style=\"font-style: italic;\">isError<\/span><b style=\"font-style: italic;\"> <\/b><span style=\"font-style: italic;\">.<\/span><\/span><span style=\"color: #1b1b1b; font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; font-size: 18px; letter-spacing: -0.054px;\">(B\u1ea1n c\u00f3 th\u1ec3 xem th\u00eam m\u1ed9t s\u1ed1 th\u00f4ng tin kh\u00e1c\u00a0<\/span><a style=\"color: #2b6dad; background-color: #ffffff; font-family: &#039;Open Sans&#039;, -apple-system, BlinkMacSystemFont, &#039;Segoe UI&#039;, &#039;Helvetica Neue&#039;, Arial, sans-serif, &#039;Apple Color Emoji&#039;, &#039;Segoe UI Emoji&#039;, &#039;Segoe UI Symbol&#039;; font-size: 18px; letter-spacing: -0.054px;\" href=\"https:\/\/react-query-v3.tanstack.com\/guides\/queries#query-basics\" target=\"_blank\" rel=\"noopener nofollow\">\u1edf \u0111\u00e2y<\/a><span style=\"color: #1b1b1b; font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; font-size: 18px; letter-spacing: -0.054px;\">)<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d34badb elementor-widget elementor-widget-heading\" data-id=\"d34badb\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\"><span class=\"ez-toc-section\" id=\"useMutation\"><\/span>useMutation<span class=\"ez-toc-section-end\"><\/span><\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b055624 elementor-widget elementor-widget-text-editor\" data-id=\"b055624\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"color: #1b1b1b; font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; font-size: 18px; letter-spacing: -0.054px;\">useMutation kh\u00e1c v\u1edbi useQuery,<\/span><span style=\"color: #1b1b1b; font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; font-size: 18px; letter-spacing: -0.054px;\">\u00a0\u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng \u0111\u1ec3 t\u1ea1o,thay \u0111\u1ed5i ho\u1eb7c x\u00f3a d\u1eef li\u1ec7u.<\/span><\/p><p><span style=\"color: #1b1b1b; font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; font-size: 18px; letter-spacing: -0.054px;\">\u0110\u1ec3 s\u1eed d\u1ee5ng hook\u00a0<\/span><span style=\"color: #1b1b1b; font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; font-size: 18px; letter-spacing: -0.054px; font-weight: var( --e-global-typography-text-font-weight ); text-align: var(--text-align); font-style: var(--postx_preset_Body_and_Others_typo_font_style); text-transform: var(--postx_preset_Body_and_Others_typo_text_transform); background-color: var(--postx_preset_base_1_color);\">useMutation,<\/span><span style=\"font-style: var(--postx_preset_Body_and_Others_typo_font_style); font-weight: var(--postx_preset_Body_and_Others_typo_font_weight); text-transform: var(--postx_preset_Body_and_Others_typo_text_transform); text-align: var(--text-align); background-color: var(--postx_preset_base_1_color); color: #1b1b1b; font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; font-size: 18px; letter-spacing: -0.054px;\">\u00a0ta ph\u1ea3i truy\u1ec1n \u00edt nh\u1ea5t 1 tham s\u1ed1:<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1bdc3a0 elementor-icon-list--layout-traditional elementor-list-item-link-full_width elementor-widget elementor-widget-icon-list\" data-id=\"1bdc3a0\" data-element_type=\"widget\" data-widget_type=\"icon-list.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<ul class=\"elementor-icon-list-items\">\n\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-icon\">\n\t\t\t\t\t\t\t<i aria-hidden=\"true\" class=\"fas fa-circle\"><\/i>\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">Tham s\u1ed1 th\u1ee9 nh\u1ea5t l\u00e0 h\u00e0m tr\u1ea3 v\u1ec1 1 promise: Resolve data ho\u1eb7c Throw error.<\/span>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-icon\">\n\t\t\t\t\t\t\t<i aria-hidden=\"true\" class=\"fas fa-circle\"><\/i>\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">Tham s\u1ed1 th\u1ee9 2 l\u00e0 c\u00e1c options.<\/span>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t<\/ul>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1d18d0c elementor-widget elementor-widget-code-highlight\" data-id=\"1d18d0c\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>function App() {\r\n   const mutation = useMutation(newTodo => {\r\n     return <a href=\"https:\/\/fstack.io.vn\/blog\/axios-la-gi-cach-su-dung-aios-trong-1-du-an-react\/\">axios<\/a>.post('\/todos', newTodo)\r\n   })\r\n \r\n   return (\r\n     <div>\r\n       {mutation.isLoading ? (\r\n         'Adding todo...'\r\n       ) : (\r\n         <>\r\n           {mutation.isError ? (\r\n             <div>An error occurred: {mutation.error.message}<\/div>\r\n           ) : null}\r\n \r\n           {mutation.isSuccess ? <div>Todo added!<\/div> : null}\r\n \r\n           <button\r\n             onClick={() => {\r\n               mutation.mutate({ id: new Date(), title: 'Do Laundry' })\r\n             }}\r\n           >\r\n             Create Todo\r\n           <\/button>\r\n         <\/>\r\n       )}\r\n     <\/div>\r\n   )\r\n }\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-16f981f elementor-widget elementor-widget-text-editor\" data-id=\"16f981f\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p style=\"margin-top: 1.5em; margin-bottom: 0px; font-weight: 400; letter-spacing: -0.003em; font-size: 18px; word-break: break-word; overflow-wrap: break-word; color: #1b1b1b; font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; text-transform: none; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;\"><span style=\"font-style: normal;\">C\u0169ng nh\u01b0 useQuery, useMutation c\u0169ng tr\u1ea3 v\u1ec1 nh\u1eefng th\u00f4ng tin c\u1ea7n thi\u1ebft nh\u01b0 <\/span><i>isLoadding<\/i><span style=\"font-style: normal;\"> hay <\/span><i>isError<\/i>.\u00a0(B\u1ea1n c\u00f3 th\u1ec3 xem th\u00eam m\u1ed9t s\u1ed1 th\u00f4ng tin kh\u00e1c\u00a0<a style=\"font-style: normal; color: #2b6dad;\" href=\"https:\/\/react-query-v3.tanstack.com\/guides\/mutations\" target=\"_blank\" rel=\"noopener nofollow\">\u1edf \u0111\u00e2y<\/a>).<\/p><p style=\"margin-top: 1.5em; margin-bottom: 0px; font-weight: 400; letter-spacing: -0.003em; word-break: break-word; overflow-wrap: break-word; color: #1b1b1b; font-style: normal; text-transform: none; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;\"><span style=\"font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; font-size: 18px;\">Tuy nhi\u00ean,\u00a0 useMutation<\/span> <span style=\"font-family: Open Sans, -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;\"><span style=\"font-size: 18px;\">l\u1ea1i tr\u1ea3 v\u1ec1 mutate\u00a0<\/span><\/span><span style=\"font-family: Open Sans, -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;\"><span style=\"font-size: 18px;\">thay v\u00ec data\u00a0<\/span><\/span><span style=\"font-family: Open Sans, -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;\"><span style=\"font-size: 18px;\">(nh\u01b0 v\u00ed d\u1ee5 tr\u00ean). Khi g\u1ecdi h\u00e0m mutate\u00a0<\/span><\/span><span style=\"font-family: Open Sans, -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;\"><span style=\"font-size: 18px;\">th\u00ec h\u00e0m s\u1ed1 \u0111\u1ea7u ti\u00ean c\u1ee7a useMutation\u00a0<\/span><\/span><span style=\"font-family: Open Sans, -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;\"><span style=\"font-size: 18px;\">s\u1ebd \u0111\u01b0\u1ee3c g\u1ecdi.<\/span><\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-25b7d6d elementor-widget elementor-widget-heading\" data-id=\"25b7d6d\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\"><span class=\"ez-toc-section\" id=\"Co_che_caching\"><\/span>C\u01a1 ch\u1ebf caching<span class=\"ez-toc-section-end\"><\/span><\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-fca9899 elementor-widget elementor-widget-text-editor\" data-id=\"fca9899\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Tr\u01b0\u1edbc ti\u1ec1n b\u1ea1n ph\u1ea3i n\u1eafm \u0111\u01b0\u1ee3c m\u1ed9t s\u1ed1 l\u00ed thuy\u1ebft quan tr\u1ecdng :<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5727fe5 elementor-icon-list--layout-traditional elementor-list-item-link-full_width elementor-widget elementor-widget-icon-list\" data-id=\"5727fe5\" data-element_type=\"widget\" data-widget_type=\"icon-list.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<ul class=\"elementor-icon-list-items\">\n\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-icon\">\n\t\t\t\t\t\t\t<i aria-hidden=\"true\" class=\"fas fa-circle\"><\/i>\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">StaleTime: (default 0 ms)  th\u1eddi gian data \u0111\u01b0\u1ee3c cho l\u00e0 \u0111\u00e3 c\u0169. Khi get data xong th\u00f2 sau m\u1ed9t th\u1eddi gian b\u1ea1n quy \u0111\u1ecbnh th\u00ec data n\u00f3 s\u1ebd t\u1ef1 c\u0169.(t\u1ef1 set th\u00f4ng qua :staleTime).<\/span>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-icon\">\n\t\t\t\t\t\t\t<i aria-hidden=\"true\" class=\"fas fa-circle\"><\/i>\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">CacheTime: (default l\u00e0 5*60*1000 ms t\u1ee9c l\u00e0 5 ph\u00fat) th\u1eddi gian data s\u1ebd b\u1ecb x\u00f3a ra kh\u1ecfi b\u1ed9 nh\u1edb \u0111\u1ec7m. C\u00f3 th\u1ec3 data \u0111\u00e3 c\u0169  nh\u01b0ng n\u00f3 ch\u01b0a b\u1ecb x\u00f3a kh\u1ecfi b\u1ed9 nh\u1edb \u0111\u1ec7m v\u00ec b\u1ea1n set \"staleTime &lt; cacheTime\". Th\u01b0\u1eddng th\u00ec ng\u01b0\u1eddi ta s\u1ebd set \"staleTime &lt; cacheTime\". <\/span>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t<\/ul>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-2de783d e-con-full e-flex e-con e-child\" data-id=\"2de783d\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-bed5bbf elementor-widget elementor-widget-text-editor\" data-id=\"bed5bbf\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>T\u00f4i c\u00f3 m\u1ed9t v\u00ed d\u1ee5 \u0111\u01a1n gi\u1ea3n v\u1ec1 ch\u1ee9c n\u0103ng ph\u00e2n trang:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f23df9b elementor-widget elementor-widget-code-highlight\" data-id=\"f23df9b\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>\r\nconst Home = () => {\r\n    const pagination = useQueryString();\r\n\r\n    const { data } = useQuery({\r\n        queryKey: [\"products\", pagination.page],\r\n        queryFn: () =>\r\n            getProductService(\r\n                +pagination.page ? +pagination.page : 1,\r\n                +pagination.pageSize ? +pagination.pageSize : 4\r\n            ),\r\n    });\r\n\r\n    return (\r\n        <MainHome>\r\n            <Box w={\"100%\"} marginBottom={\"20px\"}>\r\n                {data?.items && data?.items && (\r\n                    <Products data={data?.items} \/>\r\n                )}\r\n            <\/Box>\r\n\r\n            {data?.meta.totalIteams && (\r\n                <Pagination\r\n                    currentPage={\r\n                        data.meta.currentPage\r\n                            ? data.meta.currentPage\r\n                            : 0\r\n                    }\r\n                    listPage={Array.from(\r\n                        {\r\n                            length: data.meta.totalPages\r\n                                ? data.meta.totalPages\r\n                                : 1,\r\n                        },\r\n                        (_, index) => index + 1\r\n                    )}\r\n                \/>\r\n            )}\r\n        <\/MainHome>\r\n    );\r\n};\r\n\r\nexport default Home;<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1218a4b elementor-widget elementor-widget-image\" data-id=\"1218a4b\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img fetchpriority=\"high\" decoding=\"async\" width=\"800\" height=\"291\" src=\"https:\/\/fstack.io.vn\/blog\/wp-content\/uploads\/2024\/10\/vd_sofa-1024x373.png\" class=\"attachment-large size-large wp-image-1839\" alt=\"v\u00ed d\u1ee5 v\u1ec1 c\u01a1 ch\u1ebf cache trong react-query\" srcset=\"https:\/\/fstack.io.vn\/blog\/wp-content\/uploads\/2024\/10\/vd_sofa-1024x373.png 1024w, https:\/\/fstack.io.vn\/blog\/wp-content\/uploads\/2024\/10\/vd_sofa-300x109.png 300w, https:\/\/fstack.io.vn\/blog\/wp-content\/uploads\/2024\/10\/vd_sofa-768x280.png 768w, https:\/\/fstack.io.vn\/blog\/wp-content\/uploads\/2024\/10\/vd_sofa-1536x560.png 1536w, https:\/\/fstack.io.vn\/blog\/wp-content\/uploads\/2024\/10\/vd_sofa.png 1913w\" sizes=\"(max-width: 800px) 100vw, 800px\" title=\"\">\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8f276cc elementor-widget elementor-widget-text-editor\" data-id=\"8f276cc\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Khi b\u1ea1n chuy\u1ec3n sang page 2 th\u00ec n\u00f3 s\u1ebd g\u1ecdi api \u0111\u1ec3 l\u1ea5y data \u1edf page 2 v\u00e0 data \u0111\u00f3 n\u00f3 s\u1ebd tr\u1edf th\u00e0nh data c\u0169 (do t\u00f4i \u0111\u1ec3 m\u1eb7c \u0111\u1ecbnh staleTime l\u00e0 0ms) v\u00e0 \u0111\u01b0\u1ee3c l\u01b0u \u1edf b\u1ed9 nh\u1edb \u0111\u1ec7m sau 5 ph\u00fat m\u1edbi b\u1ecb x\u00f3a \u0111i (m\u1eb7c \u0111\u1ecbnh l\u00e0 5 ph\u00fat n\u1ebfu ta kh\u00f4ng set\u00a0<span style=\"color: #54595f; white-space-collapse: preserve; font-family: var( --e-global-typography-text-font-family ), Sans-serif; font-weight: var( --e-global-typography-text-font-weight ); text-align: var(--text-align); font-size: var(--postx_preset_body_typo_font_size_lg, initial); font-style: var(--postx_preset_Body_and_Others_typo_font_style); letter-spacing: var(--postx_preset_Body_and_Others_typo_letter_spacing_lg, normal); text-transform: var(--postx_preset_Body_and_Others_typo_text_transform); background-color: var(--postx_preset_base_1_color);\">CacheTime<\/span><span style=\"color: var(--postx_preset_contrast_2_color); font-family: var(--postx_preset_Body_and_Others_typo_font_family),var(--postx_preset_Body_and_Others_typo_font_family_type); font-size: var(--postx_preset_body_typo_font_size_lg, initial); font-style: var(--postx_preset_Body_and_Others_typo_font_style); font-weight: var(--postx_preset_Body_and_Others_typo_font_weight); letter-spacing: var(--postx_preset_Body_and_Others_typo_letter_spacing_lg, normal); text-transform: var(--postx_preset_Body_and_Others_typo_text_transform); text-align: var(--text-align); background-color: var(--postx_preset_base_1_color);\">).(v\u00e0 data page 1 c\u0169ng t\u01b0\u01a1ng t\u1ef1.)<\/span><\/p><p>Do \u0111\u00f3 khi ta tr\u1edf l\u1ea1i page 1 th\u00ec data c\u1ee7a page 1 v\u1eabn c\u00f2n \u0111\u01b0\u1ee3c l\u01b0u trong b\u1ed9 nh\u1edb (n\u1ebfu th\u1eddi gian &lt; 5 ph\u00fat) th\u00ec thay v\u00ec \u0111\u1ee3i api tr\u1ea3 d\u1eef li\u1ec7u m\u1edbi v\u1ec1 n\u00f3 s\u1ebd l\u1ea5y d\u1eef li\u1ec7u page 1 \u0111\u00e3 g\u1ecdi tr\u01b0\u1edbc \u0111\u00f3 \u0111\u1ec3 render tr\u01b0\u1edbc v\u00e0 v\u1eabn g\u1ecdi api ng\u1ea7m \u0111\u1ec3 l\u1ea5y d\u1eef li\u1ec7u m\u1edbi , n\u1ebfu d\u1eef li\u1ec7u m\u1edbi c\u00f3 s\u1ef1 thay \u0111\u1ed5i so v\u1edbi d\u1eef li\u1ec7u c\u0169 n\u00f3 s\u1ebd \u0111\u01b0\u1ee3c c\u1eadp nh\u1eadt l\u1ea1i data \u0111\u1ec3 render t\u1eeb \u0111\u00f3 gi\u00fap c\u1ea3i thi\u1ec7n UI v\u00e0 UX.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-08be7bd elementor-widget elementor-widget-image\" data-id=\"08be7bd\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"800\" height=\"312\" src=\"https:\/\/fstack.io.vn\/blog\/wp-content\/uploads\/2024\/10\/Screenshot-2024-10-07-224121-1024x399.png\" class=\"attachment-large size-large wp-image-1838\" alt=\"v\u00ed d\u1ee5 v\u1ec1 c\u01a1 ch\u1ebf cache trong react-query\" srcset=\"https:\/\/fstack.io.vn\/blog\/wp-content\/uploads\/2024\/10\/Screenshot-2024-10-07-224121-1024x399.png 1024w, https:\/\/fstack.io.vn\/blog\/wp-content\/uploads\/2024\/10\/Screenshot-2024-10-07-224121-300x117.png 300w, https:\/\/fstack.io.vn\/blog\/wp-content\/uploads\/2024\/10\/Screenshot-2024-10-07-224121-768x300.png 768w, https:\/\/fstack.io.vn\/blog\/wp-content\/uploads\/2024\/10\/Screenshot-2024-10-07-224121-1536x599.png 1536w, https:\/\/fstack.io.vn\/blog\/wp-content\/uploads\/2024\/10\/Screenshot-2024-10-07-224121.png 1892w\" sizes=\"(max-width: 800px) 100vw, 800px\" title=\"\">\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0c7fd19 elementor-widget elementor-widget-heading\" data-id=\"0c7fd19\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\"><span class=\"ez-toc-section\" id=\"Tong_ket\"><\/span>T\u1ed5ng k\u1ebft<span class=\"ez-toc-section-end\"><\/span><\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-abe46d0 elementor-widget elementor-widget-text-editor\" data-id=\"abe46d0\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"color: #1b1b1b; font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; font-size: 18px; letter-spacing: -0.054px;\">T\u1ed5ng k\u1ebft l\u1ea1i th\u00ec react-query l\u00e0 m\u1ed9t th\u01b0 vi\u1ec7n r\u1ea5t \u0111\u00e1ng \u0111\u1ec3 th\u1eed, c\u00f2n r\u1ea5t nhi\u1ec1u t\u00ednh n\u0103ng hay c\u1ee7a react-query m\u00e0 m\u00ecnh ch\u01b0a \u0111\u1ec1 c\u1eadp t\u1edbi, b\u1ea1n c\u00f3 th\u1ec3 xem docs c\u1ee7a react-query (tanstack-query) \u1edf \u0111\u00e2y:<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-714970c elementor-icon-list--layout-traditional elementor-list-item-link-full_width elementor-widget elementor-widget-icon-list\" data-id=\"714970c\" data-element_type=\"widget\" data-widget_type=\"icon-list.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<ul class=\"elementor-icon-list-items\">\n\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"https:\/\/tanstack.com\/query\/latest\/docs\/framework\/react\/overview\" rel=\"nofollow noopener\" target=\"_blank\">\n\n\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-icon\">\n\t\t\t\t\t\t\t<i aria-hidden=\"true\" class=\"fas fa-circle\"><\/i>\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">Docs<\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"https:\/\/github.com\/TanStack\/query\" rel=\"nofollow noopener\" target=\"_blank\">\n\n\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-icon\">\n\t\t\t\t\t\t\t<i aria-hidden=\"true\" class=\"fas fa-circle\"><\/i>\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">Github<\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t<\/ul>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-30c655f elementor-widget elementor-widget-text-editor\" data-id=\"30c655f\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"color: rgb(27, 27, 27); font-family: &quot;Open Sans&quot;, -apple-system, BlinkMacSystemFont, &quot;Segoe UI&quot;, &quot;Helvetica Neue&quot;, Arial, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;; font-size: 18px; letter-spacing: -0.054px;\">\u1ede tr\u00ean l\u00e0 1 s\u1ed1 chia s\u1ebb v\u1ec1 react-query c\u1ee7a m\u00ecnh, v\u00ec \u0111\u00e2y \u0111a ph\u1ea7n l\u00e0 ki\u1ebfn th\u1ee9c m\u00ecnh t\u1ef1 h\u1ecdc n\u00ean c\u00f3 th\u1ec3 b\u00e0i vi\u1ebft n\u00e0y c\u00f3 th\u1ec3 c\u00f3 nhi\u1ec1u ch\u1ed7 ch\u01b0a ch\u00ednh x\u00e1c v\u00e0 thi\u1ebfu s\u00f3t, mong m\u1ecdi ng\u01b0\u1eddi g\u00f3p \u00fd \u1edf d\u01b0\u1edbi ph\u1ea7n b\u00ecnh lu\u1eadn \u0111\u1ec3 b\u00e0i vi\u1ebft th\u00eam ho\u00e0n ch\u1ec9nh v\u00e0 x\u00e2y d\u1ef1ng m\u1ed9t c\u1ed9ng \u0111\u1ed3ng n\u01a1i m\u1ecdi ng\u01b0\u1eddi c\u00f3 th\u1ec3 chia s\u1ebb kinh nghi\u1ec7m <a href=\"https:\/\/fstack.io.vn\/blog\/lap-trinh-la-gi-mot-so-dac-diem-cua-lap-trinh-ma-ban-nen-biet\/\">l\u1eadp tr\u00ecnh<\/a> cho nhau&nbsp;<\/span><span style=\"white-space-collapse: preserve; color: var( --e-global-color-text ); font-family: var( --e-global-typography-text-font-family ), Sans-serif; font-weight: var( --e-global-typography-text-font-weight ); text-align: var(--text-align); font-size: var(--postx_preset_body_typo_font_size_lg, initial); font-style: var(--postx_preset_Body_and_Others_typo_font_style); letter-spacing: var(--postx_preset_Body_and_Others_typo_letter_spacing_lg, normal); text-transform: var(--postx_preset_Body_and_Others_typo_text_transform); background-color: var(--postx_preset_Base_1_color);\">\ud83d\ude18<\/span><span style=\"color: rgb(27, 27, 27); font-family: &quot;Open Sans&quot;, -apple-system, BlinkMacSystemFont, &quot;Segoe UI&quot;, &quot;Helvetica Neue&quot;, Arial, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;; font-size: 18px; letter-spacing: -0.054px; font-style: var(--postx_preset_Body_and_Others_typo_font_style); font-weight: var(--postx_preset_Body_and_Others_typo_font_weight); text-transform: var(--postx_preset_Body_and_Others_typo_text_transform); text-align: var(--text-align); background-color: var(--postx_preset_Base_1_color);\">.<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Th\u00f4ng th\u01b0\u1eddng trong ReactJs ta\u00a0c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng useEffect \u0111\u1ec3 fetch data t\u1eeb api,\u00a0 nh\u01b0ng t\u1ea1i sao b\u1ea1n th\u1ea5y c\u0169ng c\u00f3 m\u1ed9t v\u00e0i d\u1ef1 \u00e1n ng\u01b0\u1eddi ta l\u1ea1i kh\u00f4ng s\u1eed d\u1ee5ng\u00a0useEffect v\u00e0 thay v\u00e0o \u0111\u00f3 l\u00e0 s\u1eed d\u1ee5ng react-query (hay TanStack Query) ? B\u00e0i vi\u1ebft n\u00e0y ch\u00fang t\u00f4i s\u1ebd gi\u00fap b\u1ea1n gi\u1ea3i m\u00e3 th\u1eafc m\u1eafc [&hellip;]<\/p>\n","protected":false},"author":4,"featured_media":1722,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1,43],"tags":[28],"class_list":["post-1720","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-cong-nghe","category-react-cong-nghe","tag-react"],"acf":[],"jetpack_featured_media_url":"https:\/\/fstack.io.vn\/blog\/wp-content\/uploads\/2024\/10\/reactquery.png","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/fstack.io.vn\/blog\/wp-json\/wp\/v2\/posts\/1720","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fstack.io.vn\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fstack.io.vn\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fstack.io.vn\/blog\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/fstack.io.vn\/blog\/wp-json\/wp\/v2\/comments?post=1720"}],"version-history":[{"count":65,"href":"https:\/\/fstack.io.vn\/blog\/wp-json\/wp\/v2\/posts\/1720\/revisions"}],"predecessor-version":[{"id":2495,"href":"https:\/\/fstack.io.vn\/blog\/wp-json\/wp\/v2\/posts\/1720\/revisions\/2495"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/fstack.io.vn\/blog\/wp-json\/wp\/v2\/media\/1722"}],"wp:attachment":[{"href":"https:\/\/fstack.io.vn\/blog\/wp-json\/wp\/v2\/media?parent=1720"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fstack.io.vn\/blog\/wp-json\/wp\/v2\/categories?post=1720"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fstack.io.vn\/blog\/wp-json\/wp\/v2\/tags?post=1720"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}