VueJS Конфликт данных хранилища / кеша Apollo graphql между запросами - PullRequest
Новая
       95

VueJS Конфликт данных хранилища / кеша Apollo graphql между запросами

0 голосов
/ 08 мая 2020

У меня следующий сценарий потока данных:

  • Пользовательский интерфейс имеет 3 раздела: зарегистрированные службы, службы регистрации и службы поиска
  • Пользователь будет искать существующие службы (по запросу пользователя при вводе searchServiceText вызывается searchResultServices)
  • Пользователь выбирает услугу из результатов поиска и регистрируется в ней. Если регистрация пользователя не завершена (например: нет оплаты, не принято и т. Д. c), пользовательский интерфейс отобразит данные в разделе «Регистрация». В противном случае он будет в разделе Enrolled.

У меня есть следующие запросы: 

enrolledServices: {
 query: gql(listServices),
 variables() {
   let idFilter = this.idFilter(this.userData.enrolledServiceIds);
   return {
     filter: {
       or: idFilter
     }
   };
 },
 update: data => {
   return _.compact(data.listServices.items);
 }
},
enrollingServices: {
 query: gql(listServices),
 variables() {
   let idFilter = this.idFilter(this.userData.enrollingServiceIds);
   return {
     filter: {
       or: idFilter
     }
   };
 },
 update: data => {
   return _.compact(data.listServices.items);
 }
},
searchResultServices: {
 query: gql(listServices),
 variables() {
   console.log('before search - enrolledServices:', this.enrolledServices); //Data Collision!!
   console.log('before search - enrollingServices:', this.enrollingServices);
   return {
     filter: {
       or: [
         { name: { contains: this.searchServiceText } }
       ],
       and: [
         { status: { eq: 'Active' } }
       ] 
     }
   };
 },
 skip() {
   return !this.searchServiceText;
 },
 update(data) {
   return _.compact(data.listServices.items);
 }
}
  1. enrolledServices: и enrollingServices: вызывается при загрузке страницы, поэтому пользовательский интерфейс будет есть 2 раздела для зарегистрированных услуг и услуг по регистрации.
  2. searchResultServices: не будет вызываться при загрузке страницы из-за условия skip (). Он вызывается реактивно, когда пользователь вводит значение в поле searchServiceText в пользовательском интерфейсе

Переход к моей проблеме сейчас :

  1. При загрузке страницы, как ожидалось Service_enrolled, Service_enrolling показаны соответственно в разделах Enrolled и Enrolling (см. Ниже).

Enrolled Section :

Service_enrolled

Раздел регистрации :

Service_enrolling

Если пользователь устанавливает слово для поиска в searchServiceText и нажимает на поиск , в разделе «Зарегистрированные» отображается Service_ enrolling (см. Ниже). Пользователь просто выполняет поиск в определенное время, и он / она еще не выполнял действия с результатами поиска

Зарегистрированный раздел :

Service_ регистрация (зарегистрированная услуга заменена на услугу регистрации)

Раздел регистрации :

Service_enrolling

Ожидаемое поведение в step2 : я должен увидеть поведение шага 1 (Service_enrolled должен быть в разделе Enrolled, Service_enrolling должен быть в разделе Enrolling), потому что пользователь еще не действовал с результатами поиска.

Не знаю, почему на шаге 2 выше произошел конфликт данных. У меня есть console.log, чтобы распечатать зарегистрированный и зарегистрированный список в памяти / кеше перед поисковым запросом. Он показывает конфликт данных прямо перед поисковым запросом. поэтому поисковый запрос не способствует возникновению проблемы, и нет никаких следов выполнения запроса enrolledServices, enrollingServices на шаге 2 выше. Я не уверен, как запутываются зарегистрированные и регистрируемые данные.

Примечание: оба enrolledServices, enrollingServices имеют одинаковый поисковый запрос, за исключением того, что данные idFilter будут разными, поскольку у них разные идентификаторы служб. Это означает, что, как я понимаю, ключ кеша уникален для этих двух запросов, верно?

Я абсолютно уверен, что в моем подходе или коде чего-то не хватает, но я не могу понять. Любая помощь приветствуется, и вы сэкономите много времени, а также сэкономите время другим людям, у которых может быть аналогичная проблема.

...