はじめに

ReactとMongoDBを使用した無限スクロールの実装中、ページネーションの境界でデータが重複して表示される問題に遭遇した。
この記事では、MongoDBのソート挙動に起因する問題の原因と、_idを用いた具体的な解決策について解説する。

想定読者

ReactとMongoDBを使用したアプリケーションを開発している方
無限スクロール・ページネーションをを実装している、もしくは実装予定の方
データベースのソート挙動について知りたい方

結論から

MongoDBのソート挙動により、同一ソート値を持つドキュメントの順序が一貫性を欠く場合がある。
これにより、Reactの無限スクロール実装時にキー重複警告が発生する。
_idフィールドを補助的なソートキーとして追加することで問題を解決できる。

開発環境

React 18.x
MongoDB 8.0.0
MongoDB Node.js Driver 6.9.0
TypeScript 5.x
Node.js 23.5.0

問題の詳細

大量のデータが存在するMongoDBのCollectionに対してあるクエリでフィルターした結果を、無限スクロールで表示されるデータがダブった。
具体的には無限スクロールの1回目に取得した最後のデータと２回目に取得した最初のデータが重複した。

発生した警告

Warning: Encountered two children with the same key, `.$xxxxxxxxxxxx`. 
Keys should be unique so that components maintain their identity across updates. 
Non-unique keys may cause children to be duplicated and/or omitted — the behavior 
is unsupported and could change in a future version.

問題の再現条件

以下の条件が揃った場合に発生:

フィルター条件を含むMongoDBクエリ
昇順でのソート
2ページ目以降のデータ取得

問題のあるコード

// Backend: MongoDB query
const sortObject = {
  [sortBy]: order === "asc" ? 1 : -1
};

const items = await Collection.find(query)
  .sort(sortObject)
  .skip(skip)
  .limit(limit)
  .lean()
  .exec();

// Frontend: React component
const loadMore = async (page: number) => {
  const response = await fetchItems(page);
  setState((prev) => ({
    items: [...prev.items, ...response.items], // appending returned items
    page,
  }));
};

実際はpage === 1かどうかでitemsのappendなど調整しているが、詳細は一部省略する。（本題ではないので）

原因の特定

MongoDBのソート挙動の特徴

同一のソート値を持つドキュメントが存在する場合、その順序は必ずしも一貫性を持たない
ページネーション（skipとlimit）と組み合わさると、同一ドキュメントが異なるページに出現する可能性がある
これにより、React側で同一キーを持つアイテムが重複して表示される

解決策

補助的なソートキーとして_idを追加.
(参考) MongoDB Documentation: sort()

MongoDBクエリの修正

const sortObject = {
  [sortBy]: order === "asc" ? 1 : -1,
  _id: 1  // 補助的なソートキーとして_idを追加
};

const items = await Collection.find(query)
  .sort(sortObject)
  .skip(skip)
  .limit(limit)
  .lean()
  .exec();

なぜ解決するのか

_idフィールドはMongoDBにおいて一意性が保証されている
主ソートキーが同値の場合でも、_idによる順序付けで一貫性のある結果が得られる
これにより、ページネーション時の重複が防止される

技術的考察

MongoDBのソート挙動

デフォルトでは、同一ソート値を持つドキュメントの順序は不定
分散システムやシャーディングの場合、この挙動はより顕著になる
安定したソートには必ず一意な値をソートキーに含める必要がある

まとめ

MongoDBを使用した無限スクロールの実装において、ソート挙動に起因する問題と遭遇した。
以下のケースで発生しうる。

ソート対象フィールドに重複値が存在
大量データのページネーション処理のページ境界
複数のフィルター条件の組み合わせ

_idフィールドを補助的なソートキーとして活用することで、安定したソート結果とクリーンな無限スクロールの実装が可能となる。

参考文献