Error message when adding a query to handlebars component (Aurora)

I'm trying to follow the documentation on creating a custom handlebars component in Aurora and I'm running into a weird error that I can't figure out. I have added the component via a GraphQL mutation and it works fine with some basic HTML, but once I try to follow this doc: https://developer.khoros.com/khorosauroradevdocs/docs/adding-graphql-queries-and-fragments-to-a-custom-handlebars-component I'm running into some issues:

1. There's no docs (at least not that I've found) that explain how to get the bearer token or where the file should be stored or how that works when using GraphQL to upload a GraphQL file to use in a component (see here: https://developer.khoros.com/khorosauroradevdocs/docs/adding-graphql-queries-and-fragments-to-a-custom-handlebars-component#uploading-a-graphql-file-for-a-component-via-graphql) and I've been unable to figure out how to do this on my own. I've tried a few things with no success.
2. If I try to follow the steps to add it manually, then I run into some strange errors. I'm running the SDK via VS code terminal which is working fine, but as soon as I follow the steps to add a "queries" folder and .graphql file to that folder within my component folder (e.g., components/myComponent/queries/myComponent.query.graphql) then I get an error in the VS Code terminal that says ""message": "The Content-Type header included with the request is not allowed (it should be either application/json or application/xml)."," and in my browser console when I try to load my custom component is: "Unable to fetch component to render for component id custom.widget.releaseTkbSidebar: Exception while fetching data (/component/render) : com.github.jknack.handlebars.HandlebarsException: releaseTkbSidebar:1:18: lithium.coreapi.components.ComponentTemplateApplyException: unable to apply template: releaseTkbSidebar: no query found matching the name 'releaseTkbSidebarQuery'.
       releaseTkbSidebar:1:18"

Anyone know what's going on here? I've follow the dev docs and examples exactly (or as close as I can given that they've proven to be very inaccurate) and I'm out of things to test through trial and error.

Here's what I have in my .hbs file for my custom component: 

<h2>Test!</h2>
{{#gql "releaseTkbSidebarQuery"}}
  {{#with data.messages.edges as |edges|}}
    {{#each edges}}
      {{#with node as |message|}}
        <p>{{message.subject}}</p>
      {{/with}}
    {{/each}}
  {{/with}}
{{/gql}}

And here's what my .graphql query file looks like

query releaseTkbSidebarQuery {
  messages {
    edges {
      node {
        id
        customFields
        subject
      }
    }
  }
}

My file structure looks like this

Any help would be very much appreciated!