Guards against spurious state mutation or side effects in pinia actions

[tafadzwagonera]

TL;DR Are guards in pinia actions justified or there's a better way to guard against spurious state mutations or side effects with pinia?

I've a simple store that manages state on front-end while keeping that state in sync with persistent state on the server. The store has a dependency on useCustomFetch, a composable wrapping the built-in useFetch, which it uses to call an API exposing CRUD operations. In the event that a call to the endpoint fails I'd like to guard against spurious state mutations or side effects.

composables/useCustomFetch.ts

// ...

export default <T = Record<K, any>>(path: string, options?: UseFetchOptions<T>) => {
  const config = useRuntimeConfig()

  const defaults: UseFetchOptions<T> = {
    baseURL: removeTrailingSlash(config.public.serverUrl),
    key: path,
    server: false,
    ...
  }

  return useFetch(path, {
    ...defaults,
    ...(options && { options }),
  })
}

stores/Bar.ts

// ...

export const useBarStore = defineStore('bar', () => {
  const bar = ref<Record<K, any>>({})
  const path = '/bars'

  // Other actions.

  async function fetchBar(id: string) {
    const { data, status, ...rest } = await useCustomFetch(
      `${path}/${id}`,
      {
        method: 'GET',
      }
    )

    if (status.value === UseFetchStatus.Error) // i.e. enum evaluates to 'error'.
      return {
        data,
        status,
        ...rest,
      }

    if (data.value) {
      bar.value = data.value
    }

    return {
      data,
      status,
      ...rest,
    }
  }

  async function updateBar(bar: Record<K, unknown>) {
    const { status, ...rest } = await useCustomFetch(
      `${path}/${bar.id}`,
      {
        method: 'PUT',
        body: bar,
      }
    )

    if (status.value === UseFetchStatus.Error)
      return {
        status,
        ...rest,
      }

    // Perform mutations (or side effects?)

    return {
      status,
      ...rest,
    }
  }

  return {
    bar,
    fetchBar,
    updateBar,
    ...
  }
}