Apollo-Client学习笔记（1）

一、安装使用

开始使用Apollo Client的最简单方法是使用Apollo Boost。Apollo Boost包含我们认为对于构建Apollo应用程序至关重要的软件包，例如内存缓存，本地状态管理和错误处理。它还具有足够的灵活性来处理身份验证等功能。

npm install apollo-boost react-apollo graphql --save

　　apollo-boost:安装Apollo Client所需的所有包

　　react-apollo:集成React视图

　　graphql:解析graphql query

二、创建一个客户端

使用create-react-app创建一个app,

在index.js文件中引入ApolloClient，并且创建client,指定graphql server的地址uri。

import ApolloClient from 'apollo-boost';
const client = new ApolloClient({uri:"https://w5xlvm3vzz.lp.gql.zone/graphql"})

　

现在客户端已经准备好接受数据了。首先我们尝试一下使用普通的javascript获取数据。在获取数据之前，我们先引入gql,gql可以把字符串解析成query document.

client.query({
  query:gql`{
     rates(currency:"USD"){
       currency
     }
   }`
 }).then(result=>console.log(result))

　　注意：在反引号中使用双引号。

可以看到返回了一个以data属性的rates

现在已经可以获取数据了，下面我们将要把数据查询与React集成起来，以便于数据查询可以绑定到UI并且根据获取的数据自动更新UI

三、将客户端连接到React

要将Apollo Client连接到React，您需要使用ApolloProvider（从react-apollo引入）。ApolloProvider与React的上下文提供程序类似。它包装您的React应用程序并将client放在上下文中，这允许您从组件树中的任何位置访问它。

import { ApolloProvider } from "react-apollo";
...
ReactDOM.render(
  <ApolloProvider client={client}>
    <App />
  </ApolloProvider>,document.getElementById('root'));

四、请求数据

使用Query组件请求数据。

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

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>
);

export default ExchangeRates;

　　现在将ExchangeRates包含在App组件中，就可以显示从服务器获取的汇率了。

　　

五、关于Apollo-boost

Apollo Boost包含一些我们认为对Apollo Client开发至关重要的软件包。这包括：

• apollo-client：所有魔法发生的地方
• apollo-cache-inmemory：我们推荐的缓存
• apollo-link-http：用于远程数据获取的Apollo链接
• apollo-link-error：用于错误处理的Apollo链接
• apollo-link-state：用于管理state的Apollo Link

关于Apollo Boost的一个很棒的事情就是你不必自己设置任何一个！如果您想使用这些功能，请指定一些选项，我们将负责其余的工作。

六、ApolloClient配置的参数

uri：字符串表示GraphQL服务器端口的字符串。默认为/graphql

fetchOptions：对象您想要传递给提取的任何选项（凭据，标题等）。这些选项是静态的，因此它们不会在每个请求上更改。request:(操作：操作）=>承诺每个请求都会调用此函数。它需要GraphQL操作并且可以返回一个promise。要动态设置fetchOptions，可以将它们添加到操作的上下文中operation.setContext({ headers })。此处设置的任何选项都将优先于fetchOptions。用于身份验证。onError：（errorObj：{graphQLErrors：GraphQLError []，networkError：Error，response？：ExecutionResult，operation：operation}）=> void我们包含一个默认错误处理程序，用于将错误注销到控制台。如果您希望以不同方式处理错误，请指定此功能。

clientState：{resolvers？：Object，defaults？：Object，typeDefs？：string | 排列 }表示您的配置的对象apollo-link-state。如果您想使用Apollo缓存进行本地状态管理，这非常有用。我们快速入门了解更多信息。

cacheRedirects：对象在请求发生之前将查询重定向到缓存中的另一个条目的函数映射。如果您有一个项目列表并希望在查询单个项目的详细信息页面上使用列表查询中的数据，这将非常有用。更多关于这一点。

credentials：字符串same-origin默认设置为。此选项可用于指示用户代理是否应发送带有请求的cookie。有关更多详细信息，请参阅Request.credentials。

headers：对象标头键/值对与请求一起传递。fetch：GlobalFetch ['fetch']一个fetch因提出请求兼容的API。
cache：ApolloCacheApolloCache要使用的自定义实例。默认值InMemoryCache来自apollo-cache-inmemory。此选项对于使用自定义缓存非常有用apollo-cache-persist。