Wait for RxJS data, and how to return?

Question

I have a function that creates a user, but before that user is created I want to check if another user with the same userName already exists in that session:

public createUser(form: FormGroup, sessionCode?: string): void {
  if (sessionCode && this.checkForDuplicateUserInSession(form, sessionCode)) return;

  this.apollo.mutate<CreateUser>({
    mutation: CREATE_USER,
    variables: {
      name: form.controls['user'].get('userName')?.value,
    },
  }).subscribe(
    ...
  );
}

private checkForDuplicateUserInSession(form: FormGroup, sessionCode?: string): void {
  this.apollo.query<GetSession>({
    query: GET_SESSION,
    variables: {
      code: sessionCode
    }
  }).subscribe({
    next: ({data}) => {
      return data.getSession.players.some((player) => player.name === form.controls['user'].get('userName')?.value);
    }
  });
}

The checkForDuplicateUserInSession() does correctly check if another user already exists or not, but I'm not sure how I can use that in the createUser() function.

Do I have to make a make a userIsDuplicate$ observable to which I push the some() result and then subscribe to that? Or is there a different way I'm not seeing?

Why doesn't `checkForDuplicateUserInSession` return `Observable`? (Right now it doesn't actually return `boolean`, even, just `undefined`; I'm surprised TS isn't telling you that.) — jonrsharpe, Mar 10 '23 at 12:19
Same question, though: why doesn't it return an observable, so the value can actually be used by the caller? Returning from the subscription callback doesn't do anything, as the void return type should make clear - you're asking https://stackoverflow.com/q/14220321/3001761, basically. — jonrsharpe, Mar 10 '23 at 12:23
You cannot return the value inside the subscribe to the function. That's the point of the question. — Peter Boomsma, Mar 10 '23 at 12:24
I'm not suggesting you can. I know you can't. The correct types tell you you can't. I'm suggesting you _return an `Observable`_. Have a look at e.g. https://angular.io/tutorial/tour-of-heroes/toh-pt6 which introduces using observables in Angular. — jonrsharpe, Mar 10 '23 at 12:24
Oh or https://angular.io/tutorial/tour-of-heroes/toh-pt4#observable-data — jonrsharpe, Mar 10 '23 at 12:34
`this.apollo.query` doesn't return an Observable, but an Subscription. So how do I return an Observable? — Peter Boomsma, Mar 10 '23 at 12:51
You sure? If so calling `.subscribe` on it would be a problem, because a `Subscription` [doesn't have that](https://rxjs.dev/api/index/class/Subscription). — jonrsharpe, Mar 10 '23 at 12:53
Because I subscribed to it it was a subscription. Without the subscribe it's an Observable. Thank you, issue is resolved now. I'll post the answer later. — Peter Boomsma, Mar 10 '23 at 12:56
It _always_ returns an Observable, which has a [subscribe method](https://rxjs.dev/api/index/class/Observable#subscribe) that returns a Subscription. But yes, it's the subscribing that makes the overall result of the expression a Subscription. — jonrsharpe, Mar 10 '23 at 12:57

score -1 · Answer 1 · answered Mar 10 '23 at 13:12

Use lastValueFrom function inside method checkForDuplicateUserInSession to transform Observable in Promise (doc here). After taht uses async/await on createUser method.

Example:

public async createUser(form: FormGroup, sessionCode?: string): void {
    if (sessionCode && await this.checkForDuplicateUserInSession(form, sessionCode)) return;
    
    this.apollo.mutate<CreateUser>({
        mutation: CREATE_USER,
        variables: {
            name: form.controls['user'].get('userName')?.value,
        },
    }).subscribe(
          ...
    );
}
    
private checkForDuplicateUserInSession(form: FormGroup, sessionCode?: string): void {
    return lastValueFrom(this.apollo.query<GetSession>({
        query: GET_SESSION,
        variables: {
            code: sessionCode
        }
    }).subscribe({
        next: ({data}) => {
            return data.getSession.players.some((player) => player.name === form.controls['user'].get('userName')?.value);
        }
    }));
}

Wait for RxJS data, and how to return?

1 Answers1