apollo+react实战项目 stepbystep（二 ）

使用组件加载一组Link链接。

（1）创建一个Link组件

Link.js

import React from 'react';

class Link extends React.Component{

  render(){
    return(
      <div>
        <div>
          {this.props.link.description}({this.props.link.url})
        </div>
      </div>
    );
  }
}

　　

（2）创建一个LinkList用于显示一组link

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

class LinkList extends Component {
  render() {
    const linksToRender = [
      {
        id: '1',
        description: 'Prisma turns your database into a GraphQL API 😎 😎',
        url: 'https://www.prismagraphql.com',
      },
      {
        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

　　这里我们首先模拟一组数据代表links,后面我们将从服务器端来取数据。

（3）在App中引入LinkList并展示出来

App.js

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

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

export default App

　　运行app我们将要看到我们刚刚模拟的两个link数据。

（4）从服务器端获取数据

首先在playgground中输入数据graphql语句，保证查询有效，查询语句如下：

{
  feed {
    links {
      id
      createdAt
      description
      url
    }
  }
}

　　在react中我们使用《Query》组件来帮我们与服务器通讯获取数据，并通过render props的方法将结果传递给需要该数据的组件。一般步骤：

a、使用gql解析查询语句，

b、将解析后的查询语句传递给《Qurey》组件的query props

c、然后通过render props function将获取的查询结果传递个Link.

修改后的LInkList.js

import React from 'react';
import {Query} from 'react-apollo';
import gql from 'graphql-tag';
import Link from './Link'

export default class LinkList extends React.Component{

  render(){
    const FEED_QUERY=gql`
      {
        feed{
          links{
            id
            description
            url
            createdAt
          }
        }
      }
    `

    return(
      <Query query={FEED_QUERY}>
        {
          ({ loading, error, data })=>{
            if(loading) return <div>loading</div>
            if(error) return <div>Error</div>
            const links = data.feed.links
            return(
              <div>
                {links.map(link=><Link key={link.id} link={link}/>)}
              </div>
            )
          }
        }
      </Query>
    );
  }
}