从GraphQL操作中自动生成代码

At Nextdoor, we’re constantly iterating our frontend web product to give neighbors the best experience, often releasing new versions with significant code changes multiple times per day. Two of the tools we use to keep our development velocity high are GraphQL (a popular query language for APIs) and Flow (a static type checker for JavaScript). These tools ensure that our React web app can anticipate the shape of network responses from our web server, helping us make changes quickly and safely.

在Nextdoor，我们不断迭代我们的前端网络产品，以给邻居们提供最佳体验，经常每天多次发布具有重大代码变化的新版本。我们用来保持高开发速度的两个工具是GraphQL（一种流行的API查询语言）和Flow（一种JavaScript的静态类型检查器）。这些工具确保我们的React网络应用能够预测来自网络服务器的网络响应的形状，帮助我们快速、安全地做出改变。

In this article, we’ll go over how to implement a system to generate Flow types for GraphQL. Using the GraphQL.js library and @babel/generator, we’ll walk through a step-by-step process to translate a GraphQL operation to Flow type definitions. The code we’ll show you here is the basis for the system we use in production.

在这篇文章中，我们将介绍如何实现一个系统，为GraphQL生成Flow类型。使用GraphQL.js库和@babel/generator，我们将通过一个逐步的过程，将GraphQL操作转化为Flow类型定义。我们将在这里展示的代码是我们在生产中使用的系统的基础。

GraphQL, Babel, and Flow, which we’ll be using here

GraphQL、Babel和Flow，我们将在这里使用它们

The Problem

问题所在

In 2019, we adopted GraphQL and were encouraged by the increase in developer speed we observed, but ran into problems generating our frontend Flow types in a way that kept our types and pull requests (PRs) easy to read. Existing solutions for generating Flow types from GraphQL operations didn’t quite fit our needs. In particular, we needed:

2019年，我们采用了GraphQL，并为我们观察到的开发人员速度的提高而感到鼓舞，但在生成我们的前端Flow类型时遇到了问题，以保持我们的类型和拉动请求（PR）易于阅读的方式。现有的从GraphQL操作中生成Flow类型的解决方案并不完全适合我们的需要。特别是，我们需要。

1. A type generator written for Flow, as opposed to TypeScript (a more popular alternative to Flow). We found that existing type generators were written with TypeScript in mind, which led to syntax errors when using Flow.
2. 一个为Flow编写的类型生成器，而不是TypeScript（Flow的一个更流行的替代品）。我们发现，现有的类型生成器是以TypeScript为基础编写的，这导致了使用Flow时的语法错误。
3. A type generator ...