Почему «Автоматические обновления магазина» не работают на стороне клиента в приложении «Реагировать»? - PullRequest
Новая
       15

Почему «Автоматические обновления магазина» не работают на стороне клиента в приложении «Реагировать»?

0 голосов
/ 28 июня 2019

Я использую react-apollo для управления клиентским хранилищем в моем приложении реагирования, поэтому нет внутреннего сервера graphql.Все что связано с apollo выполняется на стороне клиента.Я храню все состояние пользовательского интерфейса в кэше ApolloClient.И я также определяю все распознаватели на стороне клиента.

Ниже приведен код для нового экземпляра клиента: 

new ApolloClient({
    cache,
    resolvers: {
      Mutation: {
        ...cartResolvers,
      },
    },
    typeDefs: [typeDefs]
  });

Я прочитал эту статью https://www.apollographql.com/docs/angular/features/cache-updates/#automatic-store-updates об автоматическом обновлении хранилища с использованием ID в мутации apollo graphql изапрос.Но это не похоже на работу.У меня есть ниже запрос и мутация: 

export const queryCart = gql`
  {
    cart @client {
      items {
        id
        name
        price
        quantity
        image
      }
    }
  }
`;

export const addToBasket = gql`
  mutation addToBasket($sku: ID!) {
    addToBasket(id: $sku)  @client {
      items {
        id
        name
        price
        quantity
        image
      }
    }
  }
`;

И я определил преобразователь для этой мутации addToBasket.

const addToBasket = (_parent: any, item: { id: string }, { cache }: ResolverCacheType): CartProps => {
   ...
   return {
      items: [ {id, name, price, quantity, image } ]
   }
}

Я обнаружил, что даже если я возвращаю id в распознавателе, кэш не обновляется и запрос не реагирует.Я могу заставить его работать, вручную обновляя данные кэша в разрешении на cache.writeData.

1 Ответ

0 голосов
/ 28 июня 2019

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

Чтобы воспользоваться преимуществами функции автоматического обновления, вы можете изменить структуру данных массива элементов из простогомассив теперь относится к объекту, который выглядит примерно так: 

{ _id, [{id, name, price, ...}]}

И запрос, и мутация должны возвращать этот объект.Тогда у вас есть такая же настройка, как в примере документ .После запуска мутации возвращаемый объект имеет тот же _id, что и локальный кеш, поэтому react-apollo знает, что ему необходимо обновить данные кеша.

В качестве альтернативы, вы можете либо вручную использовать cache.writeData, как вы уже упоминали, либо использовать refetchQueries для обновления массива элементов корзины.

...