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…