为什么我的 Apollo Client 乐观回复失败？答案

【问题标题】：Why is my Apollo Client optimistic reply failing?为什么我的 Apollo Client 乐观回复失败？
【发布时间】：2018-07-08 21:24:23
【问题描述】：

我记录下来是为了记录我花了几个小时才解决的问题的答案。场景：

我在 React Apollo-Client 的单个组件上使用了两个突变查询。这是一个组件包裹成一个更大的组件以形成一个页面。像这样的东西（这不是实际的代码，但它应该给出想法）：

import { compose } from 'react-apollo';

// submitNewUser contains
//  postedBy
//  createdAt
//  content

// submitRepository contains
//  otherProp

const thisProps1 = {
  name: 'mutation1',
  props: ({ ownProps, mutation1 }) => ({
    submit: ({ repoFullName, commentContent }) => mutation1({
      variables: { repoFullName, commentContent },
      optimisticResponse: {
        __typename: 'Mutation',
        submitNewUser: {
          __typename: 'Comment',
          postedBy: ownProps.currentUser,
          content: commentContent,
        },
      },
    }),
  }),
};
const thisProps2 = {
  name: 'mutation2',
  props: ({ ownProps, mutation2 }) => ({
    submit: ({ repoFullName, commentContent }) => mutation2({
      variables: { repoFullName, commentContent },
      optimisticResponse: {
        __typename: 'Mutation',
        submitRepository: {
          __typename: 'Comment',
          otherProp: 'foobar',
        },
      },
    }),
  }),
};
const ComponentWithMutations = compose(
  graphql(submitNewUser, thisProps1),
  graphql(submitRepository, thisProps2)
)(Component);

每当乐观响应触发时，只有第二个结果被反馈到外部组件中的查询响应中。换句话说，第一个查询给出了一个“未定义”的响应（但没有错误），而第二个查询按预期返回一个对象。

为什么？？

【问题讨论】：

标签： apollo react-apollo apollo-client

【解决方案1】：

乐观回复中不包含“createdAt”属性。

__typename: 'Comment',
postedBy: ownProps.currentUser,
content: commentContent,

应该是：

__typename: 'Comment',
postedBy: ownProps.currentUser,
createdAt: Date(),
content: commentContent,

乐观回复中的缺失字段将默默地无法向调用该数据的任何查询返回任何内容。

【讨论】：