Filling fields with subscription values with Apollo-Angular with codegen

Question

Hello) I want the category fields to be filled in the form with values from the category that I received from the server.

I'm doing similarly from a course that uses RestAPI, but I'm using Nestjs - Apollo - Angular and I can't seem to achieve this with this stack.

This is implemented with the .subscribe method but it's not in apollo-angular

Here's how it's done in the course.

1. The teacher gets the category from the server and uses its name to set as the value of the field that is in the given control.

private _checkEditMode() {
    this.route.params.subscribe((params) => {
      if(params['id']) {
        this.editmode = true;
        this._getOneCategory(params['id']).subscribe(category => {
        this.f['name'].setValue(category.name)
        this.f['icon'].setValue(category.icon)
        })
      }  
    });
  }


private _getOneCategory(categoryId: string) {
    
    const catId = {
      input: {
        id:categoryId
      }
    }
    this.$category = this.getOneCategoryGQL
    .watch(catId)
    .valueChanges
    .pipe(map(result => result.data))
  }
  

How does this work on Apollo-Angular?

2. Teacher Clicks on the "edit category" button...

3. Values from the category.id are pulled from the server into the fields.

2 blocks of questions:

1. If I use codegen types (Apollo-angular), what do I need to do to implement this? Do I need to create subscriptions separately, or is there some method to make this easier?

It’s still difficult for me to study the apollo-angular documentation, could you describe in detail how to implement getting data from the server to edit it inside the fields.

2. What basic principles am I not understanding when asking this question? What would you recommend to study? What questions would you like me to ask?