Pattern for transforming and sharing data and about pagination

[lishine]

I am probably over-engineering it, I could just pass the data through context or props, but it is interesting to know what is the recommended/not recommended pattern...

It is about: when data is received, it is transformed and then consumed. So this is a pattern to consume transformed data from a cache. I am consulting whether this is a good pattern.
So it is about using this lib as global state management for the fetched data, but the data should be ready to consume.

The use case:
Fetch images from Unsplash incrementally
https://api.unsplash.com/search/photos?client_id=...&page=1

When an infinite list component asks for more images, it signals to a central component/hook.
Than component will fetch, transform the data and append it to the previous

  const { status, isFetching } = useQuery(['gallery', config, state.searchTerm, state.page], fetchGallery, {
    onSuccess(results: Source[]) {
      queryCache.setQueryData('gallery-rows', (rows: TRow[]) => calcRows(results, rows, config))
    },
  })

Infinite list component will re-render with the updated data:

  const { data: rows = [], ...rest } = useQuery('gallery-rows', undefined, { manual: true })

This is the only way I found for a component to subscribe to this data.

I could return from fetchGallery the transform data but then how would a component subscribe to this data using just a key 'gallery' and not the whole queryKey ['gallery', config, state.searchTerm, state.page] ?

BTW it is maybe not good pattern in general to use a cache that way as a global store, because the access is with a string, it is more problematic to get typed with Typescript I suppose.

About pagination. It is an infinite list, so it is more a case for useInfiniteQuery than useQuery or usePaginatedQuery. But I had to solve these problems:

1. (this one simple to solve) The api for useInfiniteQuery assumes that the page is coming from the server which is not the case here
2. It saves the data as [{},{},{}], it does not help, just fills the memory because the cache should hold the incrementally transformed data ready to consume.
   And the data that returned from the fetch function is only ADDED to this cache, not replacing.

So I am using the useQuery.

[wolverineks]

did you figure it out?
have you checked out the documentation on https://react-query.tanstack.com/docs/api/#useinfinitequery?