使用React for GraphQL介绍Apollo客户端

使用React for GraphQL介绍Apollo客户端第1张

graphql最近开始流行起来，很可能会取代其余的api。在本教程中，我们将使用 Apollo Client 与 GitHub 的 GraphQL API 进行通信。我们会将 Apollo Client 与 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'));

上面你可以看到我们 uri为 GitHub 定义了，并且还为headers. 您应该使用从 GitHub 生成的自己的令牌。所以不要忘记将其替换为 YOUR_TOKEN.

对于此示例，我们在客户端定义了 API 令牌。但是，您不应公开披露您的 API 令牌。因此，最好将其保存在从客户端抽象出来的服务器上。

请注意，我们已经用我们为prop创建的变量包装了<App/>组件 ApolloProvider并使用了该变量。clientclient

GraphiQL 应用程序

在深入查询之前，我想指出有一个非常方便的工具，称为 GraphiQL，用于测试您的 GraphQL 查询。在继续之前，请确保您已下载它。

打开 GraphiQL 后，您需要设置GraphQL Endpoint 和 HTTP Headers。

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 组件中，以便能够在组件内定义查询，然后将结果作为 props 传递给组件。

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（高阶组件）包装我们的组件，以便定义查询参数，执行查询，然后将结果作为 props 传递给我们的组件。

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)}到组件的渲染方法中。

class App extends Component {
  render() {
    console.log(this.props)
    return (
      <div>
      </div>
    );
  }
}

当您检查浏览器的控制台时，您将看到有两个对象日志。

在每个对象内，您将看到该 data属性。这是通过 graphqlHOC 提供给我们的组件的。

请注意，第一个日志的 loading: true属性 inside data，第二个日志有 loading: false 一个名为的新对象 search，这正是我们想要获取的数据。

显示数据

让我们编写一些jsx来显示获取的数据。

由于 search对象最初并不存在，我们不能直接尝试渲染它。因此，首先我们需要检查我们是否获取了数据以及 search对象是否可以使用。

为此，我们将简单地使用属性loading内提供的信息 data。

如果 loading是， true那么我们只渲染加载文本，否则渲染数据本身。

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 语句并为您的渲染方法返回不同的结果。

您可以检查 Apollo-Client-with-React 存储库，将其克隆到您的计算机上，然后到处玩。

PS 不要忘记将 token变量替换为您自己的 GitHub API 令牌。