T
TanStack•2y ago
deep-jade

Not working pagination ref paramter with refetch

useUserQuery.ts 
export default function useUserQuery() {
  const queryClient = useQueryClient();
  const searchQuery = ref<UserSearchQuery>({
    page: 1,
    limit: 10
  });
  const { data, isLoading, isError, isFetching, refetch } = useQuery<PayloadUser>(
    [QueryKey.User],
    () => getData(searchQuery.value).then((res) => res.data),
    {
      keepPreviousData: true,
    }
  );

  return {
    searchQuery,
    data,
    isLoading,
    isFetching,
    isError,
    refetch
  };
}
export default function useUserQuery() {
  const queryClient = useQueryClient();
  const searchQuery = ref<UserSearchQuery>({
    page: 1,
    limit: 10
  });
  const { data, isLoading, isError, isFetching, refetch } = useQuery<PayloadUser>(
    [QueryKey.User],
    () => getData(searchQuery.value).then((res) => res.data),
    {
      keepPreviousData: true,
    }
  );

  return {
    searchQuery,
    data,
    isLoading,
    isFetching,
    isError,
    refetch
  };
}
user.vue 
<script lang="ts" setup>
import useUserQuery from "@/composables/useUserQuery";

const { searchQuery, isLoading, data, isFetching, refetch } = useUserQuery();
const currentPageChange = (page) => {
  searchQuery.value.page = page;
  refetch()
};

const itemsPerPageChange = (limit) => {
  searchQuery.value.limit = limit;
  refetch()
};
</script>
<template>
....
</template>
<script lang="ts" setup>
import useUserQuery from "@/composables/useUserQuery";

const { searchQuery, isLoading, data, isFetching, refetch } = useUserQuery();
const currentPageChange = (page) => {
  searchQuery.value.page = page;
  refetch()
};

const itemsPerPageChange = (limit) => {
  searchQuery.value.limit = limit;
  refetch()
};
</script>
<template>
....
</template>
If I change limit or page, again call with initial searchQuery ref value etc If I changed limit = 100, 1. call api with limit = 100 2. again call api with limit = 10 = initial value
8 Replies
foreign-sapphire
foreign-sapphire•2y ago
1. Include searchQuery in the queryKey 2. Remove refetch calls. Query will be refetched automatically when queryKey changes.
deep-jade
deep-jadeOP•2y ago
thanks for your reply got it your idea but I need refectch because I have to call api when click button so I have to use refetch
deep-jade
deep-jadeOP•2y ago
No description
deep-jade
deep-jadeOP•2y ago
How to I can call api when click over search button? I have to divide pagination(page limit) ref and search ref?
foreign-sapphire
foreign-sapphire•2y ago
You could have another ref for search input and copy that to searchQuery on button click.
deep-jade
deep-jadeOP•2y ago
umm If so when we have to use refetch?
foreign-sapphire
foreign-sapphire•2y ago
You can use refetch to manually trigger queryFn. But it's more like an escape hatch. I would always try to make it work without triggering refetch as it's more robust. Ex if you do it without refetch, search and pagination will have its own entry in the cache. When you change to previous page for example you will have data for that page immediately available which updates in the background.
deep-jade
deep-jadeOP•2y ago
Thanks @MrMentor I will follow your suggestion I don't wanna cache, If I wanna like that with refetch, no solution?

Did you find this page helpful?