React Apollo入门

时间：2023-05-12 17:47:12

入门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了。

参考：https://www.apollographql.com/docs/react/essentials/get-started.html#API

标签：

相关文章