score:2
Accepted answer
your code looks good, but you probably want an optimistic update: update the groups locally before the request happens, and then potentially rollback when an error occurs. this is covered in the docs here. in your case, something like:
usemutation(
values => creategroup(values),
{
onmutate: async value => {
await queryclient.cancelqueries('groups')
const previousgroups = queryclient.getquerydata('groups')
queryclient.setquerydata('groups', old => [...old, value])
return { previousgroups }
},
onerror: (err, values, context) => {
queryclient.setquerydata('groups', context.previousgroups)
},
onsettled: () => {
queryclient.invalidatequeries('groups')
}
}
)
you can also omit the refetch in onsettled if your optimistic update is considered to be correct, or you can return data from the server and put that in the cache in onsuccess
.
Source: stackoverflow.com
Related Query
- how to update group array when i create new group using ReactQuery useMutation
- How do I create a class decorator for mixing new methods into a React component when using Typescript?
- How to update an array in React using Hooks. Not adding new elements just looping through a list
- When using useState with an array argument, how do you use useEffect to update a button dynamically?
- How to create new array using of existing array?
- How to map through array of objects and create a new array of objects with a new added property using react and javascript?
- How to tell when to create a new component?
- How to create a new google meet using google calendar api
- How to create a preview (Image and description) to the Url when shared link on Social media,Gmail and Skype using React JS?
- 'Unauthorized' error when using AWS amplify with grahql to create a new user
- How to update pre-existing dependency when using create-react-app?
- How to update an object in an array of Objects using setState
- How to create a JSDoc of ref when using React.fowardRef and useImperativeHandle?
- How to create an image background fade when mapping an array of images with React
- How do I update an array using the useContext hook?
- Typescript - failure to update array of objects when using date
- How to update list of items with Infinite scroll when new item added
- How to dynamically create button for calling specific action using map array in react
- React - How to change code written in the old way when using a new approach?
- How to create React's new static function getDerivedStateFromProps as a lifecycle method using an HoC in the recompose library?
- React js useState hook. How to update state of a json object with an a array in it when a checkbox is clicked
- How to force React (functional component using hooks) to create a new component from scratch on props change?
- How to update events from event array by using reducer and handling events?
- How to update an array by index using the useState hook?
- D3.js how to update chart when with new data
- How to update the array of objects using onChange handler in React JS?
- How can I update component in React after adding a new item into the database, using react hooks?
- How to update specific value when the state is an array of objects - React
- How to filter array & update state when every click in React
- How can I create a global array in react? When I do separate operations for each index, I want them to save them in a single array
More Query from same tag
- Material UI override react subtree except for certain components
- React inline styling not working on elements
- Difference between variable in and out constructor function
- Fetch and display image in reactjs from django backend using json
- Basic usage of keys - Extract single item prop from data list
- Cannot read properties of undefined (reading 'focus')
- .Map Array inside Array
- Why is child component re-rendering if only prop has useCallback?
- React hook for scrolling window to top of element
- Sass loader not loading style
- can't change color of these icons from react icons library
- How to make React Material-UI Accordion fill entire height?
- React antd carousel methods
- Are `redux-loop` and `connected-react-router` compatible?
- A generic change handler for text inputs using Typescript/React with dictionary type
- Parameter value sent to but not received by action
- Why function onClick run by render, in setState?
- How to write the correct syntax for backgroundImage in ReactJs?
- API pagination in React
- How to change style of one element in map using react?
- AWS Developer portal - How to setup locally and change the UI
- Initializing a text input default value with data coming from state supplies the text input with old state data
- Want to call an api to get the data from mongodb in json format but getting in raw format, using javascript, node.js, express, mongodb
- Updating Context State Values using Hooks
- Add react icon(s) dynamically to navbar item(s) in component
- NPM Unmet peer dependency
- Adding Keys To Child Element In React
- Keep constant button width while toggling the text. (No fixed width in CSS)
- ' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource
- GatsbyJs, page inside folder