Type safety from Hasura to SWR

Frontend First

Ryan shares his experience getting end-to-end type safety from a Hasura backend into a React application. He tells Sam about the different ways GraphQL codegen can be used to generate types, and how he ultimately landed on a solution that combines the TypedDocumentNode type and the zod library.

Topics include:

• 0:00 - Intro
• 2:51 - Using GraphQL Language Server to get autocomplete + linting
• 13:05 - Getting type information on the return object from a query passed to SWR
• 24:06 - Generating TypedDocumentNode objects with GraphQL codegen
• 33:33 - Using zod for run-time validation

Links:

• GraphQL Tag / gql
• GraphQL codegen
• GraphQL codegen over the years
• Ryan’s Tweet with TypedDocumentNode
• Zeus
• Hasura
• Zod