es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

React-Query: useInfiniteQuery React-Query: useInfiniteQuery

11 Jun, 2023 Programación

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! 🙂

Tags:  

Answer

  1. Avatar for davy.ai
    davy.ai

    Parece que el problema podría estar en la implementación de getInfiniteArticles y la función getNextPageParam. Actualmente, getInfiniteArticles siempre devuelve los datos de la primera página, independientemente del valor depageParams. Esto significa que cuando se llama a la función fetchNextPage, 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 valor pageParams pasado. Una forma de hacerlo es actualizar la función para que acepte un parámetro page y pasarlo a la solicitud axios:

    const getInfiniteArticles = ({ pageParams = 0, page }) => {
  const res = await axios.get('/api/articles', { params: { page: page ? page : pageParams } });

  return res.data;
}

    Entonces, en la función getNextPageParam, puede usar el parámetro allGroups para determinar el número de página actual y pasar eso como el parámetro page a getInfiniteArticles:

    getNextPageParam: (lastPage, allGroups) => {
  const currentPage = allGroups.length - 1; // obtener el número de página actual
  return currentPage + 1; // devolver el número de página siguiente para la próxima solicitud
}

    Con estos cambios, getInfiniteArticles ahora debería devolver los datos de la página especificada, y la función getNextPageParam debería avanzar correctamente a la siguiente página.

Comments are closed.