[graphql-operations] How can I use query types ?

[kimurakenshi]

Summary

Hi all, thank you for building this amazing tool. I'm just starting to integrate this tool into my project and have a quick question. I want to refer to the type generated in the query for a nested node so I can type graphql query responses. How can I do that? Since the type is generated inline I cannot refer to a nested type:

Example

GraphQL Codegen Config

overwrite: true
schema: graphql-schema.graphql
documents: "src/**/*.{gql,graphql,js,ts,jsx,tsx}"
generates:
  ./src/shared/graphql/types.ts:
    plugins:
      - typescript
      - typescript-operations
    config:
      preResolveType: false

Query

  query BrowseTitles {
    searchTitles {
      edges {
        node {
          name
          updatedOn
        }
      }
    }
  }

Generated Type

export type BrowseTitlesQuery = {
  __typename?: 'Query';
  searchTitles?:
    | {
        __typename?: 'TitleConnection';
        edges: Array<{
          __typename?: 'TitleEdge';
          node: { __typename?: 'Title'; name: string; updatedOn: any };
        }>;
      }
    | null
    | undefined;
};

Application

// Return type for this function should be `node` type but it is not being exposed by the generated types.
const fetchTitle = (): { __typename?: 'Title'; name: string; updatedOn: any } => {
  ...
}

I tried using Pick but it doesn't support nested props. Any ideas of how I could achieve this?

Thank you.

Update: I ended up creating fragments to extract the section of the response type I wanted to import in my application code and that seems to be a good approach for my use case.