useDeleteCharacter.js 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172
  1. // noinspection JSIgnoredPromiseFromCall
  2. export const useDeleteCharacter = defineMutation(() => {
  3. const queryCache = useQueryCache()
  4. // noinspection JSUnusedLocalSymbols
  5. const { mutate, ...mutation } = useMutation({
  6. onMutate({ id, optimisticUpdates }) {
  7. if (optimisticUpdates) {
  8. // save the current character list, and options
  9. const oldCharacterList = queryCache.getQueryData(characterListQuery.key)
  10. // find the index of the deleted character
  11. const characterIndex = _findIndex(oldCharacterList, { id })
  12. let oldOptions, oldCharacter, newCharacterList
  13. if (characterIndex >= 0) {
  14. // save the options and character
  15. oldOptions = queryCache.getQueryData(characterOptionsQuery.key)
  16. oldCharacter = oldCharacterList[characterIndex]
  17. // create a copy of the current character list without the deleted character
  18. const newCharacterList = _reject(oldCharacterList || [], { id })
  19. // calculate new character options
  20. const newOptions = getCharacterOptions(newCharacterList)
  21. // update caches
  22. queryCache.setQueryData(characterListQuery.key, newCharacterList)
  23. queryCache.setQueryData(characterOptionsQuery.key, newOptions)
  24. // cancel (without refreshing) queries depending on the character
  25. queryCache.cancelQueries({ key: characterListQuery.key })
  26. queryCache.cancelQueries({ key: characterByIdQuery(id).key })
  27. }
  28. // pass the id and the old and new character lists to the other hooks
  29. return { oldCharacter, oldCharacterList, newCharacterList, oldOptions }
  30. }
  31. },
  32. mutation: ({ id, optimisticUpdates = true }) => useEmit("character:delete", id),
  33. onSettled(_data, _error, { id }) {
  34. // invalidate the queries to refetch the new data
  35. queryCache.invalidateQueries({ key: characterListQuery.key })
  36. queryCache.invalidateQueries({ key: characterByIdQuery(id).key })
  37. },
  38. onError(error, { id, optimisticUpdates }, { oldCharacter, oldCharacterList, oldOptions, newCharacterList }) {
  39. // before applying the rollback, check if the values in the cache are the same
  40. // in case the cache was updated by another mutation or query
  41. if (optimisticUpdates && newCharacterList === queryCache.getQueryData(characterListQuery.key)) {
  42. queryCache.setQueryData(characterListQuery.key, oldCharacterList)
  43. queryCache.setQueryData(characterOptionsQuery.key, oldOptions)
  44. queryCache.setQueryData(characterByIdQuery(id).key, oldCharacter)
  45. }
  46. // handle the error
  47. console.error("[useDeleteCharacter] [onError]", error)
  48. },
  49. onSuccess() {}
  50. })
  51. return {
  52. ...mutation,
  53. deleteCharacter: (id) => mutate({ id, optimisticUpdates: true }),
  54. deleteCharacterFromEvent: (id) => mutate({ id, optimisticUpdates: false })
  55. }
  56. })