带有React for GraphQL的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: Authorization

Header 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 ，   如果为false，则使用map函数迭代数据数组以显示<ul>和<li>元素内的信息。

这只是一个基本示例。 您可以使用常规的if-else语句，并为render方法返回不同的结果。

您可以检查“ 带反应的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