react + graphql + apollo-client技术栈简要介绍(基于官方文档v2.5)

最新推荐文章于 2024-04-20 13:50:15 发布

weixin_34253539

最新推荐文章于 2024-04-20 13:50:15 发布

阅读量1.6k

点赞数 1

文章标签： javascript c/c++ ui ViewUI

原文链接：https://juejin.im/post/5cff441ef265da1b6836b32b

版权

本文档诸多例子来源于官方文档，但也在编写过程中添加了我对这套技术栈的一些理解，如果你更喜欢看官方文档，请移步官网/官方文档

为什么要使用apollo？没有redux繁琐的action、reducer、dispatch……，让全局管理store变得简单、直白！

使用redux管理状态，重心是放在如何去拿数据上；而apollo把重心放在需要什么数据上。理解这一点非常重要！

好了，废话不多说，我们立即开始！

准备工作

创建React项目

本篇文章的随堂练习可以使用create-react-app快速创建一个React应用，不熟悉create-react-app的小伙伴可以先行了解。
也可以在codesandbox上在线搭建React项目。

npm i create-react-app -g

create-react-app react-apollo-client-demo --typescript

cd react-apollo-client-demo

npm start
复制代码

搭建graphql服务

服务端可以在github上forkgraphpack项目，然后在codesandbox里面导入该项目即可零配置搭建一个在线的graphql服务。
你也可以在本地搭建自己的graphql服务。

安装需要的包

既然本文讲的是graphql + react + apollo开发React App，所以需要安装以下包来支撑，以前使用的redux、react-redux等包可以丢到一边了。

PS：在apollo 1.0时代，本地状态管理功能（本文档后面作了介绍）还依赖与redux等相关技术。但现在apollo已经升级到2.0时代，已经完全抛弃了redux的依赖。

npm install apollo-boost react-apollo graphql --save
复制代码

apollo-boost：包含设置Apollo Client所需的一切的包。如果你需要按自己的意图定制化项目，可以不装这个包，自行安装其他的包，如apollo-client等。
react-apollo：react的图层集成（用react的方式来使用apollo）
graphql：解析GraphQL查询

创建一个apollo客户端

import ApolloClient from 'apollo-boost'
import config from './config'


const client = new ApolloClient({
    // apollo-server graphql服务端
    // 如果你实在找不到现成的服务端，可以使用apollo官网提供的：https://48p1r2roz4.sse.codesandbox.io或者本教程的服务：https://kdvmr.sse.codesandbox.io/
    uri: config.host
})

复制代码

需要注意一点的是apollo-boost和apollo-client都提供了ApolloClient，但是两者需要的参数有一点差别。简单来说，apollo-boost这个包相当于一个大集合，把我们需要的常用的功能都集成在里面，它包括apollo-client。具体见各自API：

apollo-boost导出的ApolloClient对象（详细API）：集成官方核心功能的一个大集合对象
apollo-client导出的ApolloClient对象（详细API）：默认为App所在的同一主机上的graphql端点，要自定义uri还需引入apollo-link-http包。

编写graphql查询语句

如果对graphQL语法不是很了解，请先移步graphQL基础实践

为了演示graphql查询，我们暂且使用普通的请求看一下：

import { gql } from 'apollo-boost'

// ...

client
  .query({
    query: gql`
      {
        rates(currency: "CNY") {
          currency
        }
      }
    `
  })
  .then(result => console.log(result));
复制代码

除了从apollo-boost导入gql，你还可以从graphql-tag这个包导入：

import gql from 'graphql-tag';

gql`...`
复制代码

gql()的作用是把查询字符串解析成查询文档。

连接Apollo客户端到React

// ...
import React from 'react'
import { ApolloProvider } from 'react-apollo'

const App: React.FC = () => {
  // ...
  
  return (
    <ApolloProvider client={client}>
      <div>App content</div>
    </ApolloProvider>
  )
}

export default App
复制代码

ApolloProvider API有一个必需参数：client。

和redux一样（redux使用<Provider/>包裹React App），react-apollo需要ApolloProvider组件来包裹整个React App，以便将实例化的client放到上下文中，就可以在组件树的任何位置访问到它。另外，还可以使用withApollo来包裹组件，以获取到client实例（还有很多获取实例的方法，后面后了解到），详情请参考withApollo()。

