GraphQL极简入门教程---二、Queries组件编写（Loading Links）

根据HOW TO GRAPHQL官网的例子，作了些对最新版的改动，适合最新框架的学习。

本系列文章注重前端方面的开发，对于node方面的放在下一个系列。在此过程当中有任何问题，都欢迎在评论中提问，会及时反馈

系列目录：

第一章. Frontend开始

第二章. Queries组件编写（Loading Links）

Queries组件编写（Loading Links）

为了照顾更加全面的读者，我写的会尽可能详细，熟练的开发者可进行快速选择性的阅读

准备react组件

咱们首先要实现的第一项功能是加载并显示Link元素列表，从呈现单个连接的组件开始。

在components文件夹中建立Link.js

import React, { Component } from 'react'

class Link extends Component {
  render() {
    return (
      <div>
        <div>
          {this.props.link.description} ({this.props.link.url})
        </div>
      </div>
    )
  }
}

export default Link
复制代码

这是一个简单的从props中展现description和url的组件。 接下来咱们一样在components中建立LinkList.js

import React, { Component } from 'react'
import Link from './Link'

class LinkList extends Component {
  render() {
    const linksToRender = [
      {
        id: '1',
        description: 'Prisma replaces traditional ORMs and makes it easy to build GraphQL servers 😎',
        url: 'https://www.prisma.io',
      },
      {
        id: '2',
        description: 'The best GraphQL client',
        url: 'https://www.apollographql.com/docs/react/',
      },
    ]

    return (
      <div>{linksToRender.map(link => <Link key={link.id} link={link} />)}</div>
    )
  }
}

export default LinkList
复制代码

先用静态数据来试试 在App.js中展现如今的LinkList

import React, { Component } from 'react'
import LinkList from './LinkList'

class App extends Component {
  render() {
    return <LinkList />
  }
}

export default App
复制代码

运行应用，能够看到页面上渲染出了两个元素。

GraphQL查询语句

接下来咱们要从数据库中拿实际的links数据，第一件事就是要编写GraphQL的查询语句，像这样

{
  feed {
    links {
      id
      createdAt
      description
      url
    }
  }
}
复制代码

你能够运行该片断在GraphQL server的playground中验证功能

用Apollo Client查询

这里咱们使用React更具声明性的方法，利用Apollo的render prop APIQuery组件的方式来来管理GraphQL数据。 使用这种方法，在数据提取方面你须要作的就是将GraphQL查询做为prop传递，Query组件将为你提取数据。 使用这种方法基本须要如下几个步骤：

1. 使用gql解析器函数将查询写为JavaScript常量
2. 使用组件将GraphQL查询做为prop传递
3. 在组件内部经过props拿到获取来的数据

让咱们来试试，在LinkList.js中加入query语句在文件上面点的位置

const FEED_QUERY = gql`
  {
    feed {
      links {
        id
        createdAt
        url
        description
      }
    }
  }
`
复制代码

而后升级咱们的LinkList组件

class LinkList extends Component {
  render() {
    return (
      <Query query={FEED_QUERY}>
        {({ loading, error, data }) => {
          if (loading) return <div>Fetching</div>
          if (error) return <div>Error</div>
    
          const linksToRender = data.feed.links
    
          return (
            <div>
              {linksToRender.map(link => <Link key={link.id} link={link} />)}
            </div>
          )
        }}
      </Query>
    )
  }
}
复制代码

咱们在return中编写Query组件，并使用一个linksToRender对象，这是Query组件提供的render prop function

最后咱们在头部引用须要的依赖

import { Query } from 'react-apollo'
import gql from 'graphql-tag'
复制代码

很神奇吧，经过这样简单的配置，咱们就能够完成数据获取工做。 对于Query组件中的几个参数，仍是建议你们去看API文档了解。

最后咱们先运行咱们的server，再yarn start咱们的前端代码，就能够看到页面上渲染出从数据库中拿到的数据了。要注意，该项目必定要两边同时运行。

一切顺利，数据的获取工做也完成了！立刻开始下一步的旅程吧。

本章项目github 分支地址

github.com/zust-hh/sim…