title: Angular Apollo Set watchQuery Results to a Usable Variable
body: <p>New to Angular/Apollo/TS and this is driving me nuts, so any help is appreciated.</p>
  <p>I am working on setting up a small app with Angular 10, Apollo, and a GraphQL API. I recently built the same thing in Vue and thought recreating the project would be a good way to pick up some Angular.</p>
  <p>My connection to the API is working, as is my query, but I can't figure out how to map the results to an array so I can access them in my component. Using console.log inside the subscription shows the correct data is returned. console.log outside of the query on 'this' shows the query results, however they are never saved/mapped to the variable they should be set to.</p>
  <p>Here's the code for my service:</p>
  <pre><code>import { Injectable } from '@angular/core';
  
  import { Apollo } from 'apollo-angular';
  import { Observable } from 'rxjs';
  import { map } from 'rxjs/operators';
  
  import gql from 'graphql-tag';
  
  const USER_SEARCH = gql`
    query getUsers {
      search(query: &quot;moose&quot;, type: USER, first: 10) {
         nodes {
           ... on User {
             login
             email
             location
             name
           }
         }
         pageInfo {
           hasNextPage
           hasPreviousPage
           startCursor
           endCursor
         }
         userCount
       }
    }`;
  
  export class UserService {
    loading: boolean = true;
    users: [];
  
    constructor(private apollo: Apollo) { }
  
    getUsers(): any {
      this.apollo.watchQuery&lt;any&gt;({
        query: USER_SEARCH
      })
        .valueChanges
          .subscribe(({ data, loading }) =&gt; {
           this.loading = loading;
           this.users = data.search;
          });
          console.log(this);
  
      return this.users;
    }
  }
  </code></pre>
  <p>I can call the getUsers() function from my component, and 'this' has the service listed, and inside of it  'users' has my query results listed in it. However, console.log for this.users in the service or the component returns undefined.</p>
  <p>I've tried about every type of example I could find, including the query examples from the apollo docs, and the example of using apollo with angular from hasura.io. Tried using a pipe and map, pluck, just valueChanges, a few different subscribes, setting a variable inside the function to assign the data value to, setting the query to variable, setting the query in ngOnInit in the component, and a few other things I'm sure I'm forgetting. Nothing seems to work. I looked into using a callback to wait for the query to return before setting the value, but my understanding is that I shouldn't have to do anything like that. I'm sure it's something dumb I'm missing or don't know about with Apollo or Angular, but I'm just not positive what it is I'm missing.</p>
  <p>Any ideas?</p>