Finishing the ApolloClient to enterprise development

Scene

An actively developing front-end settlement that has come to believe in ApolloClient 3. The inhabitants of the settlement are usually laconic and use the black magic of code generation. To protect their life from the raids of barbarians, they actively use TypeScript and Eslint. The main trade of the inhabitants is the creation of SPA applications.

Morality

Show how to use ApolloClient 3 with code generation, static analysis and minimum boilerplate. Show the ability to quickly find bugs in ever-changing requirements.

Protagonists

• GraphQL: query language for getting data from the backend.
• ApolloClient 3: the state manager for storing and updating data received through GraphQL.
• GraphQL Code Generator: utility for generating hooks and type definitions from .graphql files.
• TypeScript: statically typed JavaScript, which makes it possible to carry out static analysis of the application code.
• Eslint: the linter that allows you to check the code for compliance with the accepted code style in the project. And also plugins prettier, @ graphql-eslint / eslint-plugin.

Minor Characters

• VSCode: free and wrapped up code editor with graphql.vscode-graphql plugin.
• NextJS is a React framework that relieves the headache of routing, application build and runtime.
• Ant.design it is alive UI-kit with nice components.

Antagonists

• Backenders who like to change API frequently.
• Frontenders who love dirty code (for example, tabs instead of spaces).
• Boilerplate code: childhood trauma from Redux.
• Sprawling Data Domain with a bunch of links.