What's the best way to handle data fetching in Vue + Vue-Router + Pinia?

[segevfiner]

A frequent issue in the app developed at my current workplace is how to wrangle data fetching, refetching, caching, and so on, of server side data. Our uses Vue Router & Pinia, and I'm wondering what's the best way to use them to handle fetching data based on the URL params (Though there are other cases where data fetching is needed, I'm looking at this problem as a start).

A classic way to handle this in the backend with any express-like server framework in any language is to fetch data, eagerly or lazily, using so called middlewares at different levels at the URL hierarchy storing them at some request context to be used by the actual handler of the route or subsequent middlewares. Removing the need to duplicate data fetching code and avoiding fetching stuff multiple times and so on.

It might be tempting to just use route guards, BUT they are not executed at the most obvious times, the beforeEntered at the route level is only executed on first navigation to a route, and not when just changing a URL params, making it useless for this purpose. The globals beforeEach/beforeResolve ones execute for each and every route, which means you will need to use route meta or "magic" param names to know what to fetch in one large or multiple such functions, and the checks for this need to run for each navigation, instead of letting Vue Router just run the needed functions based on the route.

At the component level, you can use route guards or just watch the route to fetch data, to handle this at a higher level rather than at each page, you need to handle this at some layout component with appropriate children. This can be a bit annoying though when all you need is to fetch data and not add anything to the layout for a certain sub-path of the routes, you will need to add a pass-through component with just a router-view to be able to watch or use the route guards.

And that's all assuming that I know what data to fetch at that level, say I have some internal component that needs some data and doesn't handle loading it on it's own, then I need to be sure to fetch it at the relevant higher component in the hierarchy for it to function, in each page that needs it.

And this is without addressing where and when to show loaders and error indicators for such data fetching which also has to be handled in any real app.

I have also seen @tanstack/vue-query, but that's at the category of an alternative to doing this with Pinia and handles the whole magic of fetching, refetching, caching for you implicitly using a query key you pass to it (Although it doesn't seem to address in its docs what's the best pattern for reuse of queries across different components rather than just copying and pasting them all over the place).

And for an IndexedDB case, I recently tried Dexie's liveQuery, wrapping it via @vueuse/rxjs's from & useObservable so I just get a reactive ref which I can stick in a Pinia store or in a component.

Wouldn't it be a bit cool if there was just something like that for any kind of promise returning function, that handles all the magic of fetching, refetching (Including on refocus and stuff like that if you want) and so on for you, like vue-query, but it just assumes you would use Pinia to share stuff, and reactive state to know when to update so you don't need to manually define a key, rather it works like computed or watch instead? Something which is "more Vue" in nature and just makes this problem trivial?

What's the best way to handle this? Any ideas?

[Ena-Heleneto]

maybe you can customize a Ref variable by customRef()

[Ena-Heleneto]

like this

type InsFlag = 'device' | 'deviceType' | 'user' | 'store' | 'subFaults' | 'alarm' | 'regional' | 'firmware' | 'rootDeviceType' | 'batteryType'

const getUserList = async () => (await userList({ size: 9999, index: 1 })).list

const getStoreList = async () => (await storeList({ size: 999, index: 1 })).list

const getAlarmList = async () => (await alarmTypeList({ index: 1, size: 999 })).list

const getRegionalList = async () => (await areaList({ index: 1, size: 999 })).list

const getFirmwareList = async () => (await firmwareList({ index: 1, size: 999 })).list

const getBatteryTypeList = async () => (await batteryTypeList({ index: 1, size: 999 })).list

const getDeviceList = async () => (await deviceList({ index: 1, size: 9999 })).list

const getDeviceTypeList = async () => (await deviceTypeParentNode({})).list

const getDeviceRootTypeList = async () => (await deviceTypeParentNode({ query_all: 1 })).list

const insMap = new Map<InsFlag, Function>()
  .set('user', getUserList)
  .set('device', getDeviceList)
  .set('deviceType', getDeviceTypeList)
  .set('store', getStoreList)
  .set('alarm', getAlarmList)
  .set('regional', getRegionalList)
  .set('firmware', getFirmwareList)
  .set('rootDeviceType', getDeviceRootTypeList)
  .set('batteryType', getBatteryTypeList)

let bufferQueue: { flag: InsFlag; buffer: keyValueModel[] }[] = []
let timeout: NodeJS.Timeout | null = null

export const useComposable = (insFlag: InsFlag, { value, label }: keyValueModel) => {
  const queueTemp: { flag: InsFlag; buffer: keyValueModel[] } | undefined = bufferQueue.find(e => e.flag === insFlag)
  if (queueTemp) {
    timeout = setTimeout(() => {
      bufferQueue = []
      timeout && (clearTimeout(timeout))
    }, 1000)
  }

  return customRef<Promise<keyValueModel[]>>((track, trigger) => {
    return {
      get: async () => {
        const bufferTemp = bufferQueue.find(e => e.flag === insFlag)
        if (bufferTemp) {
          track()
          return bufferTemp.buffer
        }
        else {
          const res = await insMap.get(insFlag)?.call(this)
          const data: keyValueModel[] = res?.map((e: any) => ({ value: e[value as keyof UserList], label: e[label as keyof UserList] as string })) || []
          bufferQueue.push({ flag: insFlag, buffer: data })
          track()
          return data
        }
      },
      set: (newValue) => {
        value = newValue
        trigger()
      },
    }
  })
}