tengo este componente:

 const PostsList = ( { id } ) => { const { pages, size, setSize } = usePages( "/all-posts" ) return( <div id={ id } className={ styles.PostsListContainer }> { pages?.map( ( { data } ) => data?.posts?.edges?.map( ( { node: post } ) => <PostCard key={ post?.id } title={ post?.title } /> ) ) } <button onClick={ () => setSize(size+1)}>Load more</button> </div> ) } export default PostsList

El enlace usePages realiza una solicitud de Graphql y devuelve pages , una matriz de objetos, cada objeto representa una página de resultados, que se ve así:

 const pages = [ { data: { posts: { edges: [ { node: { id: 1 } }, { node: { id: 2 } }, { ... } ] } }, errors: [ ... ] }, { data: { ... }, errors: { ... }, } ]

Ahora, suponga que al obtener la página 3 se produce algún error y data.posts está vacío: ¿cómo agrego un mensaje de error a la lista?

Intenté hacer esto:

 const PostsList = ( { id } ) => { const { pages, size, setSize } = usePages( "/all-posts" ) return( <div id={ id } className={ styles.PostsListContainer }> { pages?.map( ( { data } ) => { if( data?.posts ) { return data?.posts?.edges?.map( ( { node: post } ) => <PostCard key={ post?.id } title={ post?.title } /> ) } else { return <p>Error when fetching the posts</p> } }) } <button onClick={ () => setSize(size+1)}>Load more</button> </div> ) } export default PostsList

pero, efectivamente, el mensaje de error reemplaza la lista completa, es decir, incluso las páginas anteriores que se recuperaron con éxito. Tampoco puedo configurar un estado para usarlo como indicador y actualizarlo en el método de renderizado cuando data.posts está vacío, porque eso crea el error "demasiadas re-renderizaciones".