useInfiniteQuery with more than 1 param
hy, im trying to create infinite scroll with the useinfinitequery,
my issue that it only accept 1 param which is the pageParam, how can i make it accept other params like sort and filter
in my component i have sort and limit button to create params in the url
and in the getNextParams it return a 1 value, so does anyone know how to do it, if possible.
thank you
my issue that it only accept 1 param which is the pageParam, how can i make it accept other params like sort and filter
import { useInfiniteQuery } from '@tanstack/react-query';
import { useSearchParams } from 'react-router-dom';
export const useInifiniteData3 = () => {
const [searchParam, setSearchParam] = useSearchParams();
const page = searchParam.get('page') * 1 || 1;
const limit = searchParam.get('limit') * 1 || 10;
const { data, isLoading, fetchNextPage, hasNextPage } = useInfiniteQuery({
queryKey: ['datas'],
// queryFn: (obj) => fetchDatas3(obj),
// queryFn: () => fetchDatas3({ pageParam: page, limitParam: limit }),
queryFn: fetchDatas3,
initialPageParam: page, // initial pageParam = 1
getNextPageParam: (lastPage, allPages) => {
const nextPage = lastPage?.hasNextPage ? allPages.length + 1 : undefined;
return nextPage;
// const obj = { pageParam: nextPage, limitParam: limit };
// return obj;
},
});
return { data, isLoading, fetchNextPage, hasNextPage };
};
const fetchDatas3 = async ({ pageParam = 1, limitParam = 10 }) => {
console.log('function', pageParam, limitParam);
const res = await fetch(
`http://localhost:5000/data/datas?page=${pageParam}&limit=${limitParam}`
);
const data = await res.json();
return data;
// output:
// {
// data: [],
// totolItems: 100,
// hasNextPage: true,
// }
};import { useInfiniteQuery } from '@tanstack/react-query';
import { useSearchParams } from 'react-router-dom';
export const useInifiniteData3 = () => {
const [searchParam, setSearchParam] = useSearchParams();
const page = searchParam.get('page') * 1 || 1;
const limit = searchParam.get('limit') * 1 || 10;
const { data, isLoading, fetchNextPage, hasNextPage } = useInfiniteQuery({
queryKey: ['datas'],
// queryFn: (obj) => fetchDatas3(obj),
// queryFn: () => fetchDatas3({ pageParam: page, limitParam: limit }),
queryFn: fetchDatas3,
initialPageParam: page, // initial pageParam = 1
getNextPageParam: (lastPage, allPages) => {
const nextPage = lastPage?.hasNextPage ? allPages.length + 1 : undefined;
return nextPage;
// const obj = { pageParam: nextPage, limitParam: limit };
// return obj;
},
});
return { data, isLoading, fetchNextPage, hasNextPage };
};
const fetchDatas3 = async ({ pageParam = 1, limitParam = 10 }) => {
console.log('function', pageParam, limitParam);
const res = await fetch(
`http://localhost:5000/data/datas?page=${pageParam}&limit=${limitParam}`
);
const data = await res.json();
return data;
// output:
// {
// data: [],
// totolItems: 100,
// hasNextPage: true,
// }
};in my component i have sort and limit button to create params in the url
limit=10&sort=firstNamelimit=10&sort=firstNameand in the getNextParams it return a 1 value, so does anyone know how to do it, if possible.
thank you
