Блог

Я застрял в своем потоке приложений после завершения мутации. У меня есть компонент с информацией о продукте, по которому я могу добавить товар в корзину. Если заказ еще не запущен, продукт должен быть добавлен, а затем количество должно быть обновлено. Затем в моем заголовке должно отображаться количество элементов.

//product.details.component

   addToProductCart(product) {
    this.spinnerService.showLoader();
    if (this.activeOrder === null
      || this.activeOrder === ''
      || this.activeOrder.lines.length === 0) { // order not yet created or line is empty
      this.addNewProduct()
        .pipe(
          switchMap((order) => {
            return this.adjustOrderLineGQL.mutate({ 
// here I am getting the error that orderLineId doesn't exist, but actually it is returned in order object
              orderLineId: order.data.addOfferToOrder.lines[0].id,
              quantity: this.productCounter
            })
          })
        )
        .subscribe((updatedOrder) => {
          this.spinnerService.hideLoader();
        })
    } else {
      if (this.activeOrder.lines.length > 0) { //cart is not empty
        const existingProduct = this.activeOrder.lines.filter((line) => {
          if (line.productVariant.sku === product.id) {
            return line
          }
        })
        if (existingProduct.length > 0) { // currently added product exists in active order, so only quantity is updated
          return this.adjustOrderLine(existingProduct[0].id, this.productCounter)
            .subscribe((result) => {
              this.spinnerService.hideLoader();
            });
        }
        else {
          this.addNewProduct()
            .pipe(
              switchMap((order) => {
                const currentProduct = order.data.addOfferToOrder.lines.filter((newLine) => {
                  if (newLine.productVariant.sku === product.id) {
                    return newLine;
                  }
                })
                return this.adjustOrderLine(currentProduct[0].id, this.productCounter)
              })
            )
            .subscribe((updatedOrder) => {
              this.spinnerService.hideLoader();
            })
        }
      } else {
        this.spinnerService.hideLoader();
      }
    }
  }

  addNewProduct() {
    return this.addOfferToOrderGQL.mutate({
      id: this.product.id,
      originalName: this.product.originalName,
      name: this.product.name,
      categoryId: this.product.category.id,
      price: this.product.price,
      deliveryCost: this.product.category.deliveryCost
    },
      {
        // refetchQueries: ()
        update: (cache, { data }) => { // here I assume I need to somehow refresh cache
          const cacheId = cache.identify(data.addOfferToOrder);
          cache.modify({
            fields: {
              addOfferToOrder: (existingFieldData, { toReference }) => {
                return [...existingFieldData, toReference(cacheId)]
              }
            }
          })
          console.log('OUTPUT: ProductsDetailsComponent -> addNewProduct -> cacheId', cacheId);
          console.log(data)
        }
      })
  }

// activeOrder

  getActiveOrder() {
    return this.getActiveOrderGQL.watch({ fetchPolicy: 'network-only' })
      .valueChanges
      .pipe(
      )
      .subscribe((result) => {
        this.activeOrder = result.data.activeOrder;
      })
  }
  

header.component.ts

   getActiveOrder(): any {
    console.log('in header');
    this.getActiveOrderGQL.watch( { fetchPolicy: 'cache-and-network' })
      .valueChanges
      .pipe(
        pluck('data', 'activeOrder'),
        takeUntil(this.destroySubject),
        shareReplay()
      )
      .subscribe((order) => {
        console.log(order, 'header order');

        if (order) {
          this.orderService.refreshActiveOrder(order);
          this.selectedProductsCount = _.sumBy(order.lines, 'quantity');
        } else {
          this.selectedProductsCount = 0;
        }
      })
  }

  

Если я обновляю страницу после добавления самого первого продукта, тогда работает весь поток, и в корзину добавляются следующие товары, а заголовок также немедленно обновляется с правильным количеством продуктов.
Ошибка говорит о том, что после мутации orderLineId не существует, но объект order, возвращаемый мутацией, является правильным, идентификатор обладает этим свойством. Итак, в основном вопрос заключается в том, как вызвать мутацию, а затем на основе возвращаемого значения вызвать еще один запрос / мутацию в том же и в других компонентах?