pagination - ユーザーがマテリアル UI テーブルをスクロールするときに、より多くのデータを読み込む方法

Question

マテリアル UI テーブルにデータをロードするための GraphQL クエリを作成しています。スクロール時により多くのデータをロードしたい。

データはテーブルに正しく入力されていますが、ページネーションは正しく機能していません。

  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 および update クエリ関数を使用する正しい方法は、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;
  }}