Generaty output type like apollo

[JajaComp]

Hi! Now i try use you tools for migration from apollo codegen. In my project i use >100 queries to graphql like this:

query Tasks {
  id
  name
  project {
    id
    name
  }
...
}

Apollo generate interface:

export interface Tasks_tasks {
  id: Uuid;
  name: string;
  project: Tasks_tasks_project;
}

export interface Tasks_tasks_project {
  id: Uuid;
  name: string;
}

Can i generate some think like this with you tools? I use this interfaces for extends internal data models.

[n1ru4l]

It is not possible to generate interfaces instead of types.

If you want to extend them with an interface you can simply use the extends keyword.

type A = {
  a: number;
  b: number; 
}


interface B extends A {
  c: 1
}

function a(b: B) {
  b.a
  b.b
  b.c
}

Example on TypeScript Playground

[TheDutchCoder]

@TheDutchCoder You can use fragments for getting individual types that you can use for property typing.

Unfortunately you can't because the fragment's type is not used in the returned value of the query.

[ardatan]

@TheDutchCoder If you use that fragment in that query, it will match the specific part of that operation so you can use the generated type of that fragment. If this still doesn't work you, please share an example on CodeSandbox or StackBlitz.

[TheDutchCoder]

@TheDutchCoder If you use that fragment in that query, it will match the specific part of that operation so you can use the generated type of that fragment. If this still doesn't work you, please share an example on CodeSandbox or StackBlitz.

What do you mean exactly by "If you use that fragment in that query"?

The fragment itself is not very useful as the query could use the fragment + additional fields, those combined should generate a type/interface of its own, but graphql-code-generator doesn't do that.

I pass the query type to a function and the function uses the returns with the return type as part of the data (e.g. response.data.getCollection where getCollection should have a type/interface, but currently it's just an object.

I have a feeling I'm not explaining this well enough. I will add a code example in a minute.

[n1ru4l]

@TheDutchCoder Please provide an example on CodeSandbox. We cannot really understand the issue here.

[TheDutchCoder]

@TheDutchCoder Please provide an example on CodeSandbox. We cannot really understand the issue here.

This is the query that's generated:

export type GetAccountQuery = { __typename?: 'Query', getAccount?: { __typename?: 'Account', id: string, username?: string | null, bio?: string | null, email?: string | null, banner?: any | null, icon?: any | null, type?: AccountTypes | null, verified?: boolean | null, social?: { __typename?: 'SocialLinks', twitter?: string | null, instagram?: string | null, website?: string | null } | null } | null };

And this is what I expect it to actually be:

export type GetAccountQuery = { __typename?: 'Query', getAccount?: GetAccountQueryAccount | null };

export type GetAccountQueryAccount = { __typename?: 'Account', id: string, username?: string | null, bio?: string | null, email?: string | null, banner?: any | null, icon?: any | null, type?: AccountTypes | null, verified?: boolean | null, social?: { __typename?: 'SocialLinks', twitter?: string | null, instagram?: string | null, website?: string | null } | null }

GetAccountQueryAccount would be the type of the response, so that if you assign to something (like a ref in Vue) you can make sure it's of the correct type.