query params reactivity

[aprod-captiwate]

Hey, we are trying out rstore and we would like to implement a basic pagination to our component

const store = useStore();
const { data: conversations } = store.conversations.queryMany({
    params: {
        page: page.value,
    },
});

This is our current code, I tried to increase the page number, but rstore won't fetch new entries from the API

setInterval(() => {
    page.value++;
}, 1000)

Is there a workaround I'm missing here?

Thanks!

[Akryum]

For now you need to use a function:

const store = useStore();
const { data: conversations } = store.conversations.queryMany(() => ({
    params: {
        page: page.value,
    },
}));

[aprod-captiwate]

Thanks @Akryum , that worked. We now need a way to get the "max_pages" from the response to not fetch after we reached the last one (it is an infinite scroll component), do you have something in your mind how to do that?

[damienroche]

@aprod-captiwate maybe you can move this logic inside your hook.

// eg for response structured like this
// {
//   items: []
//   page: number
//   totalPage: number
// }

hook('fetchMany', async (payload) => {
  let page = 0
  const perPage = 20
  const firstCall = $fetch(payload.model.name, { params: { page, perPage }})
  
  // get total page from first call request
  const totalPage = firstCall.totalPage

  // if totalPage === 1 setResult and return
  if (totalPage === 1) {
    setResult(firstCall.items)
    return
  }

  const result = []

  const promises = await Promise.all(Array.from({ length: totalPage - 1 }, (_, i) => $fetch(payload.model.name, { params: { page: i + 1, perPage }})))

  for (const response of promises) {
    result.push(...(response['items']));
  }

  setResult([firstCall.items, ...result])
})

[Akryum]

In v0.6.4, the meta object is exposed when using queryFirst or queryMany, so you can try storing pagination information on it.