Оптимистичный интерфейс не обновляется - Apollo

Question

После внесения мутации пользовательский интерфейс не обновляется добавленным элементом до тех пор, пока страница не будет обновлена. Я подозреваю, что проблема в разделе обновления мутации, но я не уверен, как устранить неполадки дальше. Любой совет высоко ценится.

Запрос (отдельный файл)

//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())

Второй подход должен работать каждый раз. Это не совсем оптимистично, но это приведет к обновлению ваших данных.