Question

我正在记录这个以记录一个问题的答案，这个问题花了我几个小时来解决。情形：

我在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);

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

为什么？

Answer 1

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

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

应该是：

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

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

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

1 个答案: