How to create custom event for updating Query state?

Question

I am trying to create a custom event for Query to reload and refresh the query state when the event happens. I need a custom event similar to Spartacus' OrderPlacedEvent. My custom event actually works, but the time when HTTP call for reloading query state is triggered is not right. Instead of firing an HTTP call when I visit the quotes page, it happens immediately when the event is dispatched on the second step during the checkout process.

Creating event class QuotePlacedEvent:

export abstract class QuoteEvent extends CxEvent {
  userId?: string;
  activeCartId?: string;
}

export class QuotePlacedEvent extends QuoteEvent {
  static readonly type = 'QuotePlacedEvent';
  quote: any;
}

Dispatching the event during the checkout process when a quote is created for example on the second step:

this.eventService.dispatch(
{
  userId: payload.userId,
  activeCartId: payload.cartId,
  quote: cart,
},
QuotePlacedEvent);

Quote query called when Quotes page is visited:

protected quotesQuery: Query<any> = this.query.create(() =>
  this.userIdService
    .getUserId()
    .pipe(switchMap(userId => this.quoteConnector.getQuotes(userId))),
  {
    reloadOn: [LanguageSetEvent, QuotePlacedEvent],
    resetOn: [LogoutEvent, LoginEvent],
  }
);

getQuotesAndApplication(): Observable<any> {
   return this.quotesQuery.get();
}

I saw method in ProfileTagPushEventsService orderConfirmationPageVisited() which listens to OrderPlacedEvent. Do I need that implementation too:

/**
* Listens to QuotePlacedEvent events
*
* @returns observable emitting events that describe order confirmation page visits in a profiltag compliant way
* @see QuotePlacedEvent
* @see QuoteConfirmationPushEvent
*/
quoteConfirmationPageVisited(): Observable<ProfileTagPushEvent> {
   return this.eventService
            .get(QuotePlacedEvent)
            .pipe(map(item => new QuoteConfirmationPushEvent(item)));
}

I wanted to add my custom event by calling the method addPushEvent from ProfileTagPushEventsService, but I can't import it, since it is not exported.

Any idea what am I missing and why the custom event doesn't behave in an expected way?

Answer 1

The query is always "listening" for the events you tell it to listen to, and if you fire the event in the 2nd checkout step, query will react to it. This is by design. If you need the query to react to an event which happens when you visit the quotes page, you can try to create the QuotesPageEvent, make the query listen to it, and dispatch it once the user actually navigates to the quotes page. You can see an example of a page event here.

Maybe one improvement you can do, is to make sure the that quotes have been placed before dispatching the page event. For this, you can use the power of rxjs to listen to your QuotePlacedEvent and the page visited event, and fire a final event. The quire should be listening to this final event.