Обновление React-apollo против refetch - PullRequest
Новая
       15

Обновление React-apollo против refetch

1 голос
/ 09 июля 2019

Я использую реактив-аполлон и уже довольно давно. Одна вещь, которая уже была для меня проблемой, это то, что refetch не работает при использовании мутации Это была известная проблема, так как я использовал приложение.

Я обошел это с помощью refetch проп, который доступен по запросу. 

    <Query query={query} fetchPolicy={fetchPolicy} {...props}>
      {({ loading, data, error, refetch }) => {
     ... pass down to mutation
    </Query>

Однако я сейчас читаю в документации , которую вы получаете метод обновления как часть мутации, и вы должны использовать его для обновления приложения после мутации.

Можете ли вы использовать функцию update для обновления данных вашего пользовательского интерфейса и их обновления после завершения мутации? Если вы можете, это стандартный способ сделать обновления сейчас?

* Использование refetchQueries не работает

enter image description here

Как вы можете видеть на изображении, console.info() показывает, что data.status = "CREATED";, но запрос, возвращаемый непосредственно из мутации: data.status = "PICKED"; PICKED, является правильной и актуальной информацией в БД.

1 Ответ

3 голосов
/ 09 июля 2019

В порядке предпочтения, ваши варианты:

  1. Ничего не делать .При регулярном обновлении отдельного узла, если мутация возвращает мутированный результат, Apollo автоматически обновит кэш для вас.Когда это не работает должным образом, это обычно происходит потому, что в запросе отсутствует поле id (или _id).Если поле id недоступно, в конструктор InMemoryCache должна быть предоставлена ​​пользовательская функция dataIdFromObject .Автоматические обновления кэша также не работают, когда люди устанавливают для параметра addTypename значение false.

  2. Использование update. Функция update будет запущена после того, как вымутация завершается и позволяет вам напрямую манипулировать кэшемЭто необходимо, если мутация затрагивает поле, возвращающее список узлов.В отличие от простых обновлений, Apollo не имеет возможности определить, следует ли обновлять список (и каким образом) после мутации, поэтому мы должны непосредственно обновить кеш самостоятельно.Это обычно необходимо после создания и удаления мутаций, но может также потребоваться после обновления мутации, если обновленный узел должен быть добавлен или удален в какое-либо поле, которое возвращает список. документы подробно объясняют, как это сделать. 

<Mutation
  mutation={ADD_TODO}
  update={(cache, { data: { addTodo } }) => {
    const { todos } = cache.readQuery({ query: GET_TODOS });
    cache.writeQuery({
      query: GET_TODOS,
      data: { todos: todos.concat([addTodo]) },
    });
  }}
>
  {(addTodo) =>(...)}
</Mutation>
Использование refetchQueries. Вместо обновления кэша вы также можете предоставить функцию refetchQueries, которая должна возвращать массив объектов, представляющих запросы для повторного получения.Как правило, это менее желательно, чем использование update, поскольку для этого требуется один или несколько дополнительных вызовов на сервер.Однако, это может быть необходимо, если мутация не возвращает достаточно информации для корректного обновления кэша вручную.ПРИМЕЧАНИЕ. Возвращаемый массив также может быть массивом строк , представляющих имена операций, хотя это недостаточно хорошо документировано. 
<Mutation
  mutation={ADD_TODO}
  refetchQueries={() => [
    { query: TODOS_QUERY, variables: { foo: 'BAR' } },
  ]}
>
  {(addTodo) =>(...)}
</Mutation>

Использование refetch.Как вы уже показали в своем вопросе, можно использовать функцию refetch, предоставляемую компонентом Query внутри компонента Mutation, для повторного получения этого конкретного запроса.Это нормально, если ваш компонент Mutation уже вложен в компонент Query, но, как правило, использование refetchQueries будет более чистым решением, особенно если необходимо повторно выполнить несколько запросов.

Использование updateQueries.Это устаревший вариант, который больше не документирован, но обеспечивает функциональность, аналогичную update до добавления update.Его не следует использовать, поскольку в будущем он может быть устаревшим.

ОБНОВЛЕНИЕ:

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

...