GraphQL极简入门教程---2、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组件将为你提取数据。使用这种方法基本需要以下几个步骤：

使用gql解析器函数将查询写为JavaScript常量
使用组件将GraphQL查询作为prop传递
在组件内部通过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…