How to provide type hints using JSDoc and Apollo Client?

I have trouble setting up type hints using JSDoc for my JavaScript code (trying to make this work with VSCode and WebStorm).

As first step, I converted GraphQL schema into set of JSDoc @typedef entries using @graphql-codegen/cli. For the sake of this converations, lets talk about this one specific:

// schema.js

/**
 * @typedef {Object} Country
 * @property {string} code
 * @property {string} name
 */

Then, somewhere in my App.js I tried writing:

// App.js

const GET_COUNTRIES = gql`
  query GetCountries {
    countries {
      code
      name
    }
  }
`;

/**
 * @typedef {import("./schema").Country} Country
 * @typedef {import("@apollo/client").QueryResult} QueryResult

 * @returns {QueryResult<Country>}
 */
const useGetCountries = () => {
  return useQuery(GET_COUNTRIES);
};

However, it looks like the type definitions from schema.js are being ignored (both App.js and schema.js are in the same directory).

My question is: is it possible to setup something like this – have IDE pickup JSDoc type definitions and provide type hints? If the answer is YES, how would I go around settings this up?

I’ve created a simple repro on CodeSandbox at https://codesandbox.io/s/graphql-type-hints-n1vh0