注意:由于处理突变/查询/缓存更新的过程现在由update解决,我不再使用 uodateQueries,使这个问题不再相关。
所以,我有一个从帖子到评论的一对多关系:
type Comments {
createdAt: DateTime!
id: ID!
posts: Posts @relation(name: "PostsOnComments")
text: String!
updatedAt: DateTime!
user: String!
}
type Posts {
caption: String!
comments: [Comments!]! @relation(name: "PostsOnComments")
createdAt: DateTime!
displaysrc: String!
id: ID!
likes: Int
updatedAt: DateTime!
}
和一个 Root_Query,如 Apollo devTools(见附图)中所描述的:
query allPostsCommentsQuery {
allPostses {
id
displaysrc
caption
likes
comments {
id
posts {
id
}
text
user
}
}
}
运行 Add_Comment_Mutation 或 Remove_Comment_MutationNew:
export const Add_Comment_Mutation = gql`
mutation createComment ($id: ID, $textVal: String!, $userVal: String!) {
createComments (postsId: $id, text: $textVal, user: $userVal){
id
text
user
}
}
`;
export const Remove_Comment_MutationNew = gql`
mutation removeComment ($cid: ID!) {
deleteComments(id: $cid) {
id
}
}
`;
没有正确更新响应式缓存,因此我的 UI 没有正确反映由 onClick 事件触发的任何添加/删除评论。
如何让 updateQueries 正确使用 this.props.client.mutate,因为当前尝试生成“错误:更新():$unshift 的预期目标是一个数组;未定义。” 错误(见下文):
import { graphql, gql, withApollo } from 'react-apollo';
import ApolloClient from 'apollo-client';
import update from 'immutability-helper';
import { Add_Comment_Mutation, Remove_Comment_MutationNew } from '../graphql/mutations';
const Comments = React.createClass({
removeCommentMutation(commentID) {
console.log ("Remove_Comment_MutationNew is called for id=" + commentID);
const { client } = this.props;
return this.props.client.mutate({
mutation: Remove_Comment_MutationNew,
variables: {
"cid": commentID,
},
updateQueries: {
allPostsCommentsQuery: (previous, { mutationResult }) => {
console.log("Previous = " + previous);
const newComment = mutationResult.data.removeComment;
return update(previous, {
allPostses: {
comments: {
$set: [newComment],
},
},
});
}
}
})
.then(({ data }) => {
console.log('got data', data.deleteComments.id);
})
.catch(this.handleSubmitError);
},
产生的错误:
注意 - 问题似乎与
const newComment = mutationResult.data.removeComment;
它作为“未定义”返回,而不是作为对象返回。
Error: update(): expected target of $unshift to be an array; got undefined.
at invariant (http://localhost:7770/static/bundle.js:23315:16)
at invariantPushAndUnshift (http://localhost:7770/static/bundle.js:71469:4)
at Object.$unshift (http://localhost:7770/static/bundle.js:71430:6)
at update (http://localhost:7770/static/bundle.js:71408:36)
at update (http://localhost:7770/static/bundle.js:71410:32)
at update (http://localhost:7770/static/bundle.js:71410:32)
at allPostsCommentsQuery (http://localhost:7770/static/bundle.js:54181:52)
at http://localhost:7770/static/bundle.js:39552:87
at tryFunctionOrLogError (http://localhost:7770/static/bundle.js:39457:17)
at http://localhost:7770/static/bundle.js:39552:44
at Array.forEach (native)
at data (http://localhost:7770/static/bundle.js:39536:47)
at apolloReducer (http://localhost:7770/static/bundle.js:39789:24)
at combination (http://localhost:7770/static/bundle.js:23011:30)
at computeNextEntry (<anonymous>:2:27051)
at recomputeStates (<anonymous>:2:27351)
at <anonymous>:2:30904
at Object.dispatch (http://localhost:7770/static/bundle.js:22434:23)
at dispatch (<anonymous>:2:31397)
at http://localhost:7770/static/bundle.js:41210:40
at http://localhost:7770/static/bundle.js:73223:17
at Object.dispatch (http://localhost:7770/static/bundle.js:23158:19)
at http://localhost:7770/static/bundle.js:40597:30
tryFunctionOrLogError @ apollo.umd.js:1410
(anonymous) @ apollo.umd.js:1501
data @ apollo.umd.js:1485
apolloReducer @ apollo.umd.js:1738
combination @ combineReducers.js:132
computeNextEntry @ VM77918:2
recomputeStates @ VM77918:2
(anonymous) @ VM77918:2
dispatch @ createStore.js:179
dispatch @ VM77918:2
(anonymous) @ apollo.umd.js:3159
(anonymous) @ index.js:14
dispatch @ applyMiddleware.js:45
(anonymous) @ apollo.umd.js:2546