Generate Strongly Typed React Components With GraphQL

When developing in React, using a type system (like Typescript or Flow) can be a great help. You can be sure that your props and state are what you expect at build-time and code your components to match. But what happens when you’re calling to an API to fetch some data and the shape of that data is what really matters? Maybe the data get passed as props to a child component? You can create types for this, sure, but are they correct? Probably not! Or at least, probably not for long! Things change. Wouldn’t it be great if your types changed too?

The thing is, there is already a great way to get data that is based on type definitions. It’s called GraphQL, and it’s awesome (if you’re new to this, check out an introduction). Your schema holds the types, and your queries return data in a set shape defined by the client — not arbitrarily from the server. This is a pretty nice benefit. Maybe we could use the schema and queries to properly generate types that we can use in our client. That would be pretty sick. https://goo.gl/BScdfp