Apollo GraphQL возвращает пустые данные при загрузке первой страницы - PullRequest
Новая
       14

Apollo GraphQL возвращает пустые данные при загрузке первой страницы

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

Я столкнулся со странным поведением с запросом GraphQL на сайте, над которым я работаю ( Shopify, Vue, Apollo GraphQL ). У меня есть следующий скрипт: 

...
...

props: {
  masterLensShape: {
    type: String,
    required: true,
    default: '',
  },

  masterFamilyTagHash: {
    type: String,
    required: true,
    default: '',
  }
},

data() {
  return {
    productsByLensShape: {},
    queryStringByLensShape: `tag:'${this.masterFamilyTagHash}' NOT tag:'master-product:TRUE'`,
    lensFilterState: {
      size: '',
      polar: '',
      color: '',
    },
  }
},

...
...

methods: {
  queryDefaultProducts() {
     this.lensFilterState = this.getProductAttribute(this.product);
     this.productsByLensShape[this.lensFilterState.lensSize] = {
       'mirrored:TRUE': {},
       'mirrored:FALSE': {},
     };

     const mirroredLensShapeQueryString = `${this.queryStringByLensShape} AND tag:'${this.masterLensShape}' AND tag:'mirrored:TRUE'`;
     const nonMirroredLensShapeQueryString = `${this.queryStringByLensShape} AND tag:'${this.masterLensShape}' AND tag:'mirrored:FALSE'`;

     this.fetchData(mirroredLensShapeQueryString, 'mirrored:TRUE');
     this.fetchData(nonMirroredLensShapeQueryString, 'mirrored:FALSE');
  },

  fetchData(queryString, mirrorType) {
    this.$apollo.query({
      query: products,
      variables: {
        query: queryString,
      },
    }).then((response) => {
      this.$set(this.productsByLensShape[this.lensFilterState.lensSize], mirrorType, response.data.products);
      ReplacementEventBus.$emit('product-family:updateProductGroupByLensShape', this.productsByLensShape);
    }).catch((response) => {
      this.error = response;
      return response;
    });
  },
}

...
...

watch: {
  prouduct() {
    if (!this.product) {
      return;
    }

    this.queryDefaultProducts();
  }

}

Этот скрипт работает примерно 90-95% времени при загрузке первой страницы.

Когда это не сработало, я заметил, что GraphQL возвращает пустые данные либо по запросу mirroredLensShapeQueryString , либо nonMirroredLensShapeQueryString . Иногда оба запроса пусты. Но после того, как я обновил sh страницу, GraphQL возвращает ожидаемые данные.

Трудно отследить эту ошибку / проблему, поскольку она возникает непоследовательно.

Я все еще новичок в Vue / GraphQL, поэтому не знаю, следую ли я лучшим рекомендациям который мог вызвать эту проблему.

Кто-нибудь сталкивался с подобной проблемой? Если так, как вы решили это? какие-нибудь обходные пути? Будем благодарны за любые возможные объяснения этого странного поведения.

ОБНОВЛЕНИЕ --- Я обнаружил, что произошла ошибка в GraphQL, когда данные возвращаются пустыми. Это также странно, потому что не отображает эту ошибку на 100% времени:

сообщение об ошибке Ошибка: ошибка GraphQL: время ожидания

...