Typescript QueryResource cannot be named error

[rsmith-cs-ux]

Hi there,

Using the notes example from the docs I get Typescript compile errors:

Public property 'notes' of exported class has or is using name 'QueryResource' from external module "<app_path>/node_modules/glimmer-apollo/dist/index" but cannot be named.

for the code

notes = useQuery<GetNotesQuery, GetNotesQueryVariables>(this, () => [
    GET_NOTES,
    {
      /* options */
    },
  ]);

I know I must be doing something silly here, but does anyone know how I can fix this? Thank you in advance for any help you can provide!

[billdami]

@rsmith-cs-ux can you provide the code where you are defining GET_NOTES, and the GetNotesQuery and GetNotesQueryVariables types?

[rsmith-cs-ux]

Sorry about that! They were literally copied from the example in the documentation:

// queries.ts
import { gql } from 'glimmer-apollo';

export const GET_NOTES = gql`
  query GetNotes {
    notes {
      id
      title
      description
    }
  }
`;

export interface GetNotesQuery {
  __typename?: 'Query';
  notes: {
    __typename?: 'Note';
    id: string;
    title: string;
    description: string;
  }[];
}

export interface GetNotesQueryVariables {}

and then imported into my ember component with:

import { GET_NOTES } from './queries';
import { useQuery } from 'glimmer-apollo';
import type { GetNotesQuery, GetNotesQueryVariables } from './queries';

Thank you for your help!

[rsmith-cs-ux]

Spun up a new project and it appears that setting composite: true in our tsconfig.json file is the culprit. I'm still figuring out why, but I'll close this out since it doesn't appear to be anything wrong with the library. Thanks for all your help!