glimmer-apollo icon indicating copy to clipboard operation
glimmer-apollo copied to clipboard

Deprivatize and export more internal TS definitions

Open billdami opened this issue 2 years ago • 4 comments

It would be helpful for consuming apps to have access to more internal TS types in glimmer-apollo, such as QueryResource. When typing things like component arguments, you currently would have to re-define the types if you want to pass in a glimmer-apollo query as an arg, for example:

interface MyComponentArgs {
    query: {
         loading: boolean;
         error?: string;
         data: {
              //...
         };
    }
}

billdami avatar Mar 02 '22 13:03 billdami

@josemarluedke any thoughts on this?

Currently in my app I've worked around this by just creating a types/glimmer-apollo-tmp/index.d.ts with

declare module 'glimmer-apollo-tmp' {
    //redeclared all the missing/private glimmer-apollo types here...
}

And just importing from that in my app when I need to

import { QueryResource } from 'glimmer-apollo-tmp';

export default class MyRoute extends Route {
    setupController(
        controller: MyController,
        model: QueryResource<MyQuery, MyQueryVariables>,
        transition: Transition
    ) {
        super.setupController(controller, model, transition);
        //other logic...
    }
}

I'm happy to put togther a PR for this, unless you have any objections to making those types public.

billdami avatar Apr 22 '22 17:04 billdami

👍 @billdami would we very helpful for us as well

xomaczar avatar Apr 22 '22 19:04 xomaczar

This might even be necessary to make TypeScript understand the return types of useQuery and useMutation etc when it tries to build declarations if you have declaration: true in your tsconfig.json (which is the default now when you install ember-cli-typescript).

Currently the problem we run into is TypeScript complaining when it tries to build the declarations as apparently it doesn't take inferred types into account.

Public property 'myQuery' of exported class has or is using name 'QueryResource' from external module "node_modules/glimmer-apollo/dist/index" but cannot be named. ts(4029)

Apparently the solution is to import QueryResource and explicitly set the type of myQuery, but that is not possible as QueryResource is not exported.

See for more info on this:

https://github.com/microsoft/TypeScript/issues/5711 https://github.com/microsoft/TypeScript/issues/9944

bitwolfe avatar May 10 '22 12:05 bitwolfe

We export a set of utility types that allows to extract args and result of useQuery, useMutation and useSubscription.

I think we are missing docs for these, but you can import them like so:

import type { UseQuery, UseMutation, UseSubscription } from 'glimmer-apollo';

Using them is quite simple:

import type { UseQuery } from 'glimmer-apollo';

export default class MyRoute extends Route {
    setupController(
        controller: MyController,
        model: UseQuery<MyQuery, MyQueryVariables>['result'],
        transition: Transition
    ) {
        super.setupController(controller, model, transition);
        //other logic...
    }
}

josemarluedke avatar May 17 '22 23:05 josemarluedke