react apollo

If you want to build apps with React and GraphQL, Apollo is the library you should use.

如果要使用React和GraphQL构建应用程序，则应使用Apollo库。

I've put together a comprehensive cheatsheet that goes through all of the core concepts in the Apollo library, showing you how to use it with React from front to back.

我整理了一份全面的备忘单，介绍了Apollo库中的所有核心概念，向您展示了如何从头到尾将它与React一起使用。

想要自己的副本？ (Want Your Own Copy? )

You can grab the PDF cheatsheet right here (it takes 5 seconds).

您可以在此处获取PDF速查表(需要5秒钟)。

Here are some quick wins from grabbing the downloadable version:

从下载可下载版本中可以快速获得一些好处：

• ✓ Quick reference to review however and whenever
  ✓无论何时何地都可以快速查阅
• ✓ Tons of useful code snippets based off of real-world projects
  ✓大量基于实际项目的有用代码段
• ✓ Read this guide offline, wherever you like. On the train, at your desk, standing in line — anywhere.
  ✓随时随地离线阅读本指南。 在火车上，在您的办公桌前，在任何地方排队。

喜欢视频课程吗？ (Prefer Video Lessons? )

A great deal of this cheatsheet is based off of the app built in the React + GraphQL 2020 Crash Course.

该备忘单很大程度上基于React + GraphQL 2020速成课程中构建的应用程序。

If you want some more hands-on video lessons, plus see how to build apps with React, GraphQL and Apollo, you can watch the course right here.

如果您需要更多的动手视频课程，以及了解如何使用React，GraphQL和Apollo构建应用程序，可以在此处观看课程。

Note: This cheatsheet does assume familiarity with React and GraphQL. If you need a quick refresher on GraphQL and how to write it, a great resource is the official GraphQL website.

注意：该备忘单假定您已熟悉React和GraphQL。 如果您需要GraphQL的快速入门以及如何编写它，那么官方的GraphQL网站是一个很好的资源。

目录 (Table of Contents)

入门 (Getting Started)

• What is Apollo and why do we need it?

  什么是阿波罗，为什么我们需要它？

• Apollo Client setup

  Apollo客户端设置

• Creating a new Apollo Client

  创建一个新的Apollo客户端

• Providing the client to React components

  向客户端提供React组件

• Using the client directly

  直接使用客户端

• Writing GraphQL in .js files with gql

  使用gql在.js文件中编写GraphQL

核心Apollo React挂钩 (Core Apollo React Hooks)

• useQuery Hook

  useQuery挂钩

• useLazyQuery Hook

  useLazyQuery挂钩

• useMutation Hook

  useMutation挂钩

• useSubscription Hook

  useSubscription挂钩

基本食谱 (Essential Recipes)

• Manually setting the fetch policy

  手动设置获取策略

• Updating the cache upon a mutation

  发生突变时更新缓存

• Refetching queries with useQuery

  使用useQuery重新查询

• Refetching queries with useMutation

  使用useMutation重新查询

• Accessing the client with useApolloClient

  使用useApolloClient访问客户端

什么是阿波罗，为什么我们需要它？ (What is Apollo and why do we need it?)

Apollo is a library that brings together two incredibly useful technologies used to build web and mobile apps: React and GraphQL.

Apollo是一个库，汇集了用于构建Web和移动应用程序的两种极其有用的技术：React和GraphQL。

React was made for creating great user experiences with JavaScript. GraphQL is a very straightforward and declarative new language to more easily and efficiently fetch and change data, whether it is from a database or even from static files.

React旨在通过JavaScript创造出色的用户体验。 GraphQL是一种非常直接和声明性的新语言，可以更轻松有效地获取和更改数据，无论是从数据库还是从静态文件中获取和更改数据。

Apollo is the glue that binds these two tools together. Plus it makes working with React and GraphQL a lot easier by giving us a lot of custom React hooks and features that enable us to both write GraphQL operations and execute them with JavaScript code.

阿波罗是将这两个工具结合在一起的粘合剂。 另外，它为我们提供了许多自定义的React钩子和功能，使我们能够编写GraphQL操作并使用JavaScript代码执行它们，从而使React和GraphQL的使用变得更加容易。

We'll cover these features in-depth throughout the course of this guide.

在本指南的整个过程中，我们将深入介绍这些功能。

Apollo客户端基本设置 (Apollo Client basic setup)

If you are starting a project with a React template like Create React App, you will need to install the following as your base dependencies to get up and running with Apollo Client:

如果您要使用诸如Create React App之类的React模板启动项目，则需要安装以下内容作为基本依赖项，以启动并运行Apollo Client：

// with npm:
npm i @apollo/react-hooks apollo-boost graphql

// with yarn:
yarn add @apollo/react-hooks apollo-boost graphql

@apollo/react-hooks gives us React hooks that make performing our operations and working with Apollo client better

@apollo/react-hooks为我们提供了React挂钩，使我们