Documentation: Client Interfaces

[arjunyel]

Is there a best practice for generating typescript interfaces for a client? Apollo codegen uses either grapql files or typescript files with a gql tag.

Thanks!

[pie6k]

I'd say typegql class itself might be good interface.

You can also try prisma bindings for creating interface for exiting graphql api

[arjunyel]

I thought about using the class but the difference is an interface is only used by the compiler while a class generates code.

So if you were using the class on a client they would have to include the class code in their bundle

[pie6k]

Do you think that would be helpful for you - https://github.com/dangcuuson/graphql-schema-typescript

[arjunyel]

Unfortunately that looks like it it was created for the server side resolver typings, not client side code like apollo-codegen.

This article talks about the difference between and interface and a class https://toddmotto.com/classes-vs-interfaces-in-typescript#using-typescript-interface

Seems like you'd have to generate .graphql files so Apollo Codegen can use them or somehow generate a JSON representation and use a tool like this http://json2ts.com/

[MichalLytek]

The recommended way of working with GraphQL and TypeScript on client side: 1) Run the GraphQL API server (created with typegql or sth) 2) Generate the schema.json from localhost:PORT using apollo-codegen 2*) Use the schema.json with vscode plugin for graphql intellisense 3) Use apollo-codegen to generate TypeScript interfaces describing the queries you use on client side using gql template tag in code (and using the generated schema.json). 4) Use this interfaces to annotate e.g. graphql generic HOC in React.

Sample command that creates schema.json and generate interfaces for queries/mutations:

apollo-codegen introspect-schema http://localhost:3000/graphql --output ./src/graphql/schema.json && apollo-codegen generate src/graphql/**/*.ts --schema ./src/graphql/schema.json --target typescript --output ./src/graphql/types.ts

[arjunyel]

Thank you for the help! For part 3 are you saying you need to write some client code using gql then combine that with the schema.json? Or where is the gql code located?

[MichalLytek]

No, you this is the normal code you write on the client - the queries and mutations. You want to generate TypeScript interfaces describing the shape of args and response, don't you?

[arjunyel]

Ideally I'd just write a typeql server and from that alone I could generate interfaces a client could use. For example when I write an apollo-server it can generate the schema.json and it has the gql code that apollo-codegen needs all in one.

[MichalLytek]

This is the part - generate schema.json from apollo-server: apollo-codegen introspect-schema http://localhost:3000/graphql --output ./src/graphql/schema.json

For client you need to write in your frontend app:

const myQuery = gql`
  query {
   myQuery {
     fieldOne
     other {
       fieldTwo
     }
   }
 }
`;

And then you can run apollo-codegen generate src/graphql/**/*.ts --schema ./src/graphql/schema.json --target typescript --output ./src/graphql/types.ts to have interface myQuery { ... } inside types.ts.

I could generate interfaces a client could use.

Nope, you can't. The GraphQL schema by itself is the interfaces the describe the API that server expose and client can use.

[arjunyel]

Thank you for your help!