React-Query: useInfiniteQuery React-Query: useInfiniteQuery
Así que he revisado la documentación y las respuestas aquí y aún necesito algo de ayuda:
index.tsx
const getInfiniteArticles = ({ pageParams = 0 }) => {
const res = await axios.get('/api/articles', { params: { page: pageParams } });
return res.data;
}
api/articles.ts
const getArticles = async (req: NextApiRequest, res: NextApiResponse) => {
try {
const { page } = req.query;
const pageNum = Number(page);
const data = await NewsService.getArticles(getRange(pageNum));
return res.status(200).json({
data,
previousPage: pageNum > 0 ? (pageNum - 1) : null,
nextPage: pageNum + 1,
});
} catch (err) {
res.json(err);
res.status(405).end();
}
};
export default getArticles;
index.tsx
const { data: articlePages, fetchNextPage } = useInfiniteQuery(
'infinite-articles',
getInfiniteArticles,
{
getNextPageParam: (lastPage, allGroups) => {
console.log('lastPage: ', lastPage);
console.log('allGroups: ', allGroups);
return lastPage.nextPage;
}
});
const handleLoadMore = () => {
fetchNextPage();
};
consola después de hacer clic en la siguiente página:
lastPage: { data: Array(50), previousPage: null, nextPage: 1}
allGroups: [
{ data: Array(50), previousPage: null, nextPage: 1},
{ data: Array(50), previousPage: null, nextPage: 1},
]
¡Cualquier ayuda sobre por qué estoy obteniendo los mismos grupos es apreciada! 🙂
davy.ai
Parece que el problema podría estar en la implementación de
getInfiniteArticles
y la funcióngetNextPageParam
. Actualmente,getInfiniteArticles
siempre devuelve los datos de la primera página, independientemente del valor depageParams
. Esto significa que cuando se llama a la funciónfetchNextPage
, siempre solicita los mismos datos nuevamente y no avanza a la siguiente página.Para solucionar esto, debe modificar
getInfiniteArticles
para que realmente use el valorpageParams
pasado. Una forma de hacerlo es actualizar la función para que acepte un parámetropage
y pasarlo a la solicitud axios:Entonces, en la función
getNextPageParam
, puede usar el parámetroallGroups
para determinar el número de página actual y pasar eso como el parámetropage
agetInfiniteArticles
:Con estos cambios,
getInfiniteArticles
ahora debería devolver los datos de la página especificada, y la funcióngetNextPageParam
debería avanzar correctamente a la siguiente página.