useInfiniteQuery: changing the key should create a new cache entry

[razbakov]

Changing the key should create a new cache entry that cumulates new pages.

Modifying the queryParam does reactively set data to the cached value or trigger query() and merge() in case of cache-miss. However, as the pages variable is shared between all merge calls, queried data from all queryParams are mixed.

Here is a small playground to illustrate the issue. Try triggering few loadMore with queryParam = 'a' and switch it to 'b' and load some extra data.

Ideally, the query function would have access to the current cached data (e.g. in the context argument). Thus, the merge function would receive the accumulated pages of the current key.

Originally posted by @VianneyRousset in #178

[razbakov]

Can there also be an issue with useQuery? Some times newData in this example is undefined.

import { useQuery, type EntryKey } from '@pinia/colada'
import { useIntersectionObserver } from '@vueuse/core'
import { ref, computed, watch, type MaybeRefOrGetter } from 'vue'

export const useInifiniteQuery = ({
  key,
  query,
  loadMoreButton,
  dataKey,
  page,
}: {
  key: MaybeRefOrGetter<EntryKey>
  query: () => Promise<any>
  loadMoreButton: Ref<HTMLElement | null>
  dataKey: string
  page: Ref<number>
}) => {
  const data = ref<any[]>([])

  const { state, asyncStatus } = useQuery({
    key,
    query,
  })

  const hasMore = computed(() => state.value?.data?.hasMore ?? false)

  function loadMore() {
    console.log('loadMore', hasMore.value, page.value)
    if (hasMore.value) {
      page.value++
    }
  }

  watch(
    state,
    (newData) => {
      console.log('newData', newData.data[dataKey])
      if (page.value === 1) {
        data.value = newData.data[dataKey] ?? []
      } else {
        data.value = [...data.value, ...(newData.data[dataKey] ?? [])]
      }
    },
    { immediate: true }
  )

  useIntersectionObserver(loadMoreButton, ([entry]) => {
    if (
      entry?.isIntersecting &&
      hasMore.value &&
      asyncStatus.value !== 'loading'
    ) {
      loadMore()
    }
  })

  return {
    state,
    data,
    hasMore,
    loadMore,
    asyncStatus,
  }
}

[r-moret]

Hi! I'm having the same stated problem, which sadly makes this feature unusable for me at this moment, do we know anything about any advancement on it?

Is the plan to first resolve the API for useInfiniteQuery()(#178) and then handle this bug, or will this bug be solved independently of the new API?

PS: Thank you so much for all your work @posva!

[VianneyRousset]

@r-moret, I made a quick patch you can use. Froze the pinia-colada version to 0.15.1 in your package.json and use patch-package to apply the following patch after installation.

https://gist.github.com/VianneyRousset/f11fa3afeedf894a0d97a9f3d543651f

[posva]

@r-moret It just needs to be fixed (#178 (comment)). I still haven't had the time for it so feel free to give it a try!