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

ゴール
- タイトルにある要件で無限スクロールを実現できること
課題点
- 追加フェッチをする際にどう記述すれば良いのかわかっていない
環境
ツール・ライブラリ | 用途 | バージョン |
---|---|---|
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 |

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

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

これを月曜に見る

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

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

ここら辺に書いてありそう

schemaをこの形式に合わせてみる

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

---ここまでが本題---
ここからは個人的な問題
自分のユーザーを除外できたけどページングできなくなった
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'
})
},
},
},
}

クライアント側(resultを受け取ってから)で自分のユーザーを除外することで解決した。
このスクラップは2022/07/07にクローズされました