诱人的 GraphQL & React & Apollo 实战视频教程 #31 发送请求显示 Book Details

https://www.apollographql.com/docs/react/api/react-apollo.html#graphql-config-options

client/src/components/BookDetails.js

import React, { Component } from 'react';
import { graphql } from 'react-apollo';
import { getBookQuery } from '../queries/queries';

class BookDetails extends Component {
  displayBookDetails = () => {
    const { book } = this.props.data;
    if (book) {
      return (
        <div>
          <h2>{ book.name }</h2>
          <p>{ book.genre }</p>
          <p>{ book.author.name }</p>
          <p>All books by this author:</p>
          <ul className="other-books">
            { book.author.books.map(item => {
              return <li key={ item.id }>{ item.name }</li>
            })}
          </ul>
        </div>
      )
    } else {
      return (
        <div>No book selected...</div>
      )
    }
  }

  render() {
    return (
      <div id="book-details">
        { this.displayBookDetails() }
      </div>
    );
  }
}

export default graphql(getBookQuery, {
  options: (props) => {
    return {
      variables: {
        id: props.bookId
      }
    }
  }
})(BookDetails);

client/src/components/BookList.js

import React, { Component } from 'react';
import { graphql } from 'react-apollo';
import { getBooksQuery } from '../queries/queries';
import BookDetails from './BookDetails';

class BookList extends Component {
  state = {
    selected: null
  }

  displayBooks = () => {
    const data = this.props.data;
    if (data.loading) {
      return (<div>Loading books...</div>)
    } else {
      return (
        <ul id="book-list">
          {
            data.books.map(book => {
              return (
                <li key={ book.id } onClick={ (e) => this.setState({ selected: book.id }) }>{ book.name }</li>
              )
            })
          }
        </ul>
      )
    }
  }

  render() {
    return (
      <div>
       { this.displayBooks() }
       <BookDetails bookId={ this.state.selected } />
      </div>
    );
  }
}

export default graphql(getBooksQuery)(BookList);