DEV Community

Cover image for GraphQL Code Generator for Typescript React Apollo
TheGuildBot for The Guild

Posted on • Updated on • Originally published at the-guild.dev

GraphQL Code Generator for Typescript React Apollo

This article was published on Tuesday, August 21, 2018 by Arda Tanrikulu @ The Guild Blog

GraphQL Code Generator is a template based
generator that lets you generate anything out of your GraphQL schemas and queries.So we've created a new template that generates React Apollo's Query, Mutation and
Subscription components, as well as HOC components, all completely typed by
TypeScript, so you won't have to do that work manually!## Introducing a Code Generator for React ApolloWhether you use the new React Apollo API or you prefer to use HOC, there is really no need
to write those wrapper components again and again!Based on a GraphQL static schema and a GraphQL query, the
GraphQL Codegen - Typescript React Apollo Template
will generate a ready to use, fully typed components. All you need to do is to write your query,
mutation or subscription and just use those components in your application.Using React, TypeScript and GraphQL in a coordinated way, gives us new level of
simplicity and power for our developer experience:* Less code to write — no need to create a network call, no need to create Typescript typings,
no need to create a dedicated React Component

withHooks: true - will generate type-safe hooks.

withComponent: true - will generate type-safe data components.

withHOC: true - will generate type-safe High-Order-Components.
**We believe *GraphQL** is a game changer in how you plan and create your frontend apps.The vision that guides us is that you should be able to sketch a list of data types your backend can
provide, sketch components and their data dependencies — and all the rest of the plumbing can be
generated for you.Once you'll write an app like that, you will ask yourself why did you write all the other
boilerplate code by yourself before.This is just one template out of many, check out more things you can generate with the
GraphQL Code Generator and give us ideas about other templates
you would like to see implemented.

Top comments (0)