Query与Mutation

在graphql中，query操作代表查询，mutation操作代表增、删和改，他们对应REST API的GET与POST请求。

获取数据（GET）——Query组件

import { Query } from "react-apollo";
import { gql } from "apollo-boost";

const ExchangeRates = () => (
  <Query
    query={gql`
      {
        rates(currency: "USD") {
          currency
          rate
        }
      }
    `}
  >
    {
      ({ loading, error, data }) => {
          if (loading) return <p>Loading...</p>;
          if (error) return <p>Error :(</p>;
    
          return data.rates.map(({ currency, rate }) => (
            <div key={currency}>
              <p>{currency}: {rate}</p>
            </div>
          ));
        }
    }
  </Query>
);
复制代码

恭喜，您刚刚创建了第一个Query组件！?

可以看到，在Query组件内，有一个匿名函数，这个匿名函数有三个参数：loading，error，data。分别代表组件的加载状态、组件的加载错误提示、以及组件加载到的数据。

Query是一个从react-apollo导出的React组件，它使用render prop模式与UI共享GraphQL数据。（即我们可以从组件的props获取到graphql获取到的数据） Query组件还有很多其他props，上面就展示了一个query属性，其他的如：

children(根据查询结果显示要渲染的UI)
variables（用来传递查询参数到gql()）
skip（跳过这个查询，比如登录时，验证失败，我们使用skip跳过这个查询，则登录失败）

更多props详见Query API

更新数据（POST）——Mutation组件

Mutation组件和Query组件一样，使用render prop模式，但props有差别，Mutation API

import gql from 'graphql-tag';
import { Mutation } from "react-apollo";

const ADD_TODO = gql`
  mutation AddTodo($type: String!) {
    addTodo(type: $type) {
      id
      type
    }
  }
`;

const AddTodo = () => {
  let input;

  return (
    <Mutation mutation={ADD_TODO}>
      {
        (addTodo, { data }) => (
          <div>
            <form
              onSubmit={e => {
                e.preventDefault();
                addTodo({ variables: { type: input.value } });
                input.value = "";
              }}
            >
              <input
                ref={node => {
                  input = node;
                }}
              />
              <button type="submit">Add Todo</button>
            </form>
          </div>
        )
      }
    </Mutation>
  );
};
复制代码

我们来梳理一下上面的代码：

首先，创建mutation GraphQL，mutation(突变，对应REST API的POST)需要一个字符串类型的参数：type。它将mutation包装在gql中，并将其传递给Mutation组件的prop。
Mutation组件内需要一个匿名函数作为子函数（也称为render prop函数），同Query组件，但参数有差异。
render prop函数的第一个参数是Mutation组件内部定义的mutate函数。为了提高代码可读性，这里取名为addTodo。也可以直接用“mutate”，通过调用它来告诉Apollo Client，接下来要触发mutation（即触发提交表单的POST请求）。在onSubmit事件里面可以看见addTodo函数被调用了。
render prop函数的第二个参数是一个对象，这个对象有多个属性，包括data（mutation的结果，POST请求的返回值）、loading（加载状态）和error（加载过程中的错误信息），同Query组件。

mutate函数（也就是上面命名的addTodo函数）可选地接受变量，如：

optimisticResponse
refetchQueries和update（这些函数就是后面用来更新缓存的）
ignoreResults：忽略mutation操作返回的结果（即忽略POST请求的返回值）

你也可以将这些值作为props传递给Mutation组件。详细的介绍请移步mutate函数 API

到这里，我们能发出客户端请求，也能得到服务器返回的结果，那接下来就着手怎么处理这些数据，然后渲染到UI上。我们看一下redux在这一步是怎么处理的：

dispatch触发数据请求
reducer根据之前定义的action处理得到的新数据，把数据保存到store中
react-redux的connect连接store与React组件
mapStateToProps/mapDisToProps完成render prop。

以上步骤，全靠一行一行的代码手动实现，我们再来看一下apollo是怎么处理的：

cache.writeQuery()

没错，你没看错，就是这一个API，搞定以上redux需要一大堆代码才能完成的数据更新！writeQuery相当于通过一种方式来告诉Apollo Client： 我们已经成功发出POST请求并得到了返回的结果了，现在把结果给你，你更新一下本地的缓存吧！ 并且如果你的数据写得很规范（呃，其实它叫范式化，不要急，后面有介绍），甚至连这一句话都不用写，当你执行query或mutation后，UI便会自动根据新的数据更新UI！！

更新缓存——mutation后内部自动query

有时，当执行mutation时，GraphQL服务器和Apollo缓存会变得不同步。当执行的更新取决于本地缓存中已有的数据时，会发生这种情况：例如，本地缓存了一张列表，当删除列表中的一项或添加一项新的数据，当我们执行mutation后，graphql服务端和本地缓存不一致，我们都需要一种方法来告诉Apollo客户端更新项目列表的查询，以获取我们mutation后新的项目列表数据；又或者我们仅仅使用mutation提交一张表单，本地并没有缓存这张表单的数据，所以我们并不需要新的查询来更新本地缓存。

下面来看一段代码：

import gql from 'graphql-tag';
import { Mutation } from "react-apollo";

const ADD_TODO = gql`
  mutation AddTodo($type: String!) {
    addTodo(type: $type) {
      id
      type
    }
  }
`;

const GET_TODOS = gql`
  query GetTodos {
    todos
  }
`;

const AddTodo = () => {
  let input;

  return (
    <Mutation
      mutation={ADD_TODO}
      update={(cache, { data: { addTodo } }) => {
        const { todos } = cache.readQuery({ query: GET_TODOS });
        cache.writeQuery({
          query: GET_TODOS,
          data: { todos: todos.concat([addTodo]) },
        });
      }}
    >
      {addTodo => (
        <div>
          <form
            onSubmit={e => {
              e.preventDefault();
              addTodo({ variables: { type: input.value } });
              input.value = "";
            }}
          >
            <input
              ref={node => {
                input = node;
              }}
            />
            <button type="submit">Add Todo</button>
          </form>
        </div>
      )}
    </Mutation>
  );
};
复制代码

通过这段代码可以看见，update()函数可以作为props传递给Mutation组件，但它也可以作为prop传递给mutate函数，即：
// 借用上面的mutate（重命名为addTodo）函数来举例
addTodo({
  variables: { type: input.value },
  update: (cache, data: { addTodo }) => {
    // ...
  }
})
复制代码

update: (cache: DataProxy, mutationResult: FetchResult)：用于在发生突变（mutation）后更新缓存

参数：

cache，这个参数详细讲又可以讲几节课，所以这里只简单介绍一下，详细API
cache通常是InMemoryCache的一个实例，在创建Apollo Client时提供给Apollo Client的构造函数（怎么创建的Apollo Client？请返回创建一个apollo客户端复习一下）
InMemoryCache来自于一个单独的包apollo-cache-inmemory。如果你使用apollo-boost，这个包已经被包含在里面了，无需重复安装。
cache有几个实用函数，例如cache.readQuery和cache.writeQuery，它们允许您使用GraphQL读取和写入缓存。
另外还有其他的方法，例如cache.readFragment，cache.writeFragment和cache.writeData，详细API。
mutationResult，一个对象，对象里面的data属性保存着执行mutation后的结果（POST请求后得到的数据），详细API
如果指定乐观响应，则会更新两次更新函数：一次是乐观结果，另一次是实际结果。
您可以使用您的变异结果来使用cache.writeQuery更新缓存。

对于update函数，当你在其内部调用cache.writeQuery时，update会在Apollo内部调用广播查询（broadcastQueries），广播查询会触发缓存内部和mutation相关的内容自动使用graphql进行查询并更新UI。因此当执行mutation后，我们不必手动去执行相关组件的查询，Apollo Client在内部已经做好了所有工作，这区别于redux在dispatch后所做的一切处理数据的工作。

有时，update函数不需要为所有mutation更新缓存（比如提交了一张表单）。所以，Apollo提供单独的方法——cache.writeQuery()——来触发相关缓存的查询，以更新本地缓存。所以需要注意：仅仅只在update函数内部调用cache.writeQuery()才会触发广播行为。在其他任何地方，cache.writeQuery只会写入缓存，并且所做的更改不会立即广播到视图层。为了避免给代码造成混淆，推荐在写入缓存时使用Apollo Client的实例对象client的方法：client.writeQuery()。

由于我们需要更新显示TODOS列表的查询，因此首先使用cache.readQuery从缓存中读取数据。然后，我们将mutation后得到的新todo与现有todo列表合并起来，并使用cache.writeQuery将查询写回缓存。既然我们已经指定了一个update函数，那么一旦新的todo从服务器返回，我们的用户界面就会用它进行响应性更新。

Apollo还提供一种的方法来及时地修改本地缓存以快速渲染UI并触发相关缓存的查询，待查询返回新的数据后再真正更新本地缓存，详见乐观更新。

基于乐观UI，如果您运行相同的查询两次，则不会看到加载指示符（Apollo Client返回的loading字段）。apollo会检测当前的请求参数是否变化，然后判断是否向服务器发送新的请求。

Apollo范式化缓存 API

import gql from 'graphql-tag';
import { Mutation, Query } from "react-apollo";

const UPDATE_TODO = gql`
  mutation UpdateTodo($id: String!, $type: String!) {
    updateTodo(id: $id, type: $type) {
      id
      type
    }
  }
`;

// 注意：这里通过graphql得到的todos数据是一个包含id和type字段的对象的数组，与 UPDATE_TODO 里面的字段（主要是id）对应
const GET_TODOS = gql`
  query GetTodos {
    todos
  }
`;

const Todos = () => (
  <Query query={GET_TODOS}>
    {({ loading, error, data }) => {
      if (loading) return <p>Loading...</p>;
      if (error) return <p>Error :(</p>;

      return data.todos.map(({ id, type }) => {
        let input;

        return (
          <Mutation mutation={UPDATE_TODO} key={id}>
            {updateTodo => (
              <div>
                <p>{type}</p>
                <form
                  onSubmit={e => {
                    e.preventDefault();
                    updateTodo({ variables: { id, type: input.value } });

                    input.value = "";
                  }}
                >
                  <input
                    ref={node => {
                      input = node;
                    }}
                  />
                  <button type="submit">Update Todo</button>
                </form>
              </div>
            )}
          </Mutation>
        );
      });
    }}
  </Query>
);
复制代码

注意：这一次在mutate函数（这里命名为updateTodo）里并没有调用update函数，在也没有传递update函数给Mutation组件，但是UI会立即更新。这就是范式化缓存的魅力了。

范式化缓存——InMemoryCache在将数据保存到存储之前对数据进行范式化，方法是将结果拆分为单个对象，为每个对象创建唯一标识符，并将这些对象存储在展平的数据结构中（创建的唯一标识符为这些对象的键）。默认情况下，InMemoryCache将尝试使用常见的id和_id的主键作为唯一标识符（如果它们与对象上的__typename字段一起存在）。

如果未指定id和_id，或者未指定__typename，则InMemoryCache将按照查询到对象的层级关系依次回退到根查询为止，例如ROOT_QUERY.allPeople.0将作为这个对象的键被存储到cache根下。（在展平的数据结构中，所有对象都在cache根下）

即使我们不打算在我们的UI中使用mutation返回的结果，我们仍然需要返回更新的ID和属性，以便我们的UI进行自动更新。这里，我们不需要指定update函数，因为TODOS查询将使用缓存中更新的TODO数据自动重建查询结果。

结合上一节介绍到的update函数——并非每次mutation都需要使用update函数——其原因就是依据Apollo Cache的范式化数据结构，在尽量减少手动操作数据的情况下自动更新UI，当前后端都规范化数据后（特别是唯一标识符id的统一, __typename字段的定义），在query或mutation操作后，我们几乎不用手动处理数据，就能实现UI的自动更新。

例如：如果只需要更新缓存里面的单条数据，只需要返回这条数据的ID和要更新的属性即可，这种情况下通常不需要使用update函数。

如果想要自定义唯一标识符，即不用默认的id来生成cache键，可以使用InMemoryCache构造函数的dataIdFromObject函数：

const cache = new InMemoryCache({
  dataIdFromObject: object => object.key || null
});
复制代码

在指定自定义dataIdFromObject时，Apollo Client不会将类型名称添加到缓存键，因此，如果您的ID在所有对象中不唯一，则可能需要在dataIdFromObject中包含__typename。

在谷歌浏览器中安装apollo devtools扩展(需要科学上网)，可以清晰看到这种范式化缓存的存储状态。

中场休息

使用redux管理状态，重心是放在如何去拿数据上；而apollo把重心放在需要什么数据上。理解这一点非常重要！

还记得这句话吗？我们在本教程开篇的时候介绍过。现在理解了吗？现在，我们回过头来梳理一下自己学到的知识点： ``

当学习了怎样去获取数据（query）以及更新数据和修改数据（mutation）后，原来apollo和react结合，原来组件可以这么简单的与数据交互！
当学习了apollo缓存后，我们对apollo数据存储的理解又上升了一个台阶，把所有查询回来的对象一一拆分，通过唯一标识符的形式把一个深层级的对象展平，直观展现在cache的根存储中。
当学习了apollo的范式化缓存后，我们才知道，原来自动更新UI可以如此优雅！我们甚至不需要管理数据，只需按照规范传递数据即可！

本地状态管理详情

上半场我们接触了本地与服务端的远程数据交互，接下来，我们将进入本地的状态管理。

Apollo Client在2.5版本具有内置的本地状态处理功能，允许将本地数据与远程数据一起存储在Apollo缓存中。要访问本地数据，只需使用GraphQL查询即可。

而在2.5版本之前，如果想要使用本地状态管理，必须引入已经废弃的一个包apollo-link-state(API)，这个包在2.5版本已被废弃，因为从2.5版本开始，这个包的功能已经集成到apollo的核心之中，不再额外维护一个单独的包。而在apollo的1.x版本，如果要实现本地状态管理，依然得引入redux。

Apollo Client有两种主要方法可以执行局部状态突变：

第一种方法是通过调用cache.writeData直接写入缓存。在更新缓存那一节，我们已经详细介绍过cache.writeData的用法，以及其余update函数的搭配使用。
第二种方法是创建一个带有GraphQL突变（mutation）的Mutation组件，该组件调用本地客户端解析器（resolvers）。如果mutation依赖于缓存中的现有值，我们建议使用解析器（resolvers，后面两节将介绍，目前只需知道有这么个东西存在，这个和apollo-server端的resolver是同样的用法），例如将一个item添加到一个列表中或切换布尔值。

直接写入缓存

import React from 'react';
import { ApolloConsumer } from 'react-apollo';

import Link from './Link';

const FilterLink = ({ filter, children }) => (
  <ApolloConsumer>
    {client => (
      <Link
        onClick={() => client.writeData({ data: { visibilityFilter: filter } })}
      >
        {children}
      </Link>
    )}
  </ApolloConsumer>
);
复制代码

Apollo在ApolloConsumer组件(API)或Query组件的render prop中注入了Apollo Client实例，所以我们可以直接从render prop中拿到client实例。

直接写入缓存不需要GraphQLmutate或resolvers函数。因此我们在上面的代码中没有看见使用它们，直接在onClick事件函数里面调用client.writeData来写入缓存。

但是只建议将直接写入缓存用于简单写入，例如写入字符串或一次性写入。重要的是要注意直接写入并不是作为GraphQL突变实现的，因此不应将它们包含在复杂的开发模式之中。它也不会验证你写入缓存的数据是否为有效GraphQL数据的结构。如果以上提到的任何一点对您很重要，则应选择使用本地resolvers。

@client 指令

上一节提到过，Query组件的render prop同样包含client实例。所以配合@client指令，我们可以在Query组件中轻松地从cache或resolvers获取本地状态。或许换个方式介绍大家能理解得更透彻：配合@client指令，我们可以在Query组件中轻松地从cache获取本地状态或通过resolvers从cache获取本地状态。

import React from 'react';
import { Query } from 'react-apollo';
import gql from 'graphql-tag';

import Link from './Link';

const GET_VISIBILITY_FILTER = gql`
  {
    visibilityFilter @client
  }
`;

const FilterLink = ({ filter, children }) => (
  <Query query={GET_VISIBILITY_FILTER}>
    {({ data, client }) => (
      <Link
        onClick={() => client.writeData({ data: { visibilityFilter: filter } })}
        active={data.visibilityFilter === filter}
      >
        {children}
      </Link>
    )}
  </Query>
);
复制代码

我们来解读一下代码：@client指令告诉Apollo Client在本地获取数据（cache或resolvers），而不是将其发送到graphql服务器。调用client.writeData后，render prop函数上的查询结果将自动更新。同时所有缓存的写入和读取都是同步的，所以不必担心加载状态（loading）。

本地解析器——resolvers

终于见到了你——resolvers！前面几节都一笔带过了resolvers（解析器），现在，我们呢来详细看看它到底有什么强大的功能。

如果要依赖本地状态实现GraphQL的突变，我们只需要在本地resolvers映射中指定一个函数即可。在Apollo Client的实例化中，解析器（resolvers）映射为一个对象，这个对象中保存着每一个用于本地突变的resolver函数。当在GraphQL的字段上找到@client指令时，Apollo Client会在resolvers对象中寻找与之对应的resolver函数，这个对应关系是通过resolvers的键来关联的。

即：当执行没有加@client指令的查询或突变时，graphql中的字段（对象）是早已预定义在了服务端的，只需在查询和突变时按照graphql服务端定义的字段（对象）编写graphql语句即可；当加上@client指令后，Apollo Client不会向服务端发送请求，反而在自己内部寻找graphql内定义的字段（对象），但本地并不是graphql服务器，自然没有服务端那些已经定义好的字段（对象）可供使用。这时，我们就需要自己定义可以访问这些字段（对象）的方式，这个方式便是在解析器（resolvers）中定义一个解析函数（resolver），以供graphql查询或突变在使用了@client指令时调用，这样就建立了graphql查询或突变与Apollo Client的联系，通过这个函数可以解析有@client指令控制的查询或突变，因此这个函数被命名为解析函数，意指从本地解析函数中寻找graphql字段的值。

但是这个解析函数（resolver）定义在哪里呢？其实这个装着自定义解析函数的对象才叫resolvers（解析器），它在ApolloClient的构造函数中，也就是说我们实例化ApolloClient时，需要传递resolvers给它。

解析器示例：
  fieldName: (obj, args, context, info) => result;
复制代码
obj {object}: 包含父字段上resolver函数返回的结果的对象，或者为DOM树最顶层的查询或突变的ROOT_QUERY对象 args {object}: 包含传递到字段中的所有参数的对象。例如，如果使用updateNetworkStatus（isConnected：true）调用一个mutation，则args对象将为{isConnected：true}。 context {object}: React组件与Apollo Client网络堆栈之间共享的上下文信息的对象。除了可能存在的任何自定义context属性外，本地resolvers始终会收到以下内容：

context.client: Apollo Client的实例
context.cache: Apollo Cache的实例 context.cache.readQuery, .writeQuery, .readFragment, .writeFragment, and .writeData: 一系列用于操作cache的API
context.getCacheKey: 使用__typename和id从cache中获取key。 info {object}: 有关查询执行状态的信息。实际中，你可能永远也不会使用到这个参数。

import { ApolloClient } from 'apollo-client';
import { InMemoryCache } from 'apollo-cache-inmemory';

const client = new ApolloClient({
  cache: new InMemoryCache(),
  resolvers: {
    Mutation: {
      toggleTodo: (_root, variables, { cache, getCacheKey }) => {
        const id = getCacheKey({ __typename: 'TodoItem', id: variables.id })
        const fragment = gql`
          fragment completeTodo on TodoItem {
            completed
          }
        `;
        const todo = cache.readFragment({ fragment, id });
        const data = { ...todo, completed: !todo.completed };
        cache.writeData({ id, data });
        return null;
      },
    },
  },
});
复制代码

代码解析：

为了切换todo的状态，我们首先需要查询缓存以找出todo当前状态的内容。我们通过使用cache.readFragment从缓存中读取片段来实现此目的。此函数采用fragment和id，它对应于item的缓存键（cache key）。我们通过调用context中的getCacheKey并传入项目的__typename和id来获取缓存键。

一旦我们读取了fragment，我们就切换todo的已完成状态并将更新的数据写回缓存。由于我们不打算在UI中使用mutation的返回结果，因此我们返回null，因为默认情况下所有GraphQL类型都可以为空。

下面，我们来看一下怎么调用这个toggleTodo解析函数（触发toggleTodo mutation）：

import React from 'react';
import { Mutation } from 'react-apollo';
import gql from 'graphql-tag';

const TOGGLE_TODO = gql`
  mutation ToggleTodo($id: Int!) {
    toggleTodo(id: $id) @client
  }
`;

const Todo = ({ id, completed, text }) => (
  <Mutation mutation={TOGGLE_TODO} variables={{ id }}>
    // 特别注意，此toggleTodo非解析器里面的toggleTodo，这个toggleTodo是我们之前介绍过的mutate函数，这里被更名为‘toggleTodo’而已，不要混淆了
    {toggleTodo => (
      <li
        onClick={toggleTodo}
        style={{
          textDecoration: completed ? 'line-through' : 'none',
        }}
      >
        {text}
      </li>
    )}
  </Mutation>
);
复制代码

代码解析：

首先，我们创建一个GraphQL mutation，它将我们想要切换的item的id作为唯一的参数。我们通过使用@client指令标记GraphQL的toggleTodo字段来指示这是一个本地mutation。这将告诉Apollo Client调用我们的本地mutation解析器里面的toggleTodo解析函数来解析该字段。然后，我们创建一个Mutation组件，就像我们操作远程mutation一样。最后，将GraphQL变异传递给组件，并在render prop函数的UI中触发它。

查询本地状态

查询本地数据与查询GraphQL服务器非常相似。唯一的区别是本地查询在字段上添加了@client指令，以指示它们应该从Apollo Client缓存或本地解析器函数中解析。

我们来看一个例子：

import React from 'react';
import { Query } from 'react-apollo';
import gql from 'graphql-tag';

import Todo from './Todo';

const GET_TODOS = gql`
  {
    todos @client {
      id
      completed
      text
    }
    visibilityFilter @client
  }
`;

const TodoList = () => (
  <Query query={GET_TODOS}>
    {
      ({ data: { todos, visibilityFilter } }) => (
        <ul>
          {
            getVisibleTodos(todos, visibilityFilter).map(todo => (
              <Todo key={todo.id} {...todo} />
            ))
          }
        </ul>
      )
    }
  </Query>
);
复制代码

代码解析：

创建GraphQL查询并将@client指令添加到graphql的todos和visibilityFilter字段。然后，我们将查询传递给Query组件。@client指令让Query组件知道应该从Apollo Client缓存中提取todos和visibilityFilter，或者使用预定义的本地resolver解析。

由于上面的查询在安装组件后立即运行，如果cache中没有item或者没有定义任何本地resolver，我们该怎么办？我们需要在运行查询之前将初始状态写入缓存，以防止错误输出。

初始化本地状态

通常，我们需要将初始状态写入缓存，以便在触发mutation之前查询数据的所有组件都不会出错。要实现此目的，您可以使用cache.writeData为初始值准备缓存。初始状态的结构应与您计划在APP中查询它的方式相匹配。

import { ApolloClient } from 'apollo-client';
import { InMemoryCache } from 'apollo-cache-inmemory';

const cache = new InMemoryCache();
const client = new ApolloClient({
  cache,
  resolvers: { /* ... */ },
});

cache.writeData({
  data: {
    todos: [],
    visibilityFilter: 'SHOW_ALL',
    networkStatus: {
      __typename: 'NetworkStatus',
      isConnected: false,
    },
  },
});
复制代码

重置本地状态/缓存

import { ApolloClient } from 'apollo-client';
import { InMemoryCache } from 'apollo-cache-inmemory';

const cache = new InMemoryCache();
const client = new ApolloClient({
  cache,
  resolvers: { /* ... */ },
});

const data = {
  todos: [],
  visibilityFilter: 'SHOW_ALL',
  networkStatus: {
    __typename: 'NetworkStatus',
    isConnected: false,
  },
};

cache.writeData({ data });

client.onResetStore(() => cache.writeData({ data }));
复制代码

同时请求本地状态和远程数据

mutation ToggleTodo($id: Int!) {
  toggleTodo(id: $id) @client
  getData(id: $id) {
    id,
    name
  }
}
复制代码

使用@client字段作为变量

在同一个graphql语句中，还可以将从本地查到的状态用于下一个查询，通过@export指令

import { ApolloClient } from 'apollo-client';
import { InMemoryCache } from 'apollo-cache-inmemory';
import { HttpLink } from 'apollo-link-http';
import gql from 'graphql-tag';

const query = gql`
  query currentAuthorPostCount($authorId: Int!) {
    currentAuthorId @client @export(as: "authorId")
    postCount(authorId: $authorId)
  }
`;

const cache = new InMemoryCache();
const client = new ApolloClient({
  link: new HttpLink({ uri: 'http://localhost:4000/graphql' }),
  cache,
  resolvers: {},
});

cache.writeData({
  data: {
    currentAuthorId: 12345,
  },
});

// ... run the query using client.query, the <Query /> component, etc.
复制代码

在上面的示例中，currentAuthorId首先从缓存加载，然后作为authorId变量（由@export（as：“authorId”）指令指定）传递到后续postCount字段中。 @export指令也可用于选择集中的特定字段，如：

@export指令还可以用于选择集中的特定字段

import { ApolloClient } from 'apollo-client';
import { InMemoryCache } from 'apollo-cache-inmemory';
import gql from 'graphql-tag';

const query = gql`
  query currentAuthorPostCount($authorId: Int!) {
    currentAuthorId @client @export(as: "authorId")
    postCount(authorId: $authorId) @client
  }
`;

const cache = new InMemoryCache();
const client = new ApolloClient({
  cache,
  resolvers: {
    Query: {
      postCount(_, { authorId }) {
        return authorId === 12345 ? 100 : 0;
      },
    },
  },
});

cache.writeData({
  data: {
    currentAuthorId: 12345,
  },
});

// ... run the query using client.query, the <Query /> component, etc.
复制代码

动态注入resolver

有时，当我们在APP中使用了代码拆分，如使用react-loadable时，我们并不是很希望所有的resolver都在初始化Apollo客户端的统一写在一起，而是希望单独拆分到各自的模块中，这样在APP编译后，每个模块各自resolver将包含在自己的包中，使用addResolvers 和 setResolvers即可办到（API），例如以下代码：

import Loadable from 'react-loadable';

import Loading from './components/Loading';

export const Stats = Loadable({
  loader: () => import('./components/stats/Stats'),
  loading: Loading,
});
复制代码

import React from 'react';
import { ApolloConsumer, Query } from 'react-apollo';
import gql from 'graphql-tag';

const GET_MESSAGE_COUNT = gql`
  {
    messageCount @client {
      total
    }
  }
`;

const resolvers = {
  Query: {
    messageCount: (_, args, { cache }) => {
      // ... calculate and return the number of messages in
      // the cache ...
      return {
        total: 123,
        __typename: 'MessageCount',
      };
    },
  },
};

const MessageCount = () => {
  return (
    <ApolloConsumer>
      {(client) => {
        client.addResolvers(resolvers);
        return (
          <Query query={GET_MESSAGE_COUNT}>
            {({ loading, data: { messageCount } }) => {
              if (loading) return 'Loading ...';
              return (
                <p>
                  Total number of messages: {messageCount.total}
                </p>
              );
            }}
          </Query>
        );
      }}
    </ApolloConsumer>
  );
};

export default MessageCount;
复制代码

脱离React标签的写法

由于编程习惯的不同，有些人（比如我），并不是很喜欢（或者说成习惯）把逻辑代码和React标签混合写在一起，个人觉得在一个大型的项目中把Query标签、Mutation标签以及其他的各种标签层层嵌套，全部挤在React组件中，真的是一件糟糕的事情。虽然官方也推崇这种写法，他们给出的理由是这样写更方便，更简单！

因人而异吧！

我个人更倾向于把graphql以及apollo的逻辑部分和React组件分离开，我们可以使用react-apollo库提供的graphql方法和compose做到分离。还有其他的辅助方法，请参考React Apollo API

转载于:https://juejin.im/post/5cff441ef265da1b6836b32b

weixin_34253539

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
react + graphql + apollo-client技术栈简要介绍(基于官方文档v2.5)

本文档诸多例子来源于官方文档，但也在编写过程中添加了我对这套技术栈的一些理解，如果你更喜欢看官方文档，请移步官网/官方文档为什么要使用apollo？没有redux繁琐的action、reducer、dispatch……，让全局管理store变得简单、直白！使用redux管理状态，重心是放在如何去拿数据上；而apollo把重心放在需要什么数据上。理解这一点非常重要！好了，废话不多说，我们...
复制链接

扫一扫