Apollo Mutation - пользовательский интерфейс не обновляется после использования - PullRequest
Новая
       39

Apollo Mutation - пользовательский интерфейс не обновляется после использования

0 голосов
/ 13 апреля 2020

Справочная информация: всегда можно обновить кеш магазина Apollo, но не пользовательский интерфейс

Вопрос:

  1. В чем причина обновления пользовательского интерфейса или нет?
  2. Как правильно передать объект данных в обновлении?

"реагировать": "~ 16.9.0"

"@ apollo /act-hooks": "^ 3.1 .3 "

И пользовательский интерфейс, и кэш обновили коды в моем проекте: 

update: (store, { data: { newPhoto } }) => {
  const { bookInfo } = store.readQuery({ query: GET_BOOK_BY_ID, variables: { bookId } });
  bookInfo.photos = [...bookInfo.photos, newPhoto];

  store.writeQuery({ 
      query: GET_BOOK_BY_ID, 
      variables: { bookId },
      data: {
          bookInfo
      }
  });
}

В этой строке: bookInfo.photos = [...bookInfo.photos, newPhoto]; объект bookInfo изменен напрямую и просто передан обратно writeQuery data

Мне это нехорошо, потому что я видел, как люди говорили, что он должен быть "неизменным" или "передавать новый объект", и т. д. c.

1 Ответ

0 голосов
/ 16 апреля 2020

если вы испытываете то же самое, пожалуйста, проверьте следующий список:

  1. go, чтобы проверить https://github.com/apollographql/apollo-client/pull/4543. Применение freezeResults & assumeImmutableResults в ApolloClient поможет обнаружить проблему. В моем случае проблема фактически возникает внутри родительского компонента, который я мутировал в объектах хранилища Apollo, а не в компоненте, вызывающем client.writeQuery, что, на мой взгляд, обычно трудно заметить и другим. 
const client = new ApolloClient({
  link: ...,
  cache: new InMemoryCache({
    freezeResults: true, // new
  }),
  assumeImmutableResults: true, // new
});
Убедитесь, что вы изменяете данные неизменным образом. (т.е. объект хранилища Apollo не был изменен до конца обновления) https://github.com/immerjs/immer определенно помогает сохранить ваши изменения в неизменном виде. Я использовал это, чтобы изменить мой вложенный объект, и он работает так хорошо. Попробуйте использовать client, возвращенный из useMutation, тогда вы получите client.writeQuery для обновления. Хотя я не уверен в этом, многие люди распространяют это сообщение, возможно, в некоторых случаях помогают. 
import { useMutation } from '@apollo/react-hooks';
import produce from "immer";

const [mutate, { client }] = useMutation(MUTATION_GQL);

const submit = () => {
    mutate({
        variables: { inputs },
        update: (store, { data: { response }) => {
            // get existing cache returned from the query
            const cache = store.readQuery({ query: QUERY_GQL, variables: { id } });

            // manipulate the cache in immutable fashion
            const data = produce(cache, draftCache => {
                draftCache.title = "new title";
                draftCache.approval = response;
            });

            // write the cache back to that query
            // REMEMBER the variables inside writeQuery too!
            client.writeQuery({
                query: QUERY_GQL,
                variables: { id },
                data,
            });
        }
    })
}
Попробуйте использовать useQuery для чтения данных из ApolloClient вместо readQuery, чтобы получить обновленный кеш из хранилища Аполлона
...