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

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

版权声明:著作权归作者所有。

相关推荐

IndexDB快速入门

IndexDB是适用于浏览器的文档数据库,它有以下特点:兼容所有现代的浏览器支持事务以及版本控制支持无限数量的数据。很多浏览器会限定localStorage或者sessionStorage的存储空间为2M到10MIndexDB是异步的API,它不会阻塞浏览器UI的渲染下面介绍下它的使用。安装依赖包idb需要把idb的js库添加到依赖。有几种方式添加idb到依赖。yarnyarn add&

React Router 4 表单提交后重定向示例

表单设置fireRedirect为发起从定向的标记,当表单提交后,更新它的值为fireRedirect=true。当fireRedirect为true时,重定向到原来的页面。import React, { Component } from 'react' import { Redirect } from 'react-router' export default class MyForm

在React JSX内部执行循环

这里实现一个表格组件来演示如何在React的JSX内部执行循环。案例假设有一个表格组件,和一个行组件<ObjectRow />,现在需要在表格组件里循环生成行组件<ObjectRow />。是不能直接在jsx里使用for循环,这里介绍两种方法:map函数和立即执行函数。方法一:使用map函数render: function ()&nb

使用Webpack、TypeScript 和React搭建应用

这里简单介绍基于webpack + typescript + react搭建一个应用。初始化项目创建一个空文件夹demo,使用npm在空文件夹初始化项目。npm init npm install --save-dev webpack npm install --save-dev types

React 16.2:Fragments语法的使用

React 16.2最大的变化是新增了fragments特性,fragments语法。示例:返回一首诗的片段敬请阅读 <h2>面朝大海,春暖花开</h2> <p>从明天起,做一个幸福的人</p> <p>喂马、劈柴,周游世界</p> <p>...</> React 16之前的版本在Re

SpringBoot入门示例

创建Maven POM文件在pom.xml添加内容如下:<?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="ht