Is it a recommended practice to directly modify the cache without using useMutation?

[FishHawk]

My project is divided into an API layer, a store layer, and a UI layer, with pinia-colada used only in the store layer. I've found that directly modifying queries is much simpler to write compared to useMutation. Are there any potential issues with this way?

util.ts

import { useQueryCache, UseQueryEntryFilter } from '@pinia/colada/index';

export const cache = useQueryCache();

export const withCacheInvalidation = <TData, TArgs extends any[], TResponse>(
  apiCall: (...args: TArgs) => Promise<TResponse>,
  getFilter: (...args: TArgs) => UseQueryEntryFilter,
  updateData?: (oldData: TData) => TData | void,
) => {
  return (...args: TArgs): Promise<TResponse> => {
    return apiCall(...args).then((response) => {
      const filter = getFilter(...args);
      if (filter.key && updateData) {
        const cachedData = cache.getQueryData<TData>(filter.key);
        if (cachedData) {
          const newCachedData = updateData(cachedData);
          if (newCachedData !== undefined) {
            cache.setQueryData<TData>(filter.key, newCachedData);
          } else {
            cache.setQueryData<TData>(filter.key, cachedData);
          }
        }
      } else {
        cache.invalidateQueries(filter);
      }
      return response;
    });
  };
};

useArticleStore.ts

import { useQuery, useQueryCache } from '@pinia/colada';

import { ArticleApi } from '@/data';
import { Article, ArticleCategory } from '@/model/Article';
import { withCacheInvalidation } from './cache';

const ItemKey = 'article';
const ListKey = 'article-list';

export const useArticle = (id: string, enabled: boolean = true) =>
  useQuery({
    enabled,
    key: [ItemKey, id],
    query: () => ArticleApi.getArticle(id),
  });

export const invalidateArticle = (id: string) =>
  useQueryCache().invalidateQueries({ key: [ItemKey, id], exact: true });

export const useArticleList = (
  page: MaybeRefOrGetter<number>,
  category: MaybeRefOrGetter<ArticleCategory>,
) =>
  useQuery({
    key: () => [ListKey, toValue(category), toValue(page)],
    query: () =>
      ArticleApi.listArticle({
        page: toValue(page) - 1,
        pageSize: 20,
        category: toValue(category),
      }),
  });

export const ArticleStore = {
  useArticle,
  useArticleList,
  createArticle: withCacheInvalidation(ArticleApi.createArticle, () => ({
    key: [ListKey],
  })),
  updateArticle: withCacheInvalidation(ArticleApi.updateArticle, (id) => ({
    key: [ItemKey, id],
  })),
  deleteArticle: withCacheInvalidation(ArticleApi.deleteArticle, (id) => ({
    key: [ItemKey, id],
  })),
  pinArticle: withCacheInvalidation(
    ArticleApi.pinArticle,
    (id) => ({ key: [ItemKey, id] }),
    (article: Article) => {
      article.pinned = true;
    },
  ),
  unpinArticle: withCacheInvalidation(
    ArticleApi.unpinArticle,
    (id) => ({ key: [ItemKey, id] }),
    (article: Article) => {
      article.pinned = false;
    },
  ),
};