react-window fixedSizeGrid with react-window-infinite-loader

Question

I tried to use react-window's fixedSizeGrid with react-infinite-loader. As mentioned it's issue, infinite-loader does not support fixedSizeGrid for the infinite load. So i found onItemsRendered override method. Now i am trying to render data with it and load on the scroll. But my data is not loading when i scroll. Here is the snippet of my ThumbGrid component I passed data and fetchMore(graphql), total size of my data from the parent component. Can anyone please help me to solve this.:

/*
* ThumbGrid Component
* 
*/
   <AutoSizer disableHeight>
      {({ width }) => {
        const columnCount = Math.floor(width / 175);
        return (
          <InfiniteLoad
            isItemLoaded={isItemLoaded}
            itemCount={100}
            loadMoreItems={fetchMore}
          >
            {({ onItemsRendered, ref }: any) => {
              const newItemsRendered = (gridData: any) => {
                const useOverscanForLoading = true;
                const {
                  visibleRowStartIndex,
                  visibleRowStopIndex,
                  visibleColumnStopIndex,
                  overscanRowStartIndex,
                  overscanRowStopIndex,
                  overscanColumnStopIndex
                } = gridData;

                const endCol =
                  (useOverscanForLoading || true
                    ? overscanColumnStopIndex
                    : visibleColumnStopIndex) + 1;

                const startRow =
                  useOverscanForLoading || true
                    ? overscanRowStartIndex
                    : visibleRowStartIndex;
                const endRow =
                  useOverscanForLoading || true
                    ? overscanRowStopIndex
                    : visibleRowStopIndex;

                const visibleStartIndex = startRow * endCol;
                const visibleStopIndex = endRow * endCol;

                onItemsRendered({
                  //call onItemsRendered from InfiniteLoader so it can load more if needed
                  visibleStartIndex,
                  visibleStopIndex
                });
              };
              return (
                <Grid
                  width={width}
                  height={height || 700}
                  columnWidth={105}
                  columnCount={columnCount}
                  itemData={{ list: data, columnCount }}
                  ref={ref}
                  innerElementType={innerElementType}
                  onItemsRendered={newItemsRendered}
                  rowCount={200}
                  rowHeight={264}
                >
                  {({columnIndex, rowIndex, data, style}) => {
                    const { list, columnCount } = data;
                    const item = list[rowIndex * columnCount + columnIndex];
                    return item ? <ThumbCard style={style} {...item} /> : null;
                  }}
                </Grid>
              );
            }}
          </InfiniteLoad>
        );
      }}
    </AutoSizer>

And here is my Parent component:

export default function() {
....
function loadMore() {
  fetchMore({
    variables: {
      offset: data.artist.albums.items.length,
      limit: 10
    },
    updateQuery: {....}
  });
}

return (<div className="album-cell cell-block">
  <ThumbGrid
   data={data.artist.albums.items}
   height={1200}
   total={data.artist.albums.total}
   fetchMore={loadMore}
  />
</div>)
}

score 0 · Accepted Answer · answered Aug 07 '19 at 07:39

So i finally achieved with help of Gerrit. I should have pass prop's loadMore function directly to fetchMore method and should pass style into ThumbCard. Also confusing one was i was trying to make a demo with codesandbox, it should show some mock data then it must use states. I passed it down to ThumbGrid so updated data will trigger ThumbGrid to re-render.

react-window fixedSizeGrid with react-window-infinite-loader

1 Answers1