react apollo
GraphQL最近变得很流行，并且很可能会取代Rest API。 在本教程中，我们将使用Apollo Client与GitHub的GraphQL API进行通信。 我们将把Apollo客户端与ReactJS集成在一起，但是您也可以将其与其他几个客户端平台一起使用。
本教程没有介绍如何启动React项目，但是您可以使用create-react-app来开始。
准备好React应用程序后，下一步就是安装所需的模块。
安装模块
以下行将安装所有必需的模块。
npm install apollo-client-preset react-apollo graphql-tag graphql --save现在，我们可以为我们的组件提供一个客户端。
向组件提供客户
您可以在React组件层次结构中的任何地方提供客户端。 但是，向客户提供包装整个应用程序的组件始终是一个好习惯。
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { ApolloProvider } from 'react-apollo';
import { ApolloClient } from 'apollo-client';
import { HttpLink } from 'apollo-link-http';
import { InMemoryCache } from 'apollo-cache-inmemory';
const token = "YOUR_TOKEN";
const httpLink = {
uri: 'https://api.github.com/graphql',
headers: {
authorization: `Bearer ${token}`
}
};
const client = new ApolloClient({
link: new HttpLink(httpLink),
cache: new InMemoryCache()
});
ReactDOM.render(<ApolloProvider client={client}><App/></ApolloProvider>, document.getElementById('root')); 在上方，您可以看到我们为GitHub定义了uri ，并且还为headers使用了特定的令牌。 您应该使用从GitHub生成的自己的令牌。 因此，不要忘记用YOUR_TOKEN替换它。
在此示例中，我们在客户端定义了API令牌。 但是，您不应该公开公开您的API令牌。 因此，最好将其保存在从客户端抽象的服务器上。
注意，我们已经用ApolloProvider包装了<App/>组件，并使用了为client道具创建的client client变量。
GraphiQL应用
在深入查询之前，我想指出，有一个非常方便的工具GraphiQL用于测试您的GraphQL查询。 在继续之前，请确保已下载 。
打开GraphiQL后，您需要设置GraphQL端点和HTTP标头 。
GraphQL Endpoint: https://api.github.com/graphql
Header Name: AuthorizationHeader Value: Bearer YOUR_TOKEN当然，您需要用自己的令牌替换YOUR_TOKEN 。 定义Header Value时，不要忘记将Bearer包括在令牌的前面。
如果您不想下载应用程序，则还可以使用适用于GitHub的在线GraphQL API Explorer 。
GraphQL查询
与具有多个端点的REST API不同，GraphQL API仅具有一个端点，并且您只能获取查询定义的内容。
GitHub的GraphQL API文档为您提供了更多见解。
另外，GraphiQL应用程序的最好之处在于，它使您可以直接在应用程序内部访问文档以进行查询。 您可以在右侧看到名为Docs的边栏。
让我们从最简单的查询开始：
query{
viewer{
login
}
}该查询返回您查看器的登录信息。 在这种情况下，查看者就是您，因为您使用了自己的API令牌。
在本教程中，我将不提供有关查询的详细信息。 您始终可以参考文档，并尝试在GraphQL工具上查询以查看是否获取了正确的数据。
在本教程的其余部分中，使用以下查询。
query($name: String!){
search(query: $name, last: 10, type: REPOSITORY) {
edges {
node {
... on Repository {
id
name
description
url
}
}
}
}
}该查询搜索与特定输入字符串匹配的最后10个存储库，我们将在应用程序中定义它们。
它为每个结果返回id ， name ， description和url 。
在React组件中使用GraphQL查询
我们需要将下面的两个模块导入到React组件中，以便能够在组件内定义查询，然后将结果作为prop传递给组件。
import gql from 'graphql-tag';
import { graphql } from 'react-apollo'; 在这里，我们将查询分配给一个常量变量，但是还没有定义name参数。
const repoQuery = gql`
query($name: String!){
search(query: $name, last: 10, type: REPOSITORY) {
edges {
node {
... on Repository {
id
name
description
url
}
}
}
}
}
`现在，我们将我们的组件与graphql HOC（高阶组件）一起包装，以定义查询参数，执行查询，然后将结果作为道具传递给我们的组件。
const AppWithData = graphql(
repoQuery,
{
options: {
variables: {
name: "tuts"
}
}
}
)(App)以下是我们组件的最终版本。
import React, { Component } from 'react';
import gql from 'graphql-tag';
import { graphql } from 'react-apollo';
class App extends Component {
render() {
return (
<div>
</div>
);
}
}
const repoQuery = gql`
query($name: String!){
search(query: $name, last: 10, type: REPOSITORY) {
edges {
node {
... on Repository {
id
name
description
url
}
}
}
}
}
`
const AppWithData = graphql(
repoQuery,
{
options: {
variables: {
name: "tuts"
}
}
}
)(App)
export default AppWithData; 请注意，我们不导出实际的App组件，而是导出包装的组件AppWithData 。
在控制台中检查数据
让我们继续并将{console.log(this.props)}到组件的render方法。
class App extends Component {
render() {
console.log(this.props)
return (
<div>
</div>
);
}
}当您检查浏览器的控制台时，您将看到有两个对象日志。
在每个对象内部，您将看到data属性。 这是通过graphql HOC提供给我们的组件的。
请注意，第一个日志在data具有loading: true属性，第二个日志具有loading: false和一个名为search的新对象，这正是我们想要获取的数据。
显示数据
让我们写一些JSX来显示获取的数据。
由于search对象最初并不存在，因此我们无法直接尝试呈现它。 因此，首先，我们需要检查是否已获取数据以及search对象已准备好使用。
为此，我们将仅使用data属性内部提供的loading信息。
如果loading是true那么我们只渲染Loading文本，否则渲染数据本身。
class App extends Component {
render() {
return (
<div>
{this.props.data.loading === true ? "Loading" : this.props.data.search.edges.map(data =>
<ul key={data.node.id}>
<li style={{fontWeight: 'bold'}}><a href={data.node.url}>{data.node.name}</a></li>
<li>{data.node.description}</li>
</ul>
)}
</div>
);
}
} 我将?:三元运算符用于基本的内联条件表达式。 如果loading为true则显示Loading ， 如果为假，则使用map函数迭代数据数组以显示<ul>和<li>元素内的信息。
这只是一个基本示例。 您可以使用常规的if-else语句并为render方法返回不同的结果。
您可以检查“ 带React的Apollo客户端”存储库，将其克隆到您的计算机上，然后播放。
PS不要忘了用您自己的GitHub API令牌替换token变量。
结论
我们介绍了如何开始使用Apollo Client for React。 我们安装了必需的模块，设置了客户端，然后将其提供给组件层次结构顶部的组件。 我们学习了如何在实际应用中实现GraphQL查询之前对其进行快速测试。 最后，我们将查询集成到React组件中并显示获取的数据。
翻译自: https://code.tutsplus.com/tutorials/introduction-to-apollo-client-with-react-for-graphql--cms-24504
react apollo