诱人的 GraphQL & React & Apollo 实战视频教程 #30 Book Details Component

client/src/queries/queries.js

import gql from 'graphql-tag';

const getBooksQuery = gql`
  {
    books {
      name
      id
    }
  }
`;

const getAuthorsQuery = gql`
  {
    authors {
      name
      id
    }
  }
`;

const addBookMutation = gql`
  mutation($name: String!, $genre: String!, $authorId: ID!) {
    addBook(name: $name, genre: $genre, authorId: $authorId) {
      name
      id
    }
  }
`;

const getBookQuery = gql`
  query($id: ID) {
    book(id: $id) {
      id
      name
      genre
      author {
        id
        name
        age
        books {
          name
          id
        }
      }
    }
  }
`;

export { getBooksQuery, getAuthorsQuery, addBookMutation, getBookQuery }

client/src/components/BookDetails.js

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

class BookDetails extends Component {
  render() {
    return (
      <div id="book-details">
        <p>Output book details here.</p>
      </div>
    );
  }
}

export default graphql(getBookQuery)(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 {
  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 }>{ book.name }</li>
              )
            })
          }
        </ul>
      )
    }
  }

  render() {
    return (
      <div>
       { this.displayBooks() }
       <BookDetails />
      </div>
    );
  }
}

export default graphql(getBooksQuery)(BookList);