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.


Related Query

More Query from same tag