Graphql Code Generator x URQLで無限スクロールを実装する

mu-suke 2022/05/13

ゴール

タイトルにある要件で無限スクロールを実現できること

課題点

追加フェッチをする際にどう記述すれば良いのかわかっていない

環境

ツール・ライブラリ	用途	バージョン
Next.js	フロントエンドとして利用	12.1.0
NestJS	サーバーサイドとして利用	8.0.0
GraphQL Code Generator	コード自動生成ツール	2.6.2
URQL	GraphQL Clientのライブラリ	2.2.0
node.js	フロント、サーバーサイドの実行環境	v16.14.0

mu-suke 2022/05/13

graphcacheでやる方法はあったけど追加フェッチの方法までは書いてない

mu-suke 2022/05/13

これを参考にしたが、次のn件だけが表示された

mu-suke 2022/05/13

これを月曜に見る

mu-suke 2022/05/16

URQLでの実装例があったので参考にしている
次のn件を取得できたが、実装例のように同じリストとして表示することができない

mu-suke 2022/05/16に更新

todo

原因がcacheExchangeにあることがわかった
graphql-code-genで生成したコードだとurqlのcacheがうまく動作していないのでは？
上記の認識が正しいかどうかを調査する

上の形式に合わせたらできた
色々いじったので何によって解決できたのかはこれから調べる

mu-suke 2022/07/07に更新

---ここまでが本題---

ここからは個人的な問題

自分のユーザーを除外できたけどページングできなくなった

export const graphcacheConfig = {
  resolvers: {
    Query: {
      users: relayPagination(),
    },
    PaginatedUsersOutput: {
      edges: (parent: PaginatedUsers) => {
        console.log('edges: ', parent.edges)
        return parent.edges.filter(edge => {
          if (!edge) {
            return false
          }
          return edge.node.uid !== 'nCIghDnXmKGSsxxO6rw96xFmwVVQ'
        })
      },
    },
  },
}

mu-suke 2022/07/07

クライアント側（resultを受け取ってから）で自分のユーザーを除外することで解決した。