{"type":"doc","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":" Preface ","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" There's a lot in the community about GraphQL Introduction and principles of the article ,GraphQL and Apollo Client The official website also has a more detailed introduction . be relative to RESTful API（ abbreviation REST), The community has also analyzed from various aspects GraphQL The advantages and disadvantages of . This article is mainly from the front-end point of view , Under the premise that the separation of front-end and back-end development prevails today , Share some of our experiences on how to use popular tools in the community to improve development efficiency and project quality , Hope has been determined to go into the pit GraphQL My friends have some help .","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"GraphQL Playground","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" First contact GraphQL I'm sure I'll learn from the official documents when I get there GraphQL Server Provided by the Playground.","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Playground It's a complete browser side GraphQL IDE, Include Documentation, Schema And one that can be written and tested GraphQL The requested editor .","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/62/6235d8cc4906a9055b1879642ef03fbd.webp","alt":" picture ","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" For the use of GraphQL Development team , Playground Basically, it can be replaced by Swagger Something like that API Documents and such as Postman And so on . Is a relatively complete development manual , And the advantage is zero cost use , And there's a team to maintain and iterate .GraphQL The vast majority of communities are interested in GraphQL Server The implementation of the will be built in Playground.","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"Apollo Client Devtool","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/89/8936576bd8962817e521906202a1ed7b.webp","alt":" picture ","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Apollo Client Devtool yes Apollo Client One provided Chrome plug-in unit , It can be found in the browser Console Capture page sent in Query and Mutation, And provides editing , Modify and retry these requests , And the most important check GraphQL Client Caching capabilities .","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" Because of all the GraphQL It's all sent to the unified path ,Query Body It's also sent as a string , Makes the request unreadable , Apollo Client Devtool Rather than through tradition Network We've optimized the way we do .","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" The above two tools can be said to be necessary for beginners , It's similar to our front and back docking Restful Api The tools that we'll use when we're in the game .GraphQL rely on Schema More efficiency tools are available .","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"GrahpQL VS Code Plugin","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/67/67c1fdb7b2b7fd66bbfabb89276a1b72.gif","alt":" picture ","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Visual Studio Code（ abbreviation VS Code） Plugin GraphQL It provides quite a full range of functions , Including grammar checking , Syntax highlighting , Reference jump ,Schema Suspended prompt ,Autocomplete etc. . Is a must install plug-in .","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" A very important function is , When we define Schema The description of each parameter defined at the same time （ Some implementations are inserted through code comments Schema ） You can use this plug-in's prompt in IDE It's shown in the book , That is, the annotation content needed at both ends , Including the description of the interface , Description of interface parameters, etc , Now it can be used only in Schema It's OK to define it in the dictionary .","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/d0/d08c1208bd7c10d6974fa36e2d3e9f7c.webp","alt":" picture ","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/af/afa270a13fdab9a397be530ce1e5baf8.webp","alt":" picture ","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" The Plugin It also provides a way to IDE Internal execution Query and Mutation The function of .","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/85/85d90c96caf258feb47d169606a2e62c.webp","alt":" picture ","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" But I think the practicability is limited , For... Without parameters Query Queries can be executed directly , For the Query and Mutation Need to be in VS Code Input parameters in the pop-up window of , If it's a relatively simple string or numeric parameter, it's more convenient , But if it's a more complex structure, you need to input Stringfy Later JSON Format , And in many cases, the parameters of the chain request depend on the previous request , The parameters needed to send the request are even more difficult to obtain manually .","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/6c/6cee846ebdb8d0f30a36da8739558e7c.webp","alt":" picture ","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" The above tools can help us to query and write more conveniently Query, But these are not enough , We need tools to put Schema Integrating into the process of front end Engineering , Improve code robustness while improving efficiency .","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"GraphQL ESLint","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/b1/b10d3ae795056b4b9188c84f7e4bd54f.webp","alt":" picture ","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"GraphQL ESLint The most basic front-end code checking is ESLint, We have a unified Schema after , You can go through Schema Generate the corresponding rules to Query Carry out similar Playground in Syntax Check .","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"GraphQL Code Generator","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"GraphQL Code-Generator The best way to improve the robustness of front-end code is undoubtedly TypeScript , But according to Schema It's a lot of work to write a complete set of type files for a project , GraphQL Code Generator Is a basis Schema Generating all kinds of language type files cli Tools , The tool itself is through Preset and Plugin To meet the needs of different languages and functions , The government itself provides a wealth of Preset and Plugin Can meet most of the development needs , Customize Plugin There are also more detailed documents and examples . We're just going to talk about Typescript And the related Plugin.","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/a2/a2c4f5217e91e12d31610f8e9ab60bdc.webp","alt":" picture ","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" The core point is through Code Generator Generated Type The file contains Schema Description of the . So we're using GraphQL The returned data is ,Typescript Will prompt the description of the data type . Here's the picture , About Event In the object Description Description of the field “Maximum 50 characters” It's the back end that defines Schema Notes written when , Through this generated type file , Became the front end Typescript Comments in type files , Can be IDE Perfect quote . It means that when the back-end students write code comments , Also help front-end students write code comments .","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/17/17abf4c7b8c16e5c61f382d49a151f4e.png","alt":" picture ","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" Here's how to use these types of files , In the VS Code Typescript With the help of plug-ins, we are using UseQuery Hook when , Well defined UseQuery Pseudo class of You can have a complete data type reminder when using the returned data ,Autocomplete And definition Schema The specific description of the field in the . Compared with the traditional way of switching back and forth between projects and documents, this way improves the development experience and efficiency , It also enhances the robustness of the code .","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" But there is also a problem with this approach , That is, careful friends may find that we are defining Query I just asked Events Object's Name attribute , But the automatic prompt does Events Contains all possible fields , It doesn't fully meet our requirements .","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" Let's see UseQuery Method type definition :","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":null},"content":[{"type":"text","text":"useQuery: TData = any, TVariables = OperationVariables: (query: DocumentNode | TypedDocumentNode
, options?: QueryHookOptions): QueryResult;","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" Accept two pseudo classes TData and TVaraibles, We need to use Hooks You pass in these two parameters , If it is based on Query Customize the return value , We need to pass in the first parameter to be Pick or Exclude The type of packaging , If Query or Mutation There are also input parameters that need to be from the root path Type.TS Quoting Input The type of , Very trouble .","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":null},"content":[{"type":"text","text":" {events: Pick[]}","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":null},"content":[{"type":"text","text":"query GetEvents{ events { id name }}","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Code-Generator There are also corresponding solutions to this problem , adopt Typescript-Operations This Plugin Generated file generated type file will automatically exclude the default fields ","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":null},"content":[{"type":"text","text":"export type GetEventsQueryVariables = SchemaTypes.Exact<{ [key: string]: never; }>;\n// With Pick export type GetEventsQuery = { events?: SchemaTypes.Maybe>>> };\n// Without Pickexport type GetEventsQuery = { events?: SchemaTypes.Maybe }>>> };","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" For the use of React + Apollo Client Project ,typescript-react-apollo plugin Not only can you generate types , You can also generate and Query Corresponding to the request of hook Including packaged UseQuery, UseLazyQuery etc. , It can greatly improve the development efficiency on the premise of ensuring the integrity of code types .","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/3f/3fe4e3e7ce95fd3078d50695d0fcd87b.webp","alt":" picture ","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Code Generator A lot of plug-ins , There are also many configuration items , Customize Plugin It's easier , According to the needs of the project , Configure an engineering solution suitable for the project and the team .","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"GraphQL Introspection","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" All of the tools mentioned above depend on GraphQL Provided in the standard Introspection Interface implemented , The capability of this interface is also very simple and clear , It's a rule for GraphQL The root of the request is always __schema node , You can query the entire Schema The content of . Most of the tools in the community are also developed through this interface .","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Introspection, Interested friends can also refer to GraphQL To develop your own tools .","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"GraphQL Config","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" Last but not least GraphQL Config, One profile supports all and GraphQL Related tools . The profile supports multiple file types , for example Json、Yaml、 Yml、 JS、TS wait , Most of the tools in the community support GraphQL Config The configuration file ,GraphQL The official also suggests that developers use GraphQL Config As a configuration file . If you develop your own tools, you can also use GraphQL Config As a configuration file . We're using and sharing GraphQL These tools in Ecology , It's very convenient to rely on only one configuration file .","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":null},"content":[{"type":"text","text":"schema: './schema/*.GraphQL'extensions: codegen: generates: ./src/types.ts: plugins: - typescript - typescript-resolvers","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":" summary ","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"GraphQL It gives the front-end project more flexibility in requesting data , A more robust type definition , Also for the use of Typescript It brings more work . But with the support of the community , Reasonable use of tools can ensure the security of front-end project types , Greatly improve the efficiency and quality of the project , Also from the side to solve some of the old problems of documentation and notes .","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":" Refer to the directory ","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"italic","attrs":{}}],"text":"Apollo Grpahql (https://www.apollographql.com/)","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"italic","attrs":{}}],"text":"Graphql-playground (https://github.com/GraphQL/GraphQL-playground)","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"italic","attrs":{}}],"text":"Apollo Client Devtools (https://chrome.google.com/webstore/detail/apollo-client-devtools/jdkknkkbebbapilgoeccciglkfbmbnfm)","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"italic","attrs":{}}],"text":"GraphQL VS Code Plugin (GraphQL - Visual Studio Marketplace)","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"italic","attrs":{}}],"text":"Graphql-eslint (dotansimha/graphql-eslint)","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"italic","attrs":{}}],"text":"Graphql-code-generator (https://www.graphql-code-generator.com/)","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"italic","attrs":{}}],"text":"Graphql Orgnization (https://graphql.org/)","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"italic","attrs":{}}],"text":"Graphql Config (https://graphql-config.com/)","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/4f/4f723eac3769618f47affa9ddad2d0c6.jpeg","alt":null,"title":"","style":[{"key":"width","value":"25%"},{"key":"bordertype","value":"none"}],"href":"","fromPaste":false,"pastePass":false}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":"center","origin":null},"content":[{"type":"text","text":" author ： Zhou Zhaoting / Front-end development engineer ","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":" Recruitment information ","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"GrowingIO The technical team is a dynamic one 、 A team full of passion for Technology , Continuous recruitment for multiple positions ！ We are looking for front-end engineers / Big Data Engineer /Java Engineers, etc , You are welcome to send your resume to ：[email protected]（ Please indicate the title of the post ） , More positions and information can be found on the recruitment website .","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":" About GrowingIO","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"GrowingIO It is the leading one-stop data growth engine overall solution service provider in China , Founded in 2015 year , With the ability of data intelligent analysis as the core , By building a customer data platform , Build a growth marketing loop , Help enterprises improve their data-driven capabilities , Enabling business decisions 、 Achieve business growth .","attrs":{}}]}]}