title: Apollo GraphQL - How do I use an RxJS Subject as a variable with Apollo Client?
body: <p>My type-ahead search was working great with REST but I'm converting to GraphQL, which has its challenges.</p>
  
  <p>As the user types a last name into a form field the suggested results display in a data table below.  Each letter is handled by the RxJS Subject.</p>
  
  <p>The var searchTerm$ is a type of RXJS observable called a Subject binds to the HTML.  The following is called from the OnViewInit lifecycle hook in an Angular app.  The search is by the database column last_name.</p>
  
  <p>However, this results in a Bad Request 400 error as the view loads and search doesn't work.  I thought maybe this calls for a subscription but everything I find on those is about using web sockets to connect to a remote URL and server.  Where do I go from here?</p>
  
  <p>I'm using the Angular Apollo client with Apollo Express but I would be happy with any JS solution and try to figure it out from there.  The server side is Nestjs which just wraps Apollo Server.</p>
  
  <pre><code>const lastNameSearch = gql `
          query ($input: String!) {
            lastNameSearch(input: $input) {
              first_name
              last_name
              user_name
              pitch
              main_skill_title
              skills_comments
              member_status
            }
      }`;
  this.apollo
        .watchQuery({
          query: lastNameSearch,
          variables: {
            last_name: searchTerm$, // Trying to use the observable here.
          },
        })
        .valueChanges
        .subscribe(result =&gt; {
          console.log('data in lastNameSearch: ', result);
        }),
  </code></pre>
  
  <p>The schema on the server:</p>
  
  <pre><code>lastNameSearch(input: String!): [Member]
  </code></pre>
  
  <p>The resolver:</p>
  
  <pre><code>@Query()
    async lastNameSearch(@Args('input') input: String) {
      const response = await this.membersService.lastNameSearch(input);
      return await response;
    }
  </code></pre>
  
  <p>Edit:</p>
  
  <p>The error from the Network panel in dev tools.  Console message worthless.</p>
  
  <pre><code>{"errors":[{"message":"Variable \"$input\" of required type \"String!\" was not provided.","locations":[{"line":1,"column":8}],"extensions":{"code":"INTERNAL_SERVER_ERROR","exception":{"stacktrace":["GraphQLError: Variable \"$input\" of required type \"String!\" was not provided.","    at getVariableValues
  
  </code></pre>
  
  <p>And this goes on showing properties and methods in the app for another 300 lines or so.</p>