该材料的作者（我们今天将其翻译发表）说，Apollo Client开发人员的任务是使该工具成为用于管理React应用程序状态的最现代，最方便的解决方案。 React社区正在开发和掌握开发用户界面的新有效方法。 Apollo Client的创建者努力确保他们的项目支持React世界中所有最相关的项目。 遵循这一传统，Apollo Client开发人员正在引入配备了React
hook支持的系统的新版本。
在
React 16.8中引入了挂钩。 这是一种新机制，可让您创建状态组件，而不必处理特定于基于类的组件的问题。 现在，Apollo Client包括三个可以在应用程序中使用的钩子-在所有使用高阶组件或渲染道具机制的地方。 这些是useQuery，
useMutation和
useSubscription 。 这些挂钩很容易学习，与已有的API相比，它们具有许多优点。 特别是，这涉及减小应用程序包的大小和减少样板代码的数量。
开始使用
如果要创建新的Apollo项目，建议您在配置Apollo Client实例后安装以下软件包：
npm install @apollo/react-hooks
该软件包导出
ApolloProvider组件，该组件用于将Apollo客户端连接到React应用程序。 同样，使用旧的API来组织工作。
如果您已经有一个使用Apollo的项目，则意味着您有几种切换到挂钩的方法。 具体方法的选择取决于您要进行转换的精确程度。 可以在
这里找到有关此内容的详细信息。
为什么钩住未来？
Apollo Client仍支持基于高阶组件和渲染道具的API。 这些API将在系统中存在一段时间。 我们相信，钩子将成为使用Apollo Client加载数据的最佳机制。 尽管那些已经使用过Apollo的用户现在不必切换到挂钩，但是他们应该对新组件使用挂钩。 该建议有几个我们现在要考虑的原因。
hook使用挂钩时，您需要使用较少的代码来处理数据
挂钩减少了用于处理数据的样板代码数量。 这导致部件的尺寸减小，并且使得这样的部件更容易理解。 因此，开发人员将不再需要研究高阶组件的排列方式，也无需分析渲染道具的复杂逻辑。 要加载数据，只需调用唯一的
useQuery函数即可：
const LAST_LAUNCH = gql` query lastLaunch { launch { id timestamp } } `; export function LastLaunch() { const { loading, data } = useQuery(LAST_LAUNCH); return ( <div> <h1>Last Launch</h1> {loading ? <p>Loading</p> : <p>Timestamp: {data.launch.timestamp}</p>} </div> ); }
这里
useQuery是使用Apollo Client
useQuery hook加载数据
useQuery看一下
本教程应用程序，您可以在其中看到使用Apollo Client挂钩的工作示例。
▍多种突变
当您在单个组件中执行多个变异时，使用高阶组件或render props机制可能会导致难以理解的代码。 API渲染道具的使用（由相互嵌入的
Mutation组件构成的结构的构造）给人以错误的感觉，感觉到结构化代码及其清晰的层次结构。 新的
useMutation挂钩完全避免了此问题。 事实是，它的使用减少为简单的函数调用。 以下示例显示了几种变异和查询如何相互影响。 所有这些都发生在同一组件中：
function Message() { const [saveMessage, { loading }] = useMutation(SAVE_MESSAGE); const [deleteMessage] = useMutation(DELETE_MESSAGE); const { data } = useQuery(GET_MESSAGE); return ( <div> <p> {loading ? 'Loading ...' : `Message: ${data && data.message ? data.message.content : ''}`} </p> <p> <button onClick={() => saveMessage()}>Save</button> <button onClick={() => deleteMessage()}>Delete</button> </p> </div> ); }
useMutation使用
useMutation钩子。 您可以在
此处看到多个变化。 该示例应用程序还包含使用渲染道具创建的类似组件。 这使您有机会将该组件与使用挂钩创建的组件进行比较。
▍改进的TypeScript支持
我们是TypeScript的忠实拥护者，这已经不是什么秘密了。 新挂钩的功能与Apollo CLI生成的自动类型定义配合得很好。 这极大地方便了为React组件编写类型安全代码。 这是使用
useQuery和TypeScript挂钩加载数据的样子：
import { RocketData, RocketVars } from './types'; const GET_ROCKET_INVENTORY = gql` query getRocketInventory($year: Int!) { rocketInventory(year: $year) { id year } } `; export function RocketInventoryList() { const { loading, data } = useQuery<RocketData, RocketVars>( GET_ROCKET_INVENTORY, { variables: { year: 2019 } } ); return (); }
Apollo和TypeScript挂钩使开发强类型的React组件变得容易。
针对React开发人员的其他Apollo Client增强功能
尽管此版本的Apollo专注于新的挂钩，但我们可以谈论一些更有趣的新功能。
▍将包装袋的尺寸减少50％
缩小和压缩的gzip软件包
react-apollo@2的大小为
10.6 Kb ，而
react-apollo@3软件包的大小仅为
7.8 Kb 。 而且，如果
@apollo/react-hooks软件包足以满足您的需求，那么捆绑包的大小将减小到仅
5.1 Kb 。 与
react-apollo@2相比，节省了50％。
query延迟执行查询
useQuery在调用函数时执行其查询。 但这恰恰是并非总是需要的系统行为。 例如，假设有一个用于输入搜索查询的字段，该字段给出了用户提示。 您可能需要显示一个带有此类字段的组件，以准备接受用户输入的内容。 但是，与此同时，对搜索服务器的查询执行将被延迟，直到用户开始在该字段中输入内容为止。 要实现此方案，您可以使用
useLazyQuery钩子，该钩子返回带有
execute功能在第二位置的元组：
const [execute, { loading, data }] = useLazyQuery(GET_INVENTORY);
除非您调用
execute函数，否则请求将不会
execute 。 此时，将再次呈现该组件，并将应用使用
useQuery实现的常规查询执行方案。
API新的API文档
我们通过添加挂钩信息更新了Apollo Client
文档 。 我们建议刚开始使用我们系统的人员使用它们。 但是，尽管如此，我们仍未从文档中删除有关如何使用高阶组件和render props机制的信息。 现在，在文档中的代码示例中，您可以使用新的下拉菜单，该菜单使您可以使用读者最喜欢的方法在演示相同问题的解决方案的代码之间进行切换。
文档中提供了各种代码选项
总结
Apollo Client的创建者说，他们最喜欢React的地方是该库的开发人员核心团队和周围的爱好者社区从程序员的角度不断努力提高React的可用性。 绝对推荐给所有人的钩子外观是这种抱负最鲜明的例子之一。
我们希望Apollo Client中引入的React挂钩能够吸引那些使用此项目来开发其应用程序的人。
亲爱的读者们！ 您是否使用Apollo Client？
