pagination - 用户在材质 UI 表中滚动时如何加载更多数据

Question

我正在进行 GraphQL 查询以在我的 Material UI 表中加载数据。我希望它在滚动时加载更多数据。

数据已正确填充到表中，分页内容无法正常工作。

  return (
    <Query
      query={MESSAGE_QUERY}
      variables={{
        where: getQueryVariables({
          date,
        }),
        limit: 50,
        offset: 0,
        sortingOrder,
      }}
      fetchPolicy="cache-and-network"
    >
      {({ data, fetchMore }: QueryResult) => {
        fetchMore({
          variables: {
            offset: data.message
              ? data.message.length
              : 0,
          },
          updateQuery: (
            prevResult: { DataRowProps: any },
            { fetchMoreResult }: any,
          ) => {
            if (!fetchMoreResult) return prevResult;
            return Object.assign({}, prevResult, {
              ...fetchMoreResult.DataRowProps,
            });
          },
        });
        return data.message
          ? data.message.map(
              (rowData: DataRowProps, index: number) => {
                return containmentDOMRect ? (
                  <VisibilitySensor
                    containment={containmentDOMRect.current || undefined}
                    onChange={isVisible =>
                      isVisible && index % LOAD_SIZE === 0 && index >= LOAD_SIZE
                        ? loadMoreData(index)
                        : undefined
                    }
                  >
                    <DataRowComponent
                      {...rowData}
                      index={index}
                      selectedRow={selectedRow}
                      callBack={callBack}
                    />
                  </VisibilitySensor>
                ) : null;
              },
            )
          : null;
      }}
    </Query>
  );
};

运行代码时我没有看到任何错误，但它没有在滚动时加载更多数据。由于堆栈溢出限制，我删除了一些不重要的代码，如果需要提供，请告诉我。非常感谢任何帮助。

Answer 1

使用 fecthMore 和更新查询函数的正确方法是在 VisibilitySensor 标记内：

      {({ data, fetchMore }: QueryResult) => {
    return data.vitm_truck_message
      ? data.vitm_truck_message.map(
          (rowData: DataRowProps, index: number) => {
            const visibilitySensorKey = rowData.message_type.name
              .concat(rowData.message_sub_type.name)
              .concat(rowData.created_time);
            return containmentDOMRect ? (
              <VisibilitySensor
                key={visibilitySensorKey}
                containment={containmentDOMRect.current || undefined}
                scrollCheck
                onChange={isVisible =>
                  isVisible && index % LOAD_SIZE === 0 && index >= LOAD_SIZE
                    ? fetchMore({
                        variables: {
                          offset: data.vitm_truck_message
                            ? data.vitm_truck_message.length
                            : 0,
                        },
                        updateQuery: (
                          prev: any,
                          { fetchMoreResult }: any,
                        ) => {
                          if (
                            fetchMoreResult.vitm_truck_message.length !== 0
                          ) {
                            offsetValue = data.vitm_truck_message.length;
                            prev.vitm_truck_message.forEach(
                              (element: object) => {
                                if (
                                  data.vitm_truck_message.indexOf(element) <
                                  0
                                ) {
                                  data.vitm_truck_message.push(element);
                                }
                              },
                            );
                            fetchMoreResult.vitm_truck_message.forEach(
                              (element: object) => {
                                if (
                                  data.vitm_truck_message.indexOf(element) <
                                  0
                                ) {
                                  data.vitm_truck_message.push(element);
                                }
                              },
                            );
                          }
                          return prev;
                        },
                      })
                    : undefined
                }
              >
                <DataRowComponent
                  {...rowData}
                  index={index}
                  selectedRow={selectedRow}
                  callBack={callBack}
                />
              </VisibilitySensor>
            ) : null;
          },
        )
      : null;
  }}