Managing Typescript and GraphQL Types in Node

Getting a project started in Typescript and GraphQL can be a bit frustrating when you're unfamiliar with both languages. The overhead of managing two sets of types (static types for Typescript and types needed for a GraphQL schema to function) can feel redundant and a hurdle towards getting your project up and running quickly. This talk discussed some of the tools available to help manage this burden.

Presented @ GraphQL Day Toronto 2019

Transcript

1. Managing Typescript and GraphQL Types in Node GraphQL Day Toronto 2019
2. About Me Full-Stack Engineer @ BenchSci
3. What We’re Going to Talk About • Types in TS and GQL • Tools to manage the types • Final words
4. •Data query language •Can be considered a typed language
5. type Book { author: String! title: String! }
6. •Add (optional) static types to JavaScript •Makes the code self-documenting
7. class Book { constructor( public author: string; public title: string; ) {} }
8. GQL + TS =
9. GQL + TS =
10. // schema.gql type Book { author: String! title: String! } // types.ts class Book { constructor( public author: string; public title: string; ) {} }
11. How do we manage the types?
12. OR
13. Graphqlgen
14. Graphqlgen • Generates type-safe resolvers based on GraphQL schema • Removes manual process of keeping boilerplate code needed for types in sync with schema • Alleviates inconsistencies between resolvers and the schema as project grows in size and complexity
15. •Backed by a company •Easy to adopt with your existing codebases
16. •Types not automated past the point of the resolvers
17. TypeGraphQL
18. TypeGraphQL •Automatically generate GraphQL schema and resolvers using Typescript classes and decorators •Claims to reduce your codebase size by a half or more
19. @ObjectType({ description: 'A book object/data type' }) export class Book { @Field(() => ID) id!: string; @Field() title!: string; @Field() authorId!: string; }
20. const resolvers = { Query: { listBooks: (): Promise<Array<IBook>> => { return this.bookService.list(); } } };
21. @Resolver(Book) export class BookResolver { @Query(() => [Book]) listBooks(): Promise<Book[]> { return this.bookService.list(); } @Mutation(() => Book) addBook(@Arg('input') input: BookCreateInput): Promise<Book> { return this.bookService.create(input) } }
22. # A book object/data type type Book { id: ID! title: String! authorId: String! } # New book data input BookCreateInput { title: String! authorId: String! } type Mutation { addBook(input: BookCreateInput!): Book! } type Query { listBooks: [Book!]! }
23. •More comprehensive solution
24. • Relies on experimental support for Typescript decorators • Doesn’t have the backing of a bigger company • Doesn’t yet support Dataloaders
25. Final Words • Types are great… until you have to try and keep them in sync (especially manually!) • As Typescript continues to increase in popularity, developers will benefit from tools that automate type generation
26. Thanks! Twitter/Medium/Github: @ericapisani Email: pisani.erica@gmail.com