Using Tanstack vue query in quasar framework +feathers pagination

[haniyasin]

used feathers Dove 5.0 , Quasar Framework, Tanstack Query (vue)
1- made a boot file in quasar to initialize vue query plugin:
import { boot } from 'quasar/wrappers'
import { VueQueryPlugin } from "@tanstack/vue-query";
export default boot(({ app }) => {
app.use(VueQueryPlugin)
})
2-register boot file in quasar.config

3- in vue page

<template>
    <p>Current Page: {{ skip/100 }} | Previous data: {{ isPreviousData }}</p>
  <q-btn @click="prevPage" label="prev"/>
  <q-btn @click="nextPage" label="next"/>
{{data}}
</template>

<script setup>
import {  useQuery} from "@tanstack/vue-query";
const skip=ref(0); //need to import ref from view omitted 
const { isLoading, isFetching, isError, data, error,isPreviousData  } = useQuery({
  queryKey: ['todos',skip],
  queryFn: ()=>getTodos(skip),
})
 async function  getTodos(skip) {
    
    const result =  await client.service('audittrail').find({
      query: {
        $limit: 100,
        $skip: skip.value,
      }
  });
  return result.data;
  } 
const prevPage = () => {
  skip.value = Math.max(skip.value - 100, 0)
}
const nextPage = () => {
  if (!isPreviousData.value) {
    skip.value = skip.value + 100
  }
}

need to handle when you reach last page/skip