SDL as an Artifact: Code-First Schemas in TS & JS

Video: https://www.youtube.com/watch?v=DlF226AEYSM

Transcript

1. SDL as an Artifact: Code-First Schemas in TS/JS @tgriesser
2. Tim Griesser @tgriesser “Fast, reliable testing for anything that runs in a browser”
3. ❤
4. ❤ A Brief Timeline
5. 2015: graphql-js
8. Later 2015 graph.ql 2015: graphql-js
9. Original “SDL First” Library: Released November 2015
12. vs
13. Later 2015 - 2016: graph.ql graphql-tools 2015: graphql-js
14. 2015: graphql-js Later 2015 - 2016: graph.ql graphql-tools 2017: Graphene (Python)
16. – Me, when beginning to use Graphene “Oh no, this library doesn’t develop the SDL first”
17. …a few months pass
18. “Hey, this approach is actually very nice… scales really well to multiple teams working on the same schema”
19. Stats from Graphene Generated SDL: ~ 600 types ~ 3000 fields ~ 35 deprecations ~ 0 custom directives ~ 18 developers, 4 teams contributing to the same schema
20. GitHub Public API SDL: ~ 500 types ~ 3000 fields ~ 6 deprecations ~ 0 custom directives Source: https://github.com/octokit/graphql-schema
21. 2015: graphql-js Later 2015 - 2016: graph.ql graphql-tools 2017: Graphene (Python) 2018: GraphQL Ruby
23. 2015: graphql-js Later 2015 - 2016: graph.ql graphql-tools 2017: Graphene (Python) 2018: GraphQL Ruby Also 2018: graphql-tools + graphql-code-generator
25. – Marc-André Giroux during Q&A after at GraphQL NYC “…I’m not sure - SDL first seems to be unique to the JavaScript community”
26. …it feels like the JavaScript ecosystem is missing out
28. Maybe we’re doing it wrong?
29. What might a better “code first” approach look like?
30. GraphQL Nexus: An improved experience building code-first schemas in JavaScript & TypeScript
31. Why not SDL first?
32. GraphQL Nexus Why not SDL first?
33. Related Tooling in the Ecosystem GraphQL Nexus Why not SDL first?
34. Why not SDL first? Related Tooling in the Ecosystem GraphQL Nexus How SDL is Still Incredibly Useful
35. Why not SDL first?
36. Code Duplication
38. “Double Declaration Problem”
39. Implemented 16 times in GitHub’s Public API… Adding a new field with SDL first would mean finding all 16 locations and adding the new field
40. Code Duplication Documentation / Type Ordering
41. Keeps your generated SDL consistent, no need to worry about merge conflicts or making sure fields & types you add are in the right place in a handwritten SDL file
42. Code Duplication Documentation / Type Ordering Building For Larger Teams
43. Budget Team Search Team Expenses Team Integrations Team Schema(types) Web Client API Mobile
44. Code Duplication Documentation / Type Ordering Building For Larger Teams Tooling Complexity
45. Code Duplication Documentation / Type Ordering Building For Larger Teams Tooling Complexity Microservices?
47. https://nexus.js.org
48. Code First
49. Code First Declarative
52. Code First Declarative Type-Safe
53. Code First Declarative Type-Safe JavaScript Friendly
54. Code First Declarative Type-Safe JavaScript Friendly Extensible
55. What makes it different??
56. Development Feedback Loop
57. makeSchema({ types })
58. Generated types are 
 Inferred by
 TypeScript Outputs SDL Schema Artifact Creates GraphQL schema Outputs TypeScript Types Imported type “registry” wired up makeSchema({ types })
59. Generated types are 
 Inferred by
 TypeScript Changes to
 Schema, Restart 
 the Server IDE Auto-Completion & Type Checking Optional for JS development makeSchema({ types })
60. Generated types are 
 Inferred by
 TypeScript Changes to
 Schema, Restart 
 the Server Regenerates SDL & Types files makeSchema({ types })
62. Type-Safety
65. Generated in Development
66. Generates a normal schema
67. How? Conditional Types + Global Declaration Merging
71. What’s the resolver return type?
72. What’s the resolver return type? "Droid", "primaryFunction"
73. What’s the resolver return type (continued)?
74. What’s the resolver return type (continued)? You don’t need to worry about this…
75. End Result: Type-safety with less typing
76. Extensibility & Plugins: Building custom, type-safe abstractions
77. fieldAuthorizePlugin
80. Example of a Plugin
81. Plugins: “onMissingType” Allows defining fallback behavior when a requested type does not exist in the schema Dynamic type generation
82. Created “Just in Time” as Nexus is creating the GraphQL schema Plugins: “onMissingType”
83. Dynamic Builder Methods/Properties
84. Connections:
85. Customize object construction for your use cases
86. Customize object construction for your use cases
87. Auto-generated
89. Makes something previously complicated simple
90. nexus-prisma +
91. Abstracts CRUD boilerplate based on what they know about your database and how it interacts with the Prisma platform Allows users to override the pieces they care about as they need to evolve, rather than locking you into a certain schema up-front nexus-prisma
92. Augmenting library behavior, both runtime and types based on user defined constructs
93. The SDL Converter
95. The Rough Edges
96. Generated types are 
 Inferred by
 TypeScript Changes to
 Code, Restarts
 the Server Requires Some Configuration Chicken / Egg Problem TypeScript errors are sometimes cryptic Dynamic Types & Jump To Code The Rough Edges: makeSchema({ types })
97. Overall, though it has seemed to work pretty well
98. Other Code-First Tooling
102. SDL is Still Incredibly Useful
103. Common Language
104. Users don’t see our code, they just want a good experience on the web
105. Pick whichever tools help you solve problems
106. Thanks! https://nexus.js.org @tgriesser