2

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

2 回答 2

0

我不完全确定问题出在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())

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

于 2017-10-18T19:18:48.863 回答
0

看起来很有希望，错误的一件事是突变结果的名称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
  });
}

于 2017-06-01T08:35:51.203 回答