var Component=(()=>{var d=Object.create;var t=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,N=Object.prototype.hasOwnProperty;var k=(a,e)=>()=>(e||a((e={exports:{}}).exports,e),e.exports),y=(a,e)=>{for(var s in e)t(a,s,{get:e[s],enumerable:!0})},l=(a,e,s,o)=>{if(e&&typeof e=="object"||typeof e=="function")for(let c of u(e))!N.call(a,c)&&c!==s&&t(a,c,{get:()=>e[c],enumerable:!(o=h(e,c))||o.enumerable});return a};var f=(a,e,s)=>(s=a!=null?d(m(a)):{},l(e||!a||!a.__esModule?t(s,"default",{value:a,enumerable:!0}):s,a)),g=a=>l(t({},"__esModule",{value:!0}),a);var r=k((T,i)=>{i.exports=_jsx_runtime});var q={};y(q,{default:()=>b,frontmatter:()=>w});var n=f(r()),w={title:"Managing state with react query",excerpt:"We look at what makes React Query, one popular method to deal with state in web apps, so great. Especially to deal with server state and state sync.",date:"2022-09-13"};function p(a){let e=Object.assign({p:"p",a:"a",h2:"h2",span:"span",ul:"ul",li:"li",blockquote:"blockquote",h3:"h3",pre:"pre",code:"code"},a.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(e.p,{children:["Managing the state of web apps as they get more complex is one of the difficult tasks we face today. Dealing with state management, particularly server states, is frustrating. We'll look at what makes ",(0,n.jsx)(e.a,{href:"https://tanstack.com/query",children:"React Query"}),", one popular method to deal with this, so great."]}),` `,(0,n.jsxs)(e.h2,{id:"what-is-the-problem-that-it-solves",children:[(0,n.jsx)(e.a,{"aria-hidden":"true",tabIndex:"-1",href:"#what-is-the-problem-that-it-solves",children:(0,n.jsx)(e.span,{className:"icon icon-link"})}),"What is the problem that it solves?"]}),` `,(0,n.jsx)(e.p,{children:"Frameworks such as React provide excellent state management mechanisms. Using tools like react hooks simplifies processing client state. Management is straightforward since we have total control over this state. Working with server state, on the other hand, is a very different story. Here's why it's difficult:"}),` `,(0,n.jsxs)(e.ul,{children:[` `,(0,n.jsx)(e.li,{children:"It is persisted remotely."}),` `,(0,n.jsx)(e.li,{children:"Server data is asynchronous. It can easily be outdated."}),` `,(0,n.jsx)(e.li,{children:"Tracking changes can be hard since it's shared(other people can change it)."}),` `,(0,n.jsx)(e.li,{children:"Caching, updating, deduping, memoizing, performance optimization, and other challenges come as you move along, until it becomes a headache."}),` `]}),` `,(0,n.jsxs)(e.blockquote,{children:[` `,(0,n.jsx)(e.p,{children:"React Query allows you to solve all of the tough issues and difficulties of server state while having it operate really effectively out-of-the-box with minimal configuration. It can be adjusted to your preferences as your application evolves."}),` `]}),` `,(0,n.jsxs)(e.h2,{id:"what-can-react-query-provide",children:[(0,n.jsx)(e.a,{"aria-hidden":"true",tabIndex:"-1",href:"#what-can-react-query-provide",children:(0,n.jsx)(e.span,{className:"icon icon-link"})}),"What can React Query provide?"]}),` `,(0,n.jsx)(e.p,{children:"Tanstack's React Query is a powerful asynchronous state management for TS/JS, React, Solid, Vue, and Svelte. You can get rid of complex state management, manual refetching, and endless async-spaghetti code using this package. React-query provides declarative, always-up-to-date auto-managed queries and mutations that improve both developer and user experiences."}),` `,(0,n.jsx)(e.p,{children:"React query has various fantastic features, including"}),` `,(0,n.jsxs)(e.ul,{children:[` `,(0,n.jsx)(e.li,{children:"Async State Management."}),` `,(0,n.jsx)(e.li,{children:"A powerful cache layer"}),` `,(0,n.jsx)(e.li,{children:"Optimistic Updates"}),` `,(0,n.jsx)(e.li,{children:"Pre-fetching"}),` `,(0,n.jsx)(e.li,{children:"server and client state synchronization."}),` `]}),` `,(0,n.jsxs)(e.h2,{id:"react-query-in-depth",children:[(0,n.jsx)(e.a,{"aria-hidden":"true",tabIndex:"-1",href:"#react-query-in-depth",children:(0,n.jsx)(e.span,{className:"icon icon-link"})}),"React Query in depth"]}),` `,(0,n.jsxs)(e.h3,{id:"queries",children:[(0,n.jsx)(e.a,{"aria-hidden":"true",tabIndex:"-1",href:"#queries",children:(0,n.jsx)(e.span,{className:"icon icon-link"})}),"Queries"]}),` `,(0,n.jsx)(e.p,{children:"When using React Query to make queries, there is no need to create a context or a state manager to distribute that data throughout all of the different places that want the data. We get a cache layer that is shared between all of the instances, and only one of them needs to actually run the function. All of them share a loading state, an error state, and all of them share the data when that data comes through."}),` `,(0,n.jsx)(e.pre,{className:"language-javascript",children:(0,n.jsxs)(e.code,{className:"language-javascript code-highlight",children:[(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token keyword module",children:"import"})," ",(0,n.jsxs)(e.span,{className:"token imports",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"{"})," useQuery ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"})]})," ",(0,n.jsx)(e.span,{className:"token keyword module",children:"from"})," ",(0,n.jsx)(e.span,{className:"token string",children:'"react-query"'}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsx)(e.span,{className:"code-line",children:` `}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token keyword",children:"function"})," ",(0,n.jsx)(e.span,{className:"token function",children:(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"App"})}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token keyword",children:"const"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"})," isLoading",(0,n.jsx)(e.span,{className:"token punctuation",children:","})," error",(0,n.jsx)(e.span,{className:"token punctuation",children:","})," data ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"="})," ",(0,n.jsx)(e.span,{className:"token function",children:"useQuery"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token punctuation",children:"["}),(0,n.jsx)(e.span,{className:"token string",children:'"todos"'}),(0,n.jsx)(e.span,{className:"token punctuation",children:"]"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token arrow operator",children:"=>"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token function",children:"fetch"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token string",children:'"https://jsonplaceholder.typicode.com/todos"'}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token method function property-access",children:"then"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token parameter",children:"res"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token arrow operator",children:"=>"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" res",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token method function property-access",children:"json"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),` `]})]})}),` `,(0,n.jsxs)(e.h3,{id:"mutations",children:[(0,n.jsx)(e.a,{"aria-hidden":"true",tabIndex:"-1",href:"#mutations",children:(0,n.jsx)(e.span,{className:"icon icon-link"})}),"Mutations"]}),` `,(0,n.jsxs)(e.p,{children:["As for mutations, they are typically used to create, update, or delete data or perform server side-effects. It is a thing that occurs when a user does something. When a mutation occurs, react query provides loading and error states, the ability to define distinct conditions, callbacks for on success, on failure, and so on, as well as the option to invalidate a query or make an ",(0,n.jsx)(e.a,{href:"https://tanstack.com/query/v4/docs/guides/optimistic-updates",children:"Optimistic Update"}),"."]}),` `,(0,n.jsx)(e.pre,{className:"language-javascript",children:(0,n.jsxs)(e.code,{className:"language-javascript code-highlight",children:[(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token keyword",children:"function"})," ",(0,n.jsx)(e.span,{className:"token function",children:(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"App"})}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token keyword",children:"const"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"})," isLoading",(0,n.jsx)(e.span,{className:"token punctuation",children:","})," isError",(0,n.jsx)(e.span,{className:"token punctuation",children:","})," isSuccess",(0,n.jsx)(e.span,{className:"token punctuation",children:","})," error",(0,n.jsx)(e.span,{className:"token punctuation",children:","})," mutate ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"="})," ",(0,n.jsx)(e.span,{className:"token function",children:"useMutation"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token parameter",children:"newTodo"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token arrow operator",children:"=>"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token keyword control-flow",children:"return"})," axios",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token method function property-access",children:"post"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token string",children:'"/todos"'}),(0,n.jsx)(e.span,{className:"token punctuation",children:","})," newTodo",(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsx)(e.span,{className:"code-line",children:` `}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token keyword control-flow",children:"return"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token operator",children:"<"}),"div",(0,n.jsx)(e.span,{className:"token operator",children:">"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),"isLoading ",(0,n.jsx)(e.span,{className:"token operator",children:"?"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token string",children:'"Adding todo..."'}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token operator",children:"<"}),(0,n.jsx)(e.span,{className:"token operator",children:">"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),"isError ",(0,n.jsx)(e.span,{className:"token operator",children:"?"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"<"}),"div",(0,n.jsx)(e.span,{className:"token operator",children:">"}),(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"An"})," error occurred",(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),"error",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"message"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,n.jsx)(e.span,{className:"token operator",children:"<"}),(0,n.jsx)(e.span,{className:"token operator",children:"/"}),"div",(0,n.jsx)(e.span,{className:"token operator",children:">"})," ",(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token keyword null nil",children:"null"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),` `]}),(0,n.jsx)(e.span,{className:"code-line",children:` `}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),"isSuccess ",(0,n.jsx)(e.span,{className:"token operator",children:"?"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"<"}),"div",(0,n.jsx)(e.span,{className:"token operator",children:">"}),(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Todo"})," added",(0,n.jsx)(e.span,{className:"token operator",children:"!"}),(0,n.jsx)(e.span,{className:"token operator",children:"<"}),(0,n.jsx)(e.span,{className:"token operator",children:"/"}),"div",(0,n.jsx)(e.span,{className:"token operator",children:">"})," ",(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token keyword null nil",children:"null"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),` `]}),(0,n.jsx)(e.span,{className:"code-line",children:` `}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token operator",children:"<"}),`button `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" onClick",(0,n.jsx)(e.span,{className:"token operator",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token arrow operator",children:"=>"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token function",children:"mutate"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"})," ",(0,n.jsx)(e.span,{className:"token literal-property property",children:"id"}),(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token keyword",children:"new"})," ",(0,n.jsx)(e.span,{className:"token class-name",children:"Date"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","})," ",(0,n.jsx)(e.span,{className:"token literal-property property",children:"title"}),(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token string",children:'"Do Laundry"'})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token operator",children:">"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Create"})," ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Todo"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token operator",children:"<"}),(0,n.jsx)(e.span,{className:"token operator",children:"/"}),"button",(0,n.jsx)(e.span,{className:"token operator",children:">"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token operator",children:"<"}),(0,n.jsx)(e.span,{className:"token operator",children:"/"}),(0,n.jsx)(e.span,{className:"token operator",children:">"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token operator",children:"<"}),(0,n.jsx)(e.span,{className:"token operator",children:"/"}),"div",(0,n.jsx)(e.span,{className:"token operator",children:">"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),` `]})]})}),` `,(0,n.jsxs)(e.h3,{id:"optimistic-updates-and-invalidation",children:[(0,n.jsx)(e.a,{"aria-hidden":"true",tabIndex:"-1",href:"#optimistic-updates-and-invalidation",children:(0,n.jsx)(e.span,{className:"icon icon-link"})}),"Optimistic updates and Invalidation"]}),` `,(0,n.jsxs)(e.p,{children:["When doing mutations, you can make the changes manually, like via JavaScript on the client. It's known as an ",(0,n.jsx)(e.code,{children:"Optimistic Update"}),". There is a possibility that the mutation may fail if you optimistically update your state before performing it. Most of these failures may be avoided by simply doing a refetch for your optimistic queries to return them to their original server state. But, Sometimes refetching does not work properly, and the mutation error might indicate a server issue that prevents refetching. In this scenario, you may use the onMutate handler to revert your modification."]}),` `,(0,n.jsxs)(e.p,{children:["When you are certain that a query's data is outdated as a result of something that the user has done, you can't always wait for queries to become stale before fetching them again. For that purpose, the ",(0,n.jsx)(e.code,{children:"QueryClient"})," offers a function called ",(0,n.jsx)(e.code,{children:"invalidateQueries"})," that lets you mark queries as stale and maybe refetch them too. In order for JavaScript to run the query again, you must ",(0,n.jsx)(e.code,{children:"invalidate"})," the current one."]}),` `,(0,n.jsx)(e.pre,{className:"language-javascript",children:(0,n.jsxs)(e.code,{className:"language-javascript code-highlight",children:[(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token function",children:"useMutation"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),"updateTodo",(0,n.jsx)(e.span,{className:"token punctuation",children:","})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token function-variable function",children:"onMutate"}),(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token keyword",children:"async"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token parameter",children:"newTodo"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token arrow operator",children:"=>"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token comment",children:"// Cancel any outgoing refetches (so they don't overwrite our optimistic update)"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token keyword control-flow",children:"await"})," queryClient",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token method function property-access",children:"cancelQueries"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token punctuation",children:"["}),(0,n.jsx)(e.span,{className:"token string",children:'"todos"'}),(0,n.jsx)(e.span,{className:"token punctuation",children:","})," newTodo",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"id"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"]"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsx)(e.span,{className:"code-line",children:` `}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token comment",children:"// Snapshot the previous value"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token keyword",children:"const"})," previousTodo ",(0,n.jsx)(e.span,{className:"token operator",children:"="})," queryClient",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token method function property-access",children:"getQueryData"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token punctuation",children:"["}),(0,n.jsx)(e.span,{className:"token string",children:'"todos"'}),(0,n.jsx)(e.span,{className:"token punctuation",children:","})," newTodo",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"id"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"]"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsx)(e.span,{className:"code-line",children:` `}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token comment",children:"// Optimistically update to the new value"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" queryClient",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token method function property-access",children:"setQueryData"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token punctuation",children:"["}),(0,n.jsx)(e.span,{className:"token string",children:'"todos"'}),(0,n.jsx)(e.span,{className:"token punctuation",children:","})," newTodo",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"id"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"]"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","})," newTodo",(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsx)(e.span,{className:"code-line",children:` `}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token comment",children:"// Return a context with the previous and new todo"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token keyword control-flow",children:"return"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"})," previousTodo",(0,n.jsx)(e.span,{className:"token punctuation",children:","})," newTodo ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","}),` `]}),(0,n.jsx)(e.span,{className:"code-line",children:` `}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token comment",children:"// Always refetch after error or success:"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token function-variable function",children:"onSettled"}),(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsxs)(e.span,{className:"token parameter",children:["newTodo",(0,n.jsx)(e.span,{className:"token punctuation",children:","})," error",(0,n.jsx)(e.span,{className:"token punctuation",children:","})," variables",(0,n.jsx)(e.span,{className:"token punctuation",children:","})," context"]}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token arrow operator",children:"=>"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token keyword control-flow",children:"if"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),"error",(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" queryClient",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token method function property-access",children:"setQueryData"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:"["}),(0,n.jsx)(e.span,{className:"token string",children:'"todos"'}),(0,n.jsx)(e.span,{className:"token punctuation",children:","})," context",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"newTodo"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"id"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"]"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" context",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"previousTodo"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),` `]}),(0,n.jsx)(e.span,{className:"code-line",children:` `}),(0,n.jsxs)(e.span,{className:"code-line",children:[" queryClient",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token method function property-access",children:"invalidateQueries"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token punctuation",children:"["}),(0,n.jsx)(e.span,{className:"token string",children:'"todos"'}),(0,n.jsx)(e.span,{className:"token punctuation",children:","})," newTodo",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"id"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"]"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]})]})})]})}function v(a={}){let{wrapper:e}=a.components||{};return e?(0,n.jsx)(e,Object.assign({},a,{children:(0,n.jsx)(p,a)})):p(a)}var b=v;return g(q);})(); ;return Component;

All Posts

How I built my Personal Website

Managing state with react query