乐观的 UI 未更新 - Apollo答案

【问题标题】：Optimistic UI Not Updating - Apollo乐观的 UI 未更新 - Apollo
【发布时间】：2017-11-02 03:16:58
【问题描述】：

在进行更改后，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);

【问题讨论】：

标签： apollo react-apollo apollo-client optimistic-ui

【解决方案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
  });
}

【讨论】：

感谢您的回答。这是一个很好的观点，但它仍然没有给出预期的结果。使用 Developer Tools 插件，我可以看到它看起来不像商店正在更新。我不确定我还能在哪里寻找，但欢迎提出建议。

【解决方案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())

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

【讨论】：