Question

在进行突变之后，UI不会使用新添加的项目进行更新，直到刷新页面为止。我怀疑问题出现在变异的更新部分，但我不确定如何进一步排除故障。任何建议都非常感谢。

查询（单独文件）

//List.js

export const AllItemsQuery = gql`
  query AllItemsQuery {
     allItems {
        id,
        name,
        type,
        room
      }
  }
`;

突变

import {AllItemsQuery} from './List'

const AddItemWithMutation = graphql(createItemMutation, {
    props: ({ownProps, mutate}) => ({
        createItem: ({name, type, room}) =>
            mutate({
                variables: {name, type, room},
                optimisticResponse: {
                    __typename: 'Mutation',
                    createItem: {
                        __typename: 'Item',
                        name,
                        type,
                        room
                    },
                },
                update: (store, { data: { submitItem } }) => {
                    // Read the data from the cache for this query.
                    const data = store.readQuery({ query: AllItemsQuery });
                    // Add the item from the mutation to the end.
                    data.allItems.push(submitItem);
                    // Write the data back to the cache.
                    store.writeQuery({ query: AllItemsQuery, data });
                }
            }),
    }),
})(AddItem);

Answer 1

看起来很有希望，有一件事是错误的是突变data: { submitItem }的结果的名称。因为在乐观的响应中，您将其声明为createItem。你有console.log吗？变异是怎么样的？

update: (store, {
  data: {
    submitItem // should be createItem
  }
}) => {
  // Read the data from our cache for this query.
  const data = store.readQuery({
    query: AllItemsQuery
  });
  // Add our comment from the mutation to the end.
  data.allItems.push(submitItem); // also here
  // Write our data back to the cache.
  store.writeQuery({
    query: AllItemsQuery,
    data
  });
}

Answer 2

我不完全确定问题出在你上面的optimisticResponse函数中（这是正确的方法），但我猜你会使用错误的返回值。例如，以下是我们正在使用的响应：

optimisticResponse: {
  __typename: 'Mutation',
  updateThing: {
    __typename: 'Thing',
    thing: result,
  },
},

因此，如果我不得不猜测，我会说您可能想尝试在返回值中使用该类型：

optimisticResponse: {
    __typename: 'Mutation',
    createItem: {
        __typename: 'Item',
        item: { // This was updated
          name,
          type,
          room
        }
    },
},

作为替代方案，您可以refetch。在我们的代码库中有几次事情只是没有更新我们想要它们的方式，我们无法弄清楚为什么我们这样做，只是在突变解决后重新获取（突变返回一个承诺！）。例如：

this.props.createItem({
  ... // variables go here
}).then(() => this.props.data.refetch())

第二种方法应该每次都有效。它并不完全乐观，但它会导致您的数据更新。

乐观的UI不更新 - 阿波罗

2 个答案: