reactjs - React-apollo 突变 writeQuery 不更新 ui
问题描述
我通过 howtographql.com 学习 GraphQL,但是当使用变异进行投票时,UI 不会更新。我在商店中使用 readQuery 和 writeQuery,搜索后我在客户端测试使用 readQuery 和 writeQuery 但不再工作。
包使用及版本:
├─ apollo-boost@0.4.3
├─ apollo-cache-inmemory@1.6.2
├─ apollo-cache@1.3.2
├─ apollo-client@2.6.3
├─ apollo-link-context @1.0.18
├─ apollo-link-error@1.1.11
├─ apollo-link-http-common@0.2.14
├─ apollo-link-http@1.5.15
├─ apollo-link@1.2.12
├─ apollo-utilities@1.3.2
├─ react-apollo@2.5.8
链接列表.js
import React, { Component } from 'react';
import Link from './Link';
import { Query } from 'react-apollo';
import gql from 'graphql-tag';
export const FEED_QUERY = gql`
{
feed {
links {
id
createdAt
url
description
postedBy {
id
name
}
votes {
id
user {
id
}
}
}
}
}
`
class LinkList extends Component {
_updateCacheAfterVote = (store, createVote, linkId) => {
const data = store.readQuery({ query: FEED_QUERY })
const votedLink = data.feed.links.find(link => link.id === linkId)
votedLink.votes = createVote.link.votes
store.writeQuery({ query: FEED_QUERY, data })
}
render() {
return (
<Query query={FEED_QUERY}>
{({ loading, error, data }) => {
if (loading) return <div>Fetching</div>
if (error) return <div>Error</div>
const linksToRender = data.feed.links
return (
<div>
{linksToRender.map((link, index) => (
<Link
key={link.id}
link={link}
index={index}
updateStoreAfterVote={this._updateCacheAfterVote}
/>
))}
</div>
)
}}
</Query>
)
}
}
export default LinkList
链接.js
import React, { Component } from 'react'
import { AUTH_TOKEN } from '../constants'
import { timeDifferenceForDate } from '../utils';
import { Mutation } from 'react-apollo';
import gql from 'graphql-tag';
const VOTE_MUTATION = gql`
mutation VoteMutation($linkId: ID!) {
vote(linkId: $linkId) {
id
link {
votes {
id
user {
id
}
}
}
user {
id
}
}
}
`
class Link extends Component {
render() {
const authToken = localStorage.getItem(AUTH_TOKEN)
return (
<div className="flex mt2 items-start">
<div className="flex items-center">
<span className="gray">{this.props.index + 1}</span>
{authToken && (
<Mutation
mutation={VOTE_MUTATION}
variables={{ linkId: this.props.link.id }}
update={(store, { data: { vote } }) =>
this.props.updateStoreAfterVote(store, vote, this.props.link.id)
}
>
{voteMutation => (
<div className="ml1 gray fl1 pointer" onClick={voteMutation}>
▲
</div>
)}
</Mutation>
)}
</div>
<div className="ml1">
<div>
{this.props.link.description} ({this.props.link.url})
</div>
<div className="f6 lh-copy gray">
{this.props.link.votes.length} votes | by{' '}
{this.props.link.postedBy
? this.props.link.postedBy.name
: 'Unknown'}{' '}
{timeDifferenceForDate(this.props.link.createdAt)}
</div>
</div>
</div>
)
}
}
export default Link
解决方案
我像这样更改 _updateCacheAfterVote 函数,它的工作
_updateCacheAfterVote = (store, createVote, linkId) => {
const data = store.readQuery({ query: FEED_QUERY })
data.feed.links.find(link => link.id === linkId).votes.push(createVote)
store.writeQuery({ query: FEED_QUERY, data })
}
推荐阅读
- spring - 在 MessageListenerContainer 停止后 Spring Kafka 的 MessageListener 仍在消耗
- r - 我在 R 循环上有问题,我想生成一个特定的输出,其中包含对不同样本应用线性模型的预测和置信区间
- php - PHP - 如何过滤内容并在其他地方彼此相邻显示
- php - PHP中的方法参考
- c# - 在 Winform 中,为什么当我在一个数据源上调用 PropertyChanged 时所有绑定的属性都会更新?
- typescript - Rxjs 操作符类似于 combineLatest 但如果只有一个发出就会触发
- android-studio - 无法创建 GitHub 存储库,无法创建用户存储库 无法解析 GitHub 响应
- java - 使用 Path 类时有什么方法可以获取线的端点?
- sorting - 如何使用 Application Insights 上的结果分组进行 Azure Kusto 排序?
- python-3.x - Python - 使用标准目录结构运行单元和集成测试