Handlebars custom component not executing GraphQL query

Looks like you can perfectly pass variables to graphql in handlebars.
Your query ID might need to be an integer: query privateUserStats($id: INT!) {

I tested did by creating a list of categories depending on the depth I set with a prop and this works:

My graphql file:

query firstTest($depth: Int!) {
  categories(constraints: {depth: {eq: $depth}, topicsCount: {gt: 0}}) {
    edges {
      node {
        id
        topicsCount
        viewHref
        shortTitle
        depth
         avatar {
          url
        }
      }
    }
  }
}

My handlebars file:

{{#gql "firstTest" variables=(hash depth=component.props.category_depth)}}
  <ul>
    {{#with data.categories.edges as |edges|}}
        {{#each edges}}
            {{#with node as |categorie|}}
                <li>
                    <img src="{{categorie.avatar.url}}" style="width:30px;"><a href="{{categorie.viewHref}}">{{categorie.shortTitle}}</a> ({{categorie.topicsCount}} topics) - depth: {{categorie.depth}}
                </li>
            {{/with}}
        {{/each}}
    {{/with}}
  </ul>
{{/gql}}

json file:

{
  "id": "firstTest",
  "markupLanguage": "HANDLEBARS",
  "defaults": {
    "config": {
      "applicablePages": ["COMMUNITY", "CATEGORY", "FORUM_BOARD"],
      "dynamicByCoreNode": false,
      "description": "handlebars test"
    },
    "props": [
      {
        "id": "category_depth",
        "dataType": "STRING",
        "list": false,
        "label": "list depth",
        "description": "level of categories to show",
        "control": "INPUT"
      }
    ]
  },
  "components": [
    {
      "id": "custom.widget.firstTest"
    }
  ],
  "grouping": "CUSTOM",
  "aboutThis": null
}