发布于 4年前

React Apollo入门

入门Apollo Client最简单的方法是使用Apollo Boost,它会给客户端配置推荐的设置。使用Apollo Boost创建app的内容包括缓存,本地状态管理以及错误处理。

安装

首先安装以下的软件包:

npm install apollo-boost react-apollo graphql-tag graphql --save
  • apollo-boost:这个包包含了搭建Apollo客户端需要的所有东西。
  • react-apollo:集成React的视图层
  • graphql-tag:解析GraphQL 查询必要依赖
  • graphql:用于解析GraphQL 查询

示例准备

客户端:如果没有React app,可以使用create-react-app来创建一个React app。或者使用CodeSandbox来创建一个React沙盒。

GraphQL服务端:可以使用Launchpad来作为GraphQL的演示服务端

创建客户端

创建Apollo客户端,它用于与GraphQL服务器交互。ApolloClient只需要一个参数,GraphQL服务器的endpoint。

在index.js实例化ApolloClient

import ApolloClient from "apollo-boost";

const client = new ApolloClient({
  uri: "https://w5xlvm3vzz.lp.gql.zone/graphql"
});

到此我们就可以使用ApolloClient实例化的客户端来获取数据,在index.js添加如下代码:

import gql from "graphql-tag";

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

查询数据需要导入gql,使用client.query()执行查询。

集成客户端到React

现在把上面的新建的apollo客户端集成到React应用里。react-apollo提供ApolloProvider组件,ApolloProvider类似于React的context provider。它会把apollo客户端放入到React app的上下文里,在组件树的任何地方都是可以获取到apollo客户端。

在index.js,集成ApolloProvider到React app:

import React from "react";
import { render } from "react-dom";

import { ApolloProvider } from "react-apollo";

const App = () => (
  <ApolloProvider client={client}>
    <div>
      <h2>Apollo App demo</h2>
    </div>
  </ApolloProvider>
);

render(<App />, document.getElementById("root"));

请求数据

集成ApolloProvider到React app后,就可以向GraphQL服务器请求数据。react-apollo提供了一个Query React组件。Query组件是使用render prop pattern来向React UI传递GraphQL数据。

示例:

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

Query组件的query属性的值为gql函数,它是graphql查询语句。

Query组件的子节点也是一个函数,它用来决定怎么渲染graphql返回的数据到UI。这个函数有三个参数:loading,error,data。当graphql返回数据后,会传给data参数用来渲染UI。

到此就集成Apollo Client到React app了。

©2020 edoou.com   京ICP备16001874号-3