Apollo angular query with variables failed to parse

Question

I have this server API for pagination of Accounts

 {
  accounts (offset: 2, limit: 1) {
    key
    name
  }
}

All works well using Graphiql

{
  "data": {
    "accounts": [
      {
        "key": "fde3d97d-6a44-4c36-bc59-149a3e8e51ac",
        "name": "a0f353611567c83e"
      }
    ]
  }
}

I followed the Apollo documents to connect my web client to the backend. Default queries work but when I try to add variables I get this error on the server side.

WARN  g.GraphQL - Query failed to validate : 'query Accounts($offset: Int, $limit: Int) {
      accounts(offset: $offset, limit: $limit) {
        key
        name
        __typename
   }
 }

my angular (7) code looks like this:

import { Component, OnInit } from "@angular/core";
import { Apollo, QueryRef } from "apollo-angular";
import { DocumentNode } from "graphql";
import { Observable, Subscription } from "rxjs";
import gql from "graphql-tag";

const ACCOUNTS = gql`
  query Accounts($offset: Int, $limit: Int) {
    accounts(offset: $offset, limit: $limit) {
      key
      name
    }
  }
`;

@Component({
  selector: "app-accounts",
  templateUrl: "./accounts.component.html",
  styleUrls: ["./accounts.component.scss"]
})
export class AccountsComponent implements OnInit {

  private data: Observable<any>;

  constructor(private apollo: Apollo) {}

  ngOnInit() {
    this.data = this.apollo.watchQuery({
      query: ACCOUNTS,
      variables: {
        offset: 0,
        limit: 3
      }
    }).valueChanges;
  }        
}

it seemed like the GQL is not parsed at all when parameters (variables) are introduced.

Any suggestions?

EDIT

after moving to the new Apollo code generator I have all the types fetched from the server and all the types generated for me.

Still, I don't know why the query doesn't work with variables.

import { Component, OnInit } from "@angular/core";
import { Observable } from "rxjs";
import { map } from "rxjs/operators";

import { AccountsGQL, Account } from "../generated/graphql";

@Component({
  selector: "app-accounts",
  templateUrl: "./accounts.component.html",
  styleUrls: ["./accounts.component.scss"]
})
export class AccountsComponent implements OnInit {
  private data: Observable<Account[]>;

  constructor(private accountsGQL: AccountsGQL) {}

  ngOnInit() {
    this.data = this.accountsGQL
      .watch({ offset: 0, limit: 1 })
      .valueChanges.pipe(map(result => result.data.accounts));
  }
}

'offset' has coerced Null value for NonNull type 'Int!'