诱人的 GraphQL & React & Apollo 实战视频教程 #25 组织代码 - 外部查询文件

client/src/queries/queries.js

import gql from 'graphql-tag';

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

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

export { getBooksQuery, getAuthorsQuery }

client/src/components/BookList.js

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

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() {
    console.log(this.props);
    return (
      <div>
       { this.displayBooks() }
      </div>
    );
  }
}

export default graphql(getBooksQuery)(BookList);

client/src/components/AddBook.js

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

class AddBook extends Component {
  displayAuthors = () => {
    const data = this.props.data;
    if (data.loading) {
      return (<option disabled>Loading authors...</option>)
    } else {
      return (
        data.authors.map(author => {
          return (
            <option key={ author.id } value={ author.id }>{ author.name }</option>
          )
        })
      )
    }
  }

  render() {
    return (
      <form>
        <div className="field">
          <label>Book name:</label>
          <input type="text" />
        </div>
        <div className="field">
          <label>Genre:</label>
          <input type="text" />
        </div>
        <div className="field">
          <label>Author:</label>
          <select>
            <option>Select author</option>
            { this.displayAuthors() }
          </select>
        </div>
      </form>
    );
  }
}

export default graphql(getAuthorsQuery)(AddBook);