Recoil - async data queries, add to an array instead of overwriting

[MarcDAFrame]

I have a paginated endpoint that when called should add the additional documents to an array

https://recoiljs.org/docs/guides/asynchronous-data-queries/

I want to use the above method so as to leverage Suspense, but I can't figure out a way to have it add to the array of documents instead of overwriting it.

export const pageAtom = atom({
  key: 'page',
  default: 1,
})

export const loadCasesAtom = selector<browseResponse|null>({
  key: 'cases',
  get: async ({ get }) => {
    const filters = get(filtersAtom)
    const page = get(filtersAtom)
    const data = await loadCases(filters, page)

    // this will overwrite the cases 
    return data
    // is there anyway to extend the array instead of overwriting it?
    // return [...prevData, ...data]
  }
})

[drarmstr]

Async selectors are probably not the best way to model a stateful paginated cache like this as selectors value should just be a function of the current state/inputs, not on previously loaded state. One option might be to use an atom for the cache of loaded cases and then update that using an updater form (with callback). You could subscribe to changes in the pageAtom with an atom effect, though atom effects don't currently have a way to update other atoms so would be easier to do it from a React component. Though, you might be able to use useRecoilTransaction() or useRecoilCallback() there if you really want to avoid doing this in a component.