fix: multiple requests are sent on page fetch

ADOFAI-gg · Jun 17, 2024 · ff07ca4 · ff07ca4
1 parent ef855d8
commit ff07ca4
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 6 deletions.
diff --git a/src/components/templates/LevelList.svelte b/src/components/templates/LevelList.svelte
@@ -25,7 +25,7 @@
 
   let query = createInfiniteQuery({
     queryKey: ['levels'],
-    queryFn: ({ pageParam }) => fetchPage(pageParam),
+    queryFn: ({ pageParam, signal }) => fetchPage(pageParam, signal),
     initialPageParam: 0,
     getNextPageParam: (lastPage, pages) => {
       return lastPage.length === pageSize ? pages.length + 1 : null;
@@ -46,9 +46,10 @@
   //   loading = false;
   // };
 
-  const fetchPage = async (page: number) => {
+  const fetchPage = async (page: number, signal: AbortSignal) => {
     const { data } = await api.get<ListResponse<Level>>('/api/v1/levels', {
-      params: params(page * pageSize)
+      params: params(page * pageSize),
+      signal
     });
 
     return data.results;

diff --git a/src/routes/rankings/+page.svelte b/src/routes/rankings/+page.svelte
@@ -16,16 +16,17 @@
 
   let query = createInfiniteQuery({
     queryKey: ['rankings'],
-    queryFn: ({ pageParam }) => fetchPage(pageParam),
+    queryFn: ({ pageParam, signal }) => fetchPage(pageParam, signal),
     initialPageParam: 0,
     getNextPageParam: (lastPage, pages) => {
       return lastPage.length === pageSize ? pages.length + 1 : null;
     }
   });
 
-  const fetchPage = async (page: number) => {
+  const fetchPage = async (page: number, signal: AbortSignal) => {
     const { data } = await api.get<ListResponse<RankingResult>>('/api/v1/ranking', {
-      params: { offset: page * pageSize, amount: pageSize }
+      params: { offset: page * pageSize, amount: pageSize },
+      signal
     });
 
     return data.results;