ApolloClient：重构updateQueries以使用this.props.client.mutate

Question

注意：由于update现在处理了处理变异/查询/缓存更新的过程，我不再使用uodateQueries，使这个问题不再相关。

所以，我从帖子到评论有一对多的关系：

＆＃13;

＆＃13;

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!
}

＆＃13;

＆＃13;

＆＃13;

和一个Root_Query，如Apollo devTools（见附图）所示：

＆＃13;

＆＃13;

  query allPostsCommentsQuery {
    allPostses {
      id
      displaysrc
      caption
      likes
      comments {
        id
        posts {
          id
        }
        text
        user
      }
    }
  }

＆＃13;

＆＃13;

＆＃13;

运行Add_Comment_Mutation或Remove_Comment_MutationNew：

＆＃13;

＆＃13;

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
    }
  }
`;

＆＃13;

＆＃13;

＆＃13;

未正确更新反应式缓存，因此我的UI无法正确反映由onClick事件触发的任何注释的添加/删除。

如何让updateQueries正确使用this.props.client.mutate，因为当前尝试生成＆＃34;错误：update（）：$ unshift的预期目标是一个数组;未定义。＆＃34;错误（见下文）：

＆＃13;

＆＃13;

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);
  },

＆＃13;

＆＃13;

＆＃13;

生成的错误：

注意 - 问题似乎与

有关

＆＃13;

＆＃13;

const newComment = mutationResult.data.removeComment;

＆＃13;

＆＃13;

＆＃13;

作为＆＃39; undefined＆＃39;而不是作为对象返回。

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

我认为你不能连接突变。至少错误消息告诉你。它应该是这样的：

...

removeCommentMutation(commentID) {
    const { client } = this.props;

    client.mutate({
      mutatation: Remove_Comment_Mutation,
      variables: {
        "cid": commentID
      },
      updateQueries: {
        removeComment: (previous, { mutationResult }) => {
          const newComment = mutationResult.data.submitComment;

          return update(prev, {
            allPostses: {
              comments: {
                $unshift: [newComment],
              },
            },
          });
        }
      }
    });
  }

  ...