Forum Discussion

baralecki's avatar
baralecki
Contributor
12 days ago

Handlebars custom component not executing GraphQL query

I have been following along with the directions on this page to try to create a custom Handlebars component that executes a graphQL query and displays the results in simple HTML.  

My .hbs file references the query like this:

{{#gql "privateUserStats" variables=(hash id=user.id)}}
 ...
{{/gql}}

I also have a .graphql query defined in queries/privateUserStats.query.graphql:

query privateUserStats($id: ID!) {
  user(id: $id) {
    id
    login
    email
    firstName
    lastName
    email

...  }
  topicsStarted: messages(constraints: {authorId: {eq: $id}, depth: {eq: 0}}) {
    totalCount
  }...
}

 and I reference it in my component.json under the "graphql" block:

 "graphql": {
    "privateUserStats": "./queries/privateUserStats.query.graphql"
  }

Despite this setup:

The Handlebars rendered correctly
user.id was available
But the GraphQL query never fired — no network activity, no data returned, and no console errors

Can someone help? I'm all out of ideas.

Aurora
graphQl
handlebars

2 Replies

  • wkennis's avatar
    wkennis
    Guide
    9 days ago

    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
}

     

  • wkennis's avatar
    wkennis
    Guide
    9 days ago

    I don't know if it is possible to pass a variable in the {{#gql in handlebars within Aurora.

    Don't think you need to add the graphql to your json when it's in the correct folder.