How to automatically generate types for hooks' result data field?

[Tbaut]

Hello

I'm using graphql codegen hooks, which results are of the type: ApolloReactCommon.QueryResult, meaning it's an object that has data, loading and error fields.

Most generally, I'll use the data in other components, where I need to define its type. I currently need to write something like this to get data type:

type MyPost = MyPostQueryHookResult['data']

I would have expected to get this MyPost type created for me. Is there a way to have it generated automatically?

My config:

generates:
  src/generated/graphql.tsx:
    plugins:
      - "typescript"
      - "typescript-operations"
      - "typescript-react-apollo"
    config:
      withHooks: true

Note, this is a cross post from SO where I was unlucky, I'll update the question as soon as I get an answer.

[stonexer]

Also curious about how to get the fields data type properly.

export type MyPostQueryHookResult = (
// ...
    & { creator: (
      { __typename?: 'CommonUser' }
      & Pick<CommonUser, 'id' | 'name' | 'type'>
// ...
);

type PostCreator = MyPostQueryHookResult['data']['xxx']['creator']

[dotansimha]

You can set withResultType: true and it will generate a result type for you, see: https://graphql-code-generator.com/docs/plugins/typescript-react-apollo#withresulttype-boolean-default-value-true

In order to access sub-types (or intermediate types), use a bridge type like you did, or use more fragments in your code (because fragment spreads is being generated on it's own) or use typescript-compatibility. I wrote a long explanation regarding those types, feel free to look for it in the repo :)