React Apollo入门
React Apollo入门
-
React Apollo入门
Page 1
-
IntelliJ IDEA Community社区版集成添加Tomcat插件(Smart Tomcat)
Page 15
-
解决React错误：TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received type undefined
Page 16
-
IDEA启动tomcat，日志中文字符有乱码“淇℃伅”
Page 17
-
自定义React Hooks（超时）：useTimeout
Page 18
-
自定义React Hooks（记录先前状态）：usePrevious
Page 19
-
React 18 createRoot方法：ReactDOM.render is no longer supported in React 18
Page 20
默认笔记本
作者: duoduo
入门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
