[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"navigation":3,"url-settings":86,"blog-\u002Fblog\u002Fan-overview-of-redux-rtk-query":663,"blog-author-\u002Fblog\u002Fan-overview-of-redux-rtk-query":1300,"i-material-symbols:arrow-back-rounded":1315},{"id":4,"extension":5,"footer":6,"header":73,"meta":83,"stem":84,"__hash__":85},"navigation\u002Fdata\u002Fshared\u002Fnavigation.yml","yml",{"brand":7,"columns":13,"legal":63},{"name":8,"tagline":9,"downloadCta":10},"Pieces","The memory layer for modern work.",{"label":11,"href":12},"All downloads","\u002Fdownloads",[14,26,39,51],{"title":15,"links":16},"Product",[17,20,23],{"label":18,"href":19},"Pieces Desktop","\u002F",{"label":21,"href":22},"Pieces Enterprise","\u002Fenterprise",{"label":24,"href":25},"Pieces MCP","\u002Fmcp",{"title":27,"links":28},"Resources",[29,33,36],{"label":30,"href":31,"external":32},"Documentation","url:docs.home",true,{"label":34,"href":35},"Blog","\u002Fblog",{"label":37,"href":38,"external":32},"GitHub","url:github.org",{"title":40,"links":41},"Community",[42,45,48],{"label":43,"href":44,"external":32},"Discord","url:social.discord",{"label":46,"href":47,"external":32},"X \u002F Twitter","url:social.x",{"label":49,"href":50,"external":32},"LinkedIn","url:social.linkedin",{"title":52,"links":53},"Company",[54,57,60],{"label":55,"href":56},"About","\u002Fabout",{"label":58,"href":59},"Updates","\u002Fupdates",{"label":61,"href":62},"Contact","\u002Fcontact",[64,67,70],{"label":65,"href":66},"Privacy Policy","\u002Flegal\u002Fprivacy",{"label":68,"href":69},"Refund Policy","\u002Flegal\u002Frefund",{"label":71,"href":72},"Terms of Service","\u002Flegal\u002Fterms",{"links":74,"signIn":75,"contact":78,"cta":80},[],{"label":76,"href":77},"Sign in","url:portal.home",{"label":79,"href":62},"Get in touch",{"label":81,"href":82},"Download","url:routes.downloads",{},"data\u002Fshared\u002Fnavigation","VdirGIa8cUm6xLprbBeTKcw914JfyJjWfF-9hSVOX5Y",{"id":87,"extension":5,"links":88,"meta":660,"stem":661,"__hash__":662},"urlSettings\u002Fdata\u002Fshared\u002Furls.yml",[89,93,97,101,105,109,113,117,121,125,129,133,137,141,145,149,153,157,161,165,169,173,177,181,185,189,192,196,200,204,208,212,216,220,224,228,232,236,240,244,248,252,256,260,264,268,272,276,280,284,288,292,295,299,303,306,310,314,318,322,326,330,334,338,342,346,350,354,358,362,366,370,374,378,382,386,390,394,398,402,406,410,414,418,422,426,430,434,438,442,446,450,453,457,461,465,469,473,477,480,483,486,489,493,497,500,504,508,512,516,520,524,528,532,536,540,544,548,551,555,559,563,567,571,574,577,580,584,587,591,595,599,603,606,610,614,617,620,623,627,631,635,638,641,644,648,652,656],{"key":90,"label":91,"href":92},"downloads.desktop","Desktop download page","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Fdownload",{"key":94,"label":95,"href":96},"downloads.macOS.dmgArm64","macOS DMG Apple Silicon","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_for_x\u002Fdmg-arm64\u002Fdownload",{"key":98,"label":99,"href":100},"downloads.macOS.dmgIntel","macOS DMG Intel","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_for_x\u002Fdmg\u002Fdownload",{"key":102,"label":103,"href":104},"downloads.macOS.pkg","macOS PKG","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fmacos_packaging\u002Fpkg\u002Fdownload",{"key":106,"label":107,"href":108},"downloads.macOS.universal","Desktop macOS Universal","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_for_x\u002Fmacos-universal\u002Fdownload",{"key":110,"label":111,"href":112},"downloads.macOS.pkgArm64","Desktop macOS PKG Apple Silicon","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fmacos_packaging\u002Fpkg-pfd-arm64\u002Fdownload",{"key":114,"label":115,"href":116},"downloads.macOS.pkgIntel","Desktop macOS PKG Intel","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fmacos_packaging\u002Fpkg-pfd\u002Fdownload",{"key":118,"label":119,"href":120},"downloads.windows.appinstaller","Windows App Installer","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fappinstaller\u002Fpieces_for_x.appinstaller",{"key":122,"label":123,"href":124},"downloads.windows.exe","Windows EXE","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_for_x\u002Fwindows-exe\u002Fdownload",{"key":126,"label":127,"href":128},"downloads.windows.msix","Windows MSIX","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_for_x\u002Fwindows-msix\u002Fdownload",{"key":130,"label":131,"href":132},"downloads.windows.suiteManager","Windows Suite Manager","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_suite_windows\u002Fappinstaller\u002Fdownload",{"key":134,"label":135,"href":136},"downloads.linux.flatpakRepo","Linux Flatpak repository","https:\u002F\u002Fbuilds.pieces.app\u002Fpieces-flatpak-repo\u002Fpieces-flatpak.flatpakrepo",{"key":138,"label":139,"href":140},"downloads.linux.snapDesktop","Linux Snap Desktop","https:\u002F\u002Fsnapcraft.io\u002Fpieces-for-developers",{"key":142,"label":143,"href":144},"downloads.linux.snapPiecesOS","Linux Snap PiecesOS","https:\u002F\u002Fsnapcraft.io\u002Fpieces-os",{"key":146,"label":147,"href":148},"downloads.linux.snap","Desktop Linux Snap package","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_for_x\u002Fsnap\u002Fdownload",{"key":150,"label":151,"href":152},"downloads.piecesOS.macOS.dmgArm64","PiecesOS macOS DMG Apple Silicon","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fos_server\u002Fdmg-arm64\u002Fdownload",{"key":154,"label":155,"href":156},"downloads.piecesOS.macOS.dmgIntel","PiecesOS macOS DMG Intel","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fos_server\u002Fdmg\u002Fdownload",{"key":158,"label":159,"href":160},"downloads.piecesOS.macOS.universal","PiecesOS macOS Universal","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fos_server\u002Fmacos-universal\u002Fdownload",{"key":162,"label":163,"href":164},"downloads.piecesOS.macOS.pkgArm64","PiecesOS macOS PKG Apple Silicon","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fmacos_packaging\u002Fpkg-pos-launch-only-arm64\u002Fdownload",{"key":166,"label":167,"href":168},"downloads.piecesOS.macOS.pkgIntel","PiecesOS macOS PKG Intel","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fmacos_packaging\u002Fpkg-pos-launch-only\u002Fdownload",{"key":170,"label":171,"href":172},"downloads.piecesOS.windows.appinstaller","PiecesOS Windows App Installer","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fappinstaller\u002Fos_server.appinstaller",{"key":174,"label":175,"href":176},"downloads.piecesOS.windows.exe","PiecesOS Windows EXE","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fos_server\u002Fwindows-exe\u002Fdownload",{"key":178,"label":179,"href":180},"downloads.piecesOS.windows.msix","PiecesOS Windows MSIX","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fos_server\u002Fwindows-msix\u002Fdownload",{"key":182,"label":183,"href":184},"downloads.piecesOS.linux.snap","PiecesOS Linux Snap package","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fos_server\u002Fsnap\u002Fdownload",{"key":186,"label":187,"href":188},"downloads.combined.macOS.appleSilicon","Combined macOS installer Apple Silicon","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fmacos_packaging\u002Fpkg-arm64\u002Fdownload",{"key":190,"label":191,"href":104},"downloads.combined.macOS.intel","Combined macOS installer Intel",{"key":193,"label":194,"href":195},"downloads.guides.macOS","macOS installation guide","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Fmacos-installation-guide",{"key":197,"label":198,"href":199},"downloads.guides.windows","Windows installation guide","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Fwindows-installation-guide",{"key":201,"label":202,"href":203},"downloads.guides.linux","Linux installation guide","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Flinux-installation-guide",{"key":205,"label":206,"href":207},"downloads.guides.piecesOS","PiecesOS manual installation","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fcore-dependencies\u002Fpieces-os\u002Fmanual-installation",{"key":209,"label":210,"href":211},"extensions.chrome","Chrome extension","https:\u002F\u002Fchrome.google.com\u002Fwebstore\u002Fdetail\u002Fpieces-save-code-snippets\u002Figbgibhbfonhmjlechmeefimncpekepm",{"key":213,"label":214,"href":215},"extensions.firefox","Firefox add-on","https:\u002F\u002Faddons.mozilla.org\u002Fen-US\u002Ffirefox\u002Faddon\u002Fpieces-save-code-from-the-web\u002F",{"key":217,"label":218,"href":219},"extensions.edge","Edge add-on","https:\u002F\u002Fmicrosoftedge.microsoft.com\u002Faddons\u002Fdetail\u002Fpieces-save-code-snippet\u002Fhglfimcdgonaeeobjckfdabcldfidmim",{"key":221,"label":222,"href":223},"extensions.vscode","VS Code extension","https:\u002F\u002Fmarketplace.visualstudio.com\u002Fitems?itemName=MeshIntelligentTechnologiesInc.pieces-vscode",{"key":225,"label":226,"href":227},"extensions.visualStudio","Visual Studio extension","https:\u002F\u002Fmarketplace.visualstudio.com\u002Fitems?itemName=MeshIntelligentTechnologiesInc.PiecesVisualStudio",{"key":229,"label":230,"href":231},"extensions.jetbrains","JetBrains plugin","https:\u002F\u002Fplugins.jetbrains.com\u002Fplugin\u002F17328-pieces--save-search-share--reuse-code-snippets",{"key":233,"label":234,"href":235},"extensions.obsidian","Obsidian plugin","https:\u002F\u002Fobsidian.md\u002Fplugins?id=pieces-for-developers",{"key":237,"label":238,"href":239},"extensions.sublime","Sublime package","https:\u002F\u002Fpackagecontrol.io\u002Fpackages\u002FPieces",{"key":241,"label":242,"href":243},"extensions.neovim","Neovim plugin","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fplugin_neo_vim",{"key":245,"label":246,"href":247},"extensions.jupyterlab","JupyterLab plugin","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fjupyterlab-pieces",{"key":249,"label":250,"href":251},"extensions.cli","Pieces CLI","https:\u002F\u002Fpypi.org\u002Fproject\u002Fpieces-cli\u002F",{"key":253,"label":254,"href":255},"docs.home","Documentation home","https:\u002F\u002Fdocs.pieces.app",{"key":257,"label":258,"href":259},"docs.getStarted","Get started docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces",{"key":261,"label":262,"href":263},"docs.api","API docs","https:\u002F\u002Fdocs.pieces.app\u002Fapi",{"key":265,"label":266,"href":267},"docs.desktop.overview","Desktop overview","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop",{"key":269,"label":270,"href":271},"docs.desktop.onboarding","Desktop onboarding","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Fonboarding",{"key":273,"label":274,"href":275},"docs.desktop.timeline","Desktop timeline docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Ftimeline",{"key":277,"label":278,"href":279},"docs.desktop.summaries","Desktop summaries docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Fsingle-click-summaries",{"key":281,"label":282,"href":283},"docs.desktop.search","Desktop conversational search docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Fconversational-search",{"key":285,"label":286,"href":287},"docs.desktop.drive","Desktop drive docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Fdrive",{"key":289,"label":290,"href":291},"docs.desktop.account","Desktop account settings docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Fconfiguration\u002Faccount",{"key":293,"label":294,"href":92},"docs.desktop.download","Desktop download docs",{"key":296,"label":297,"href":298},"docs.piecesOS.overview","PiecesOS overview docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fcore-dependencies",{"key":300,"label":301,"href":302},"docs.piecesOS.details","PiecesOS details docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fcore-dependencies\u002Fpieces-os",{"key":304,"label":305,"href":207},"docs.piecesOS.install","PiecesOS install docs",{"key":307,"label":308,"href":309},"docs.piecesOS.quickMenu","PiecesOS quick menu docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fcore-dependencies\u002Fpieces-os\u002Fquick-menu",{"key":311,"label":312,"href":313},"docs.piecesOS.storage","On-device storage docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fcore-dependencies\u002Fon-device-storage",{"key":315,"label":316,"href":317},"docs.piecesOS.troubleshooting","PiecesOS troubleshooting docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fcore-dependencies\u002Fpieces-os\u002Ftroubleshooting",{"key":319,"label":320,"href":321},"docs.mcp.overview","MCP overview docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp",{"key":323,"label":324,"href":325},"docs.mcp.cursor","MCP Cursor docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fcursor",{"key":327,"label":328,"href":329},"docs.mcp.vscode","MCP VS Code docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fvs-code",{"key":331,"label":332,"href":333},"docs.mcp.claudeDesktop","MCP Claude Desktop docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fclaude-desktop",{"key":335,"label":336,"href":337},"docs.mcp.claudeCode","MCP Claude Code docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fclaude-code",{"key":339,"label":340,"href":341},"docs.mcp.claudeCowork","MCP Claude Cowork docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fclaude-cowork",{"key":343,"label":344,"href":345},"docs.mcp.githubCopilot","MCP GitHub Copilot docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fgithub-copilot",{"key":347,"label":348,"href":349},"docs.mcp.goose","MCP Goose docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fgoose",{"key":351,"label":352,"href":353},"docs.mcp.windsurf","MCP Windsurf docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fwindsurf",{"key":355,"label":356,"href":357},"docs.mcp.zed","MCP Zed docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fzed",{"key":359,"label":360,"href":361},"docs.mcp.jetbrains","MCP JetBrains docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fjetbrains-ides",{"key":363,"label":364,"href":365},"docs.mcp.continueDev","MCP Continue docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fcontinue-dev",{"key":367,"label":368,"href":369},"docs.mcp.cline","MCP Cline docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fcline",{"key":371,"label":372,"href":373},"docs.mcp.raycast","MCP Raycast docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fraycast",{"key":375,"label":376,"href":377},"docs.mcp.rovoDevCli","MCP Rovo Dev CLI docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Frovo-dev-cli",{"key":379,"label":380,"href":381},"docs.mcp.openaiCodexCli","MCP OpenAI Codex CLI docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fopenai-codex-cli",{"key":383,"label":384,"href":385},"docs.mcp.googleGeminiCli","MCP Google Gemini CLI docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fgoogle-gemini-cli",{"key":387,"label":388,"href":389},"docs.mcp.amazonQ","MCP Amazon Q docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Famazon-q-developer",{"key":391,"label":392,"href":393},"docs.mcp.chatgptDev","MCP ChatGPT Developer Mode docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fchatgpt-developer-mode",{"key":395,"label":396,"href":397},"docs.mcp.openclaw","MCP OpenClaw docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fopenclaw",{"key":399,"label":400,"href":401},"docs.mcp.mcpRemote","MCP Remote docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fmcp-remote",{"key":403,"label":404,"href":405},"docs.mcp.ngrok","MCP ngrok docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fngrok-setup",{"key":407,"label":408,"href":409},"docs.troubleshooting.macOS","macOS troubleshooting docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Ftroubleshooting\u002Fmacos",{"key":411,"label":412,"href":413},"docs.troubleshooting.windows","Windows troubleshooting docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Ftroubleshooting\u002Fwindows",{"key":415,"label":416,"href":417},"docs.troubleshooting.linux","Linux troubleshooting docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Ftroubleshooting\u002Flinux",{"key":419,"label":420,"href":421},"docs.privacy","Privacy and security docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fprivacy-security-your-data",{"key":423,"label":424,"href":425},"docs.support","Support docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fsupport",{"key":427,"label":428,"href":429},"portal.home","Pieces portal","https:\u002F\u002Fportal.pieces.app",{"key":431,"label":432,"href":433},"site.home","Website home","https:\u002F\u002Fpieces.app",{"key":435,"label":436,"href":437},"site.about","About page","https:\u002F\u002Fpieces.app\u002Fabout",{"key":439,"label":440,"href":441},"site.features","Features page","https:\u002F\u002Fpieces.app\u002Ffeatures",{"key":443,"label":444,"href":445},"site.plugins","Plugins page","https:\u002F\u002Fpieces.app\u002Fplugins",{"key":447,"label":448,"href":449},"site.contact","Contact page","https:\u002F\u002Fpieces.app\u002Fcontact",{"key":451,"label":58,"href":452},"site.updates","https:\u002F\u002Fpieces.app\u002Fupdates",{"key":454,"label":455,"href":456},"site.news","News","https:\u002F\u002Fpieces.app\u002Fnews",{"key":458,"label":459,"href":460},"site.events","Community events","https:\u002F\u002Fpieces.app\u002Fcommunity\u002Fevents",{"key":462,"label":463,"href":464},"site.userStories","User stories","https:\u002F\u002Fpieces.app\u002Fuser-stories",{"key":466,"label":467,"href":468},"site.academy","Academy","https:\u002F\u002Fpieces.app\u002Flearn\u002Facademy",{"key":470,"label":471,"href":472},"site.support","Website support","https:\u002F\u002Fpieces.app\u002Fsupport",{"key":474,"label":475,"href":476},"site.standup","Standup","https:\u002F\u002Fpieces.app\u002Fstandup",{"key":478,"label":34,"href":479},"site.blog","https:\u002F\u002Fcode.pieces.app\u002Fblog",{"key":481,"label":43,"href":482},"social.discord","https:\u002F\u002Fdiscord.gg\u002Fgetpieces",{"key":484,"label":46,"href":485},"social.x","https:\u002F\u002Fx.com\u002Fgetpieces",{"key":487,"label":488,"href":485},"social.twitter","Twitter",{"key":490,"label":491,"href":492},"social.instagram","Instagram","https:\u002F\u002Fwww.instagram.com\u002Fgetpieces\u002F",{"key":494,"label":495,"href":496},"social.tiktok","TikTok","https:\u002F\u002Fwww.tiktok.com\u002F@getpieces",{"key":498,"label":49,"href":499},"social.linkedin","https:\u002F\u002Fwww.linkedin.com\u002Fcompany\u002Fgetpieces\u002F",{"key":501,"label":502,"href":503},"social.youtube","YouTube","https:\u002F\u002Fyoutube.com\u002F@getpieces",{"key":505,"label":506,"href":507},"github.org","GitHub organization","https:\u002F\u002Fgithub.com\u002Fpieces-app",{"key":509,"label":510,"href":511},"github.support","GitHub support","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fsupport",{"key":513,"label":514,"href":515},"github.issues","GitHub issues","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fsupport\u002Fissues",{"key":517,"label":518,"href":519},"github.discussions","GitHub discussions","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fsupport\u002Fdiscussions",{"key":521,"label":522,"href":523},"github.documentation","GitHub documentation","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fdocumentation",{"key":525,"label":526,"href":527},"github.opensource","GitHub open source","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fopensource",{"key":529,"label":530,"href":531},"github.sdks.python","Python SDK","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fpieces-os-client-sdk-for-python",{"key":533,"label":534,"href":535},"github.sdks.typescript","TypeScript SDK","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fpieces-os-client-sdk-for-typescript",{"key":537,"label":538,"href":539},"github.sdks.dart","Dart SDK","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fpieces-os-client-sdk-for-dart",{"key":541,"label":542,"href":543},"github.sdks.kotlin","Kotlin SDK","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fpieces-os-client-sdk-for-kotlin",{"key":545,"label":546,"href":547},"github.plugins.obsidian","Obsidian plugin repository","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fobsidian-pieces",{"key":549,"label":550,"href":247},"github.plugins.jupyterlab","JupyterLab plugin repository",{"key":552,"label":553,"href":554},"github.plugins.sublime","Sublime plugin repository","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fplugin_sublime",{"key":556,"label":557,"href":558},"github.plugins.neovim","Neovim plugin repository","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fplugin_neovim",{"key":560,"label":561,"href":562},"github.cliAgent","CLI agent repository","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fcli-agent",{"key":564,"label":565,"href":566},"github.mcpDart","MCP Dart repository","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fmcp_dart",{"key":568,"label":569,"href":570},"github.awesomePieces","Awesome Pieces repository","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fawesome-pieces",{"key":572,"label":573,"href":66},"legal.privacyPolicy","Privacy policy",{"key":575,"label":576,"href":69},"legal.refundPolicy","Refund policy",{"key":578,"label":579,"href":72},"legal.terms","Terms",{"key":581,"label":582,"href":583},"legal.security","Legal security","https:\u002F\u002Fpieces.app\u002Flegal\u002Fsecurity",{"key":585,"label":586,"href":503},"videos.youtubeChannel","YouTube channel",{"key":588,"label":589,"href":590},"videos.gettingStartedDesktop","Getting started desktop video","https:\u002F\u002Fyoutu.be\u002FdUr1lRM_TYk",{"key":592,"label":593,"href":594},"videos.snippetDiscoveryxR","Snippet discovery video","https:\u002F\u002Fyoutu.be\u002FG6vb1USw-30",{"key":596,"label":597,"href":598},"sales.bookACall","Book a sales call","https:\u002F\u002Fcalendar.app.google\u002FWVUDtUfNy5Vst3sH7",{"key":600,"label":601,"href":602},"sales.enterprise","Enterprise form","https:\u002F\u002Fgetpieces.typeform.com\u002Fto\u002FaVQFTvpE",{"key":604,"label":605,"href":519},"sales.feedback","Feedback discussions",{"key":607,"label":608,"href":609},"sales.earlyAccess","Early access form","https:\u002F\u002Fgetpieces.typeform.com\u002Fearlyaccess",{"key":611,"label":612,"href":613},"sales.supportEmail","Support email","mailto:support@pieces.app",{"key":615,"label":616,"href":19},"routes.home","Home route",{"key":618,"label":619,"href":56},"routes.about","About route",{"key":621,"label":622,"href":12},"routes.downloads","Downloads route",{"key":624,"label":625,"href":626},"routes.thanks","Post-install thanks route","\u002Finstall\u002Fthanks",{"key":628,"label":629,"href":630},"routes.pricing","Pricing route","\u002Fpricing",{"key":632,"label":633,"href":634},"cta.freeTrial","Start free trial CTA (Pieces Pro) — used by \u002Fcampaigns\u002F* landing pages","https:\u002F\u002Fcampaigns.pieces.app\u002F",{"key":636,"label":637,"href":22},"routes.enterprise","Enterprise route",{"key":639,"label":640,"href":62},"routes.contact","Contact route",{"key":642,"label":643,"href":59},"routes.updates","Updates route",{"key":645,"label":646,"href":647},"routes.migrationError","Migration error route","\u002Fmigration\u002Ferror",{"key":649,"label":650,"href":651},"routes.authenticated","Post-login authenticated route","\u002Fauth\u002Fsigned-in",{"key":653,"label":654,"href":655},"routes.signed-out","Signed out route","\u002Fauth\u002Fsigned-out",{"key":657,"label":658,"href":659},"routes.authentication-error","Authentication error route","\u002Fauth\u002Ferror",{},"data\u002Fshared\u002Furls","NLkVE1lIUws518K-1QsSB6T-GvlXYIzcRL1HDhqarGQ",{"id":664,"title":665,"author":666,"authorPhoto":667,"authorPhotoAlt":668,"authorSlug":669,"body":670,"buttonText":1287,"buttonUrl":1287,"category":1288,"date":1289,"description":1290,"draft":1291,"editorsPick":1291,"extension":1292,"featured":1291,"image":1293,"imageAlt":1294,"meta":1295,"navigation":32,"ogImage":1287,"ogImageAlt":1287,"path":1296,"seo":1297,"stem":1298,"tags":1287,"__hash__":1299},"blog\u002Fblog\u002Fan-overview-of-redux-rtk-query.md","An Overview of Redux RTK Query","Eze Nnaemeka","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fwhats-the-difference-between-jest-and-mocha\u002Fauthor.jpeg","Eze Nnaemeka.","eze-nnaemeka",{"type":671,"value":672,"toc":1271},"minimark",[673,677,683,696,699,710,713,792,797,800,803,813,816,819,825,830,833,836,841,847,853,857,863,868,872,876,879,886,893,899,904,912,919,927,952,958,964,968,974,981,989,997,1005,1013,1016,1019,1025,1028,1032,1035,1041,1044,1050,1055,1061,1067,1073,1079,1085,1090,1097,1102,1106,1113,1120,1126,1129,1135,1138,1148,1154,1164,1171,1175,1191,1195,1198,1204,1212,1218,1222,1228,1234,1237,1243,1250,1256,1260],[674,675,676],"p",{},"Have you ever heard of the Redux Toolkit? State management was developed from Redux and is known as the Redux Toolkit. The boilerplate code for Redux can be minimized using the Redux Toolkit, offering an excellent choice for both beginners and experienced developers. The Redux Toolkit has a ton of features, one of which is the RTK Query (Redux ToolKit Query), which is what we'll be exploring in this article.",[674,678,679],{},[680,681,682],"strong",{},"Prerequisites",[684,685,686,690,693],"ul",{},[687,688,689],"li",{},"Knowledge of React and Redux Toolkit.",[687,691,692],{},"Node.js installed on your machine.",[687,694,695],{},"Knowledge of CRUD operations with Fetch or Axios.",[674,697,698],{},"In this article, we’ll learn about RTK Query and how to utilize it in React to fetch data. For this, we'll use information from a fictitious JSON server to develop a straightforward to-do application.",[674,700,701,702,709],{},"The ",[703,704,708],"a",{"href":705,"rel":706},"https:\u002F\u002Fredux-toolkit.js.org\u002Frtk-query\u002Foverview",[707],"nofollow","RTK Query"," is a data retrieval and caching tool that is quite effective. It lets you avoid having to create data fetching and caching logic manually. RTK Query intended to simplify common instances for data loading in a web application. For example, usually, web applications perform CRUD operations from a server and maintain synchronization between the cached data on the client and the server.",[674,711,712],{},"The Redux Toolkit package installation comes with RTK Query, which includes the following API:",[684,714,715,737,752,768],{},[687,716,717,724,727,728,732,733,736],{},[703,718,721],{"href":719,"rel":720},"https:\u002F\u002Fredux-toolkit.js.org\u002Frtk-query\u002Fapi\u002FfetchBaseQuery",[707],[680,722,723],{},"fetchBaseQuery()",[680,725,726],{},":"," This is a condensed fetch wrapper that seeks to make requests easier. It’s designed to be the ",[729,730,731],"code",{},"baseQuery"," that most developers should use with ",[729,734,735],{},"createApi",".",[687,738,739,746,748,749,751],{},[703,740,743],{"href":741,"rel":742},"https:\u002F\u002Fredux-toolkit.js.org\u002Frtk-query\u002Fapi\u002FcreateApi",[707],[680,744,745],{},"createApi()",[680,747,726],{}," Thisis the foundation of RTK Query's features. It enables you to specify a collection of \"endpoints\" that specify how to get data from async sources, such as backend APIs and other async sources, along with the setting of how to get the data and convert it. ",[729,750,745],{}," makes an \"API slice\" structure for you that comprises Redux logic and, optionally, React hooks, which enable you to fetch and cache data easily.",[687,753,754,763,764,767],{},[703,755,758],{"href":756,"rel":757},"https:\u002F\u002Fredux-toolkit.js.org\u002Frtk-query\u002Fapi\u002FApiProvider",[707],[680,759,760],{},[761,762],"api-provider",{},": You can use this as a ",[729,765,766],{},"Provider"," if you don't already have a Redux store.",[687,769,770,777,779,780,783,784,787,788,791],{},[703,771,774],{"href":772,"rel":773},"https:\u002F\u002Fredux-toolkit.js.org\u002Frtk-query\u002Fapi\u002FsetupListeners",[707],[680,775,776],{},"setupListeners()",[680,778,726],{}," This is a tool for enabling the ",[729,781,782],{},"refetchOnFocus"," and ",[729,785,786],{},"refetchOnReconnect"," characteristics. It requires the delivery strategy from your store. You can provide a callback for more precise control by doing ",[729,789,790],{},"setupListeners(store.dispatch)",", which will configure listeners with the suggested defaults.",[793,794,796],"h2",{"id":795},"scaffolding-a-new-react-project","Scaffolding a New React Project",[674,798,799],{},"It’s relatively easy to get started with React. You can use the React project creation tool to scaffold a new project with a few sample files to begin.",[674,801,802],{},"Use the terminal to run the following command to start a new React project:",[804,805,810],"pre",{"className":806,"code":808,"language":809},[807],"language-text","yarn create react-app react-RTK Query\n","text",[729,811,808],{"__ignoreMap":812},"",[674,814,815],{},"Once the project is created, remove the unnecessary files from the src folder after the project has been created.",[674,817,818],{},"Run the following command from the terminal to install the form library:",[804,820,823],{"className":821,"code":822,"language":809},[807],"yarn add @reduxjs\u002Ftoolkit react-redux\n",[729,824,822],{"__ignoreMap":812},[826,827,829],"h3",{"id":828},"configuring-the-redux-store","Configuring the Redux Store",[674,831,832],{},"RTK Query will cache the data it has downloaded from the server in the Redux store, but to allow this, the store must first be configured. The Redux store has to be updated using the Redux slice reducer, and the custom middleware is generated automatically when the API slice is created.",[674,834,835],{},"Let's make a file called store.js in the src directory, our Redux store, and head over to our index.js file to enclose our with a provider:",[837,838,840],"h4",{"id":839},"step-1","Step 1",[804,842,845],{"className":843,"code":844,"language":809},[807],"import { configureStore, getDefaultMiddleware } from \"@reduxjs\u002Ftoolkit\";\nimport { todoApi } from \".\u002FTodoApi\";\nexport const store = configureStore({\n  reducer: {\n    [todoApi.reducerPath]: todoApi.reducer,\n  },\n  middleware: (getDefaultMiddleware) =>\n    getDefaultMiddleware().concat(todoApi.middleware),\n});\n",[729,846,844],{"__ignoreMap":812},[674,848,849],{},[850,851,852],"em",{},"Configuration of Redux store",[837,854,856],{"id":855},"step-2","Step 2",[804,858,861],{"className":859,"code":860,"language":809},[807],"import { Provider } from \"react-redux\";\nimport { store } from \".\u002FServices\u002FStore\";\nconst root = ReactDOM.createRoot(document.getElementById(\"root\"));\nroot.render(\n);\n",[729,862,860],{"__ignoreMap":812},[674,864,865],{},[850,866,867],{},"Wrapping the component with a provider",[793,869,871],{"id":870},"implementing-crud-operations","Implementing CRUD Operations",[826,873,875],{"id":874},"queries","Queries",[674,877,878],{},"The most typical application of RTK Query is with CRUD operations. However, you are generally advised to only use queries for requests that receive data. A query operation can be performed with any fetching data library. It’s best to use a Mutation for anything that modifies data on the server or could potentially invalidate the cache.",[674,880,881,882,885],{},"By default, RTK Query includes ",[729,883,884],{},"fetchBaseQuery",", a lightweight fetch wrapper that automatically manages request headers and answers parsing in a manner akin to that of widely used libraries like Axios.",[674,887,888,889,892],{},"Let's begin with creating a new file called ",[729,890,891],{},"TodoApi.js"," and import the following:",[804,894,897],{"className":895,"code":896,"language":809},[807],"import { createApi, fetchBaseQuery} from \"@reduxjs\u002Ftoolkit\u002Fquery\u002Freact\";\nexport const todoApi = createApi({\n  reducerPath: \"todoApi\",\n  baseQuery: fetchBaseQuery({\n baseUrl: \"https:\u002F\u002Fjsonplaceholder.typicode.com\",\n  }),\n  endpoints: (builder) => ({})\n});\n",[729,898,896],{"__ignoreMap":812},[674,900,701,901,903],{},[729,902,745],{}," takes an object with the following properties:",[674,905,906,911],{},[703,907,910],{"href":908,"rel":909},"https:\u002F\u002Fredux-toolkit.js.org\u002Frtk-query\u002Fapi\u002FcreateApi#reducerpath",[707],"reducerPath",": This particular key specifies the location of the cache's storage in the Redux store.",[674,913,914,918],{},[703,915,731],{"href":916,"rel":917},"https:\u002F\u002Fredux-toolkit.js.org\u002Frtk-query\u002Fapi\u002FcreateApi#basequery",[707],": This enables us to construct a query by only supplying the base URL — each endpoint's default query for data requests.",[674,920,921,926],{},[703,922,925],{"href":923,"rel":924},"https:\u002F\u002Fredux-toolkit.js.org\u002Frtk-query\u002Fapi\u002FcreateApi#endpoints",[707],"Endpoints"," This is a collection of activities that you want to be carried out on your server. With the help of the builder syntax, you define them as an object.",[674,928,929,932,933,932,940,932,943,950],{},[850,930,931],{},"N\u002FB: There are two basic endpoint types:"," ",[703,934,937],{"href":935,"rel":936},"https:\u002F\u002Fredux-toolkit.js.org\u002Frtk-query\u002Fusage\u002Fqueries",[707],[850,938,939],{},"query",[850,941,942],{},"and",[703,944,947],{"href":945,"rel":946},"https:\u002F\u002Fredux-toolkit.js.org\u002Frtk-query\u002Fusage\u002Fmutations",[707],[850,948,949],{},"mutation",[850,951,736],{},[674,953,954,957],{},[680,955,956],{},"Query:"," They serve as endpoints for requests to READ data, specifically for reading data from the server.",[674,959,960,963],{},[680,961,962],{},"Mutation:"," These data updates are sent to the server through mutations, and the local cache is updated. Mutations may also invalidate cached information and necessitate re-fetches, e.g., CREATE, UPDATE, DELETE.",[826,965,967],{"id":966},"specifying-endpoints","Specifying endpoints",[804,969,972],{"className":970,"code":971,"language":809},[807],"endpoints: (builder) => ({\n    addTodo: builder.mutation({\n      query: (todo) => ({\n        url: \"\u002Fposts\",\n        method: \"POST\",\n        body: JSON.stringify({\n          title: todo.title,\n          body: todo.body,\n          id: todo.id,\n        }),\n        headers: {\n \"Content-type\": \"application\u002Fjson; charset=UTF-8\",\n        },\n      }),\n      invalidatesTags: [\"Todo\"]\n    }),\n    getAllTodos: builder.query({\n      query: () => \"\u002Fposts\",\n      providesTags: [\"Todo\"]\n    }),\n    updateTodo: builder.mutation({\n      query: ({ id, ...todo }) => ({\n        url: `\u002Fposts\u002F${id}`,\n        method: \"PUT\",\n        body: JSON.stringify({\n          title: todo.title,\n          body: todo.body,\n        }),\n        headers: {\n \"Content-type\": \"application\u002Fjson; charset=UTF-8\",\n        },\n      }),\n      invalidatesTags: [\"Todo\"]\n    }),\n    deleteTodo: builder.mutation({\n      query: (id) => ({\n        url: `\u002Fposts\u002F${id}`,\n        method: \"DELETE\",\n      }),\n      invalidatesTags: [\"Todo\"]\n    }),\n  })\n",[729,973,971],{"__ignoreMap":812},[674,975,976,977,980],{},"These are the endpoints for performing the ",[680,978,979],{},"CRUD"," operations:",[674,982,983,988],{},[850,984,985],{},[680,986,987],{},"addTodo",": Endpoint of a mutation for creating a todo.",[674,990,991,996],{},[850,992,993],{},[680,994,995],{},"getAllTodos",": Query endpoint in charge of retrieving all the todos from the server.",[674,998,999,1004],{},[850,1000,1001],{},[680,1002,1003],{},"updateTodo",": Endpoint of a mutation for updating a todo.",[674,1006,1007,1012],{},[850,1008,1009],{},[680,1010,1011],{},"deleteTodo",": Endpoint of a mutation for deleting a todo.",[674,1014,1015],{},"Now that we have our endpoints, you may be wondering, “How can we utilize them?”",[674,1017,1018],{},"The RTK Query automatically generates a React hook for us to access the endpoints, and they usually begin with \"use*NameOfEndpoint**Endpoint type*:",[804,1020,1023],{"className":1021,"code":1022,"language":809},[807],"\u002F\u002Fauto generated hook\nexport const {\n  useAddTodoMutation,\n  useDeleteTodoMutation,\n  useGetAllTodosQuery,\n  useUpdateTodoMutation,\n} = todoApi;\n",[729,1024,1022],{"__ignoreMap":812},[674,1026,1027],{},"Auto-Generated Hook",[826,1029,1031],{"id":1030},"fetch-all-todos","Fetch All Todos",[674,1033,1034],{},"Let's head over to our App.js file, where we display our todos to the DOM. We also need to import the auto-generated hook:",[804,1036,1039],{"className":1037,"code":1038,"language":809},[807],"import { useGetAllTodosQuery } from \".\u002FServices\u002FTodoApi\";\n",[729,1040,1038],{"__ignoreMap":812},[674,1042,1043],{},"When a query hook is called, it returns an object with properties like the most recent information for the query request and status booleans for the request's lifecycle state. The most popular properties are shown below:",[804,1045,1048],{"className":1046,"code":1047,"language":809},[807],"const { data, error, isLoading, isFetching, refetch } = useGetAllTodosQuery();\n",[729,1049,1047],{"__ignoreMap":812},[674,1051,1052],{},[850,1053,1054],{},"Destructuring data from the auto-generated hook",[674,1056,1057,1060],{},[680,1058,1059],{},"data",": This is the most recent result returned, if any.",[674,1062,1063,1066],{},[680,1064,1065],{},"error",": This results in an error, if any.",[674,1068,1069,1072],{},[680,1070,1071],{},"isLoading",": When true, it means that the Query is presently loading for the first time and that no data has been returned. The first request sent out will be fulfilled this way; however, subsequent requests won't.",[674,1074,1075,1078],{},[680,1076,1077],{},"isFetching",": When true, it shows that the Query is currently retrieving data, but it may already contain information from a previous request. This will be true for both the initial request sent and subsequent ones.",[804,1080,1083],{"className":1081,"code":1082,"language":809},[807],"\u003Cdiv>\n     {error && \u003Cp>Something went wrong\u003C\u002Fp>}\n      {isFetching && \u003Cp>fetching ...\u003C\u002Fp>}\n     {isLoading && \u003Cp>Loading ...\u003C\u002Fp>}\n      {data?.map((todo) => (\n \u003CCard key={todo.id} id={todo.id} todos={todo.body} \u002F>\n      ))}\n \u003C\u002Fdiv>\n",[729,1084,1082],{"__ignoreMap":812},[674,1086,1087],{},[850,1088,1089],{},"Mapping through the data to display todos",[674,1091,1092],{},[1093,1094],"img",{"alt":1095,"src":1096},"The todos output.","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fan-overview-of-redux-rtk-query\u002Fimg-001.png",[674,1098,1099],{},[850,1100,1101],{},"Displaying todos output",[826,1103,1105],{"id":1104},"add-todo","Add Todo",[674,1107,1108,1109,1112],{},"To add a todo, we need to pass an object with the properties title, body and a unique id to the ",[729,1110,1111],{},"addtodo","mutation endpoint that we implemented earlier.",[674,1114,1115,1116,1119],{},"Let's head over to our ",[729,1117,1118],{},"Modal.js"," file, where we’ll create a new todo:",[674,1121,1122],{},[1093,1123],{"alt":1124,"src":1125},"The dialog to add a todo.","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fan-overview-of-redux-rtk-query\u002Fimg-002.png",[674,1127,1128],{},"Adding a todo",[804,1130,1133],{"className":1131,"code":1132,"language":809},[807],"import { useAddTodoMutation } from \".\u002FServices\u002FTodoApi\";\nconst [addTodo, result] = useAddTodoMutation();\n",[729,1134,1132],{"__ignoreMap":812},[674,1136,1137],{},"The mutation hook returns a tuple unlike that of the Query. The \"trigger\" function is the first item in the tuple, and an object with status, error, and data is the second item.",[674,1139,1140,1141,1144,1145,1147],{},"Now that we know that ",[729,1142,1143],{},"addTask","is a trigger function, we need to pass in an object that has the properties we specified in the ",[729,1146,1143],{},"endpoint:",[804,1149,1152],{"className":1150,"code":1151,"language":809},[807],"\u002F\u002Fadd a todo\n const addTodoHandler = () => {\n    addTodo({\n      title: todo.title,\n      body: todo.body,\n      id: Math.floor(Math.random() * 100),\n    })\n      .unwrap()\n      .then((data) => {\n console.log(data);\n      });\n\u002F\u002F force re-fetches the data\nrefetch()\n};\n",[729,1153,1151],{"__ignoreMap":812},[674,1155,701,1156,1159,1160,1163],{},[729,1157,1158],{},"unwrap()","function helps if you need to access the error or success payload immediately after a mutation. Wherever we refer to the ",[729,1161,1162],{},"addTodoHandler","in our app, a new todo will be created. However, our UI won't be updated until the page is refreshed.",[674,1165,1166,1167,1170],{},"You can use the refetch method returned as a result property from a ",[729,1168,1169],{},"useQuery"," hook to obtain complete granular control over re-fetching data.",[837,1172,1174],{"id":1173},"rtk-query-caching","RTK Query Caching",[674,1176,1177,1182,1183,1186,1187,1190],{},[703,1178,1181],{"href":1179,"rel":1180},"https:\u002F\u002Fredux-toolkit.js.org\u002Frtk-query\u002Fusage\u002Fautomated-refetching#tags",[707],"Tags"," is a term you can assign to a particular set of data in RTK Query to manage cache and invalidation behavior for re-fetching purposes. When determining if cached data should be affected by a mutation, it can be thought of as a \"label\" that is attached to the data and read after the change. The ",[729,1184,1185],{},"providesTags"," property for the query endpoint is used to provide the tag names to caches, and the ",[729,1188,1189],{},"invalidatesTags"," property for the mutation endpoint is used to remove them from caches.",[826,1192,1194],{"id":1193},"update-todo","Update Todo",[674,1196,1197],{},"First, to update a todo, we have to import the mutation hook:",[804,1199,1202],{"className":1200,"code":1201,"language":809},[807],"import {useUpdateTodoMutation} from\"..\u002F..\u002FServices\u002FTodoApi\"\n  const [updateTodo] = useUpdateTodoMutation();\n",[729,1203,1201],{"__ignoreMap":812},[674,1205,1206,1207,1209,1211],{},"Destructuring our trigger function is done with the ",[729,1208,1003],{},[680,1210,736],{}," We call this when we want a particular todo to be edited by passing in the current todo to be updated:",[804,1213,1216],{"className":1214,"code":1215,"language":809},[807],"const UpdateTodoHandler = () => {\n    updateTodo({ id, ...todo })\n      .unwrap()\n      .then((data) => {\n console.log(data);\n      })\n      .catch((err) => {\n console.log(err);\n      });\n  };\n",[729,1217,1215],{"__ignoreMap":812},[826,1219,1221],{"id":1220},"delete-todo","Delete Todo",[674,1223,1224,1225,1227],{},"Also, like our ",[729,1226,1003],{},",we have to import the mutation hook:",[804,1229,1232],{"className":1230,"code":1231,"language":809},[807],"import {useDeleteTodoMutation } from \"..\u002F..\u002FServices\u002FTodoApi\";\n",[729,1233,1231],{"__ignoreMap":812},[674,1235,1236],{},"We also have to use our delete trigger function returned from the mutation hook:",[804,1238,1241],{"className":1239,"code":1240,"language":809},[807],"const [deleteTodo] = useDeleteTodoMutation();\n",[729,1242,1240],{"__ignoreMap":812},[674,1244,1245,1246,1249],{},"And we'd call it whenever we want to delete a particular todo, thereby passing the unique ",[729,1247,1248],{},"id"," of the todo to be deleted:",[804,1251,1254],{"className":1252,"code":1253,"language":809},[807],"const DeleteTodoHandler = () => {\ndeleteTodo({id})\n      .unwrap()\n      .then((data) => {\n console.log(\"Todo deleted\");\n      })\n      .catch((err) => {\n console.log(err);\n      });\n  };\n",[729,1255,1253],{"__ignoreMap":812},[793,1257,1259],{"id":1258},"conclusion","Conclusion",[674,1261,1262,1263,1269],{},"With a simple example like the one above where we perform CRUD operations on a JSON server, we display the obtained data in the UI depending on the request's state and cache the information in the form. Therefore, RTK Query not only uses an understandable API, but also significantly minimizes the amount of code written. The functionality of this program can always be expanded, and you can learn more about ",[703,1264,1266],{"href":705,"rel":1265},[707],[680,1267,1268],{},"RTK Query here",[680,1270,736],{},{"title":812,"searchDepth":1272,"depth":1272,"links":1273},2,[1274,1278,1286],{"id":795,"depth":1272,"text":796,"children":1275},[1276],{"id":828,"depth":1277,"text":829},3,{"id":870,"depth":1272,"text":871,"children":1279},[1280,1281,1282,1283,1284,1285],{"id":874,"depth":1277,"text":875},{"id":966,"depth":1277,"text":967},{"id":1030,"depth":1277,"text":1031},{"id":1104,"depth":1277,"text":1105},{"id":1193,"depth":1277,"text":1194},{"id":1220,"depth":1277,"text":1221},{"id":1258,"depth":1272,"text":1259},null,"Software Development","2022-10-24T00:00:00.000Z","Let's learn about RTK Query and how to utilize it to fetch data using information from a fictitious JSON server to develop a to-do application.",false,"md","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fan-overview-of-redux-rtk-query\u002Fhero.jpeg","A MacBook with code in an IDE.",{},"\u002Fblog\u002Fan-overview-of-redux-rtk-query",{"title":665,"description":1290},"blog\u002Fan-overview-of-redux-rtk-query","Cptx_Cw_1xrN4gvaUuztUKR7HRaPo8B-9r_nNR44Dok",{"id":1301,"title":666,"body":1302,"description":1306,"draft":1291,"extension":1292,"meta":1309,"navigation":32,"path":1310,"photo":1311,"photoAlt":1287,"seo":1312,"stem":1313,"__hash__":1314},"authors\u002Fauthors\u002Feze-nnaemeka.md",{"type":671,"value":1303,"toc":1307},[1304],[674,1305,1306],{},"A highly skilled and motivated DevOps Engineer with over 3 years of experience in cloud-native distributed systems, Infrastructure as Code, and automation.",{"title":812,"searchDepth":1272,"depth":1272,"links":1308},[],{},"\u002Fauthors\u002Feze-nnaemeka","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fauthors\u002Feze-nnaemeka.jpg",{"title":666,"description":1306},"authors\u002Feze-nnaemeka","CDxtV97RWcfH__AcOh40pIZikYNQLVog6m2M171-UvQ",{"left":1316,"top":1316,"width":1317,"height":1317,"rotate":1316,"vFlip":1291,"hFlip":1291,"body":1318},0,24,"\u003Cpath fill=\"currentColor\" d=\"m7.825 13l4.9 4.9q.3.3.288.7t-.313.7q-.3.275-.7.288t-.7-.288l-6.6-6.6q-.15-.15-.213-.325T4.426 12t.063-.375t.212-.325l6.6-6.6q.275-.275.688-.275t.712.275q.3.3.3.713t-.3.712L7.825 11H19q.425 0 .713.288T20 12t-.288.713T19 13z\"\u002F>"]