Open2
urqlでSubscriptionした新着メッセージをメッセージ一覧に取り込む
mu-sukeゴール
- Subscriptionした新着メッセージをQueryで取得しているメッセージ一覧に取り込むことができること
課題点
- メッセージ一覧を取得するQueryと新着メッセージを購読するSubscriptionが別々に呼ばれている
- updatesを使って自動的に取り込むことができそうだがやり方がわからない
- ページネーションを使っているのでそこと不整合が合わなくならないかがわからない
環境
| ツール・ライブラリ | 用途 | バージョン |
|---|---|---|
| Next.js | フロントエンドとして利用 | 12.2.2 |
| NestJS | サーバーサイドとして利用 | 9.0.5 |
| GraphQL Code Generator | コード自動生成ツール | 2.8.1 |
| URQL | GraphQL Clientのライブラリ | 2.2.2 |
| node.js | フロント、サーバーサイドの実行環境 | v16.15.0 |
参考資料
mu-sukecacheExchangeの内容を以下のように書き換えればできそう
import { cacheExchange } from '@urql/exchange-graphcache'
import { FEED_QUERY } from './components/LinkList'
const cache = cacheExchange({
updates: {
Mutation: {
post: ({ post }, _args, cache) => {
// ...
}
},
Subscription: {
newLink: ({ newLink }, _args, cache) => {
const variables = { first: 10, skip: 0, orderBy: 'createdAt_DESC' }
cache.updateQuery({ query: FEED_QUERY, variables }, data => {
if (data !== null) {
data.feed.links.unshift(newLink)
data.feed.count++
return data
} else {
return null
}
})
}
}
}
})