react-apollos中的graphql查询在控制台中响应错误

Question

我正在编写一个程序，该程序使用户可以在数据库中创建一条记录，以便使用带有React-Apollo的graphql添加新书。

import React, {Component} from 'react';
import { graphql, compose } from 'react-apollo';
import { getAuthorsQuery, getBooksQuery, addBookMutation, addAuthorMutation, getAuthorIdQuery} from '../queries/queries';
import PlusButton from './Buttons/PlusButton';

class AddBook extends Component{
    constructor(props){
        super(props);
        this.state =  {
            name: '',
            genre: '',
            authorId: '',
            authorName: ''
        }
    }
    displayAuthors(){
        var data = this.props.getAuthorsQuery;
        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>)
            })
        }
    }
    getAuthorIdQuery(authorName){
        return this.props.getAuthorIdQuery(authorName);
    }
    submitForm(e){
        e.preventDefault();
        if(this.state.authorId === "new"){
            this.props.addAuthorMutation({
                variables:{
                    authorName: this.props.authorName,
                    age: this.props.age
                }
            })
            var authId = getAuthorIdQuery()
            this.props.addBookMutation({
                variables:{
                    name: this.state.name,
                    genre: this.state.genre,
                    authorId: authId
                },
                refetchQueries: [{query: getBooksQuery}]
            })
        } else {
            this.props.addBookMutation({
                variables:{
                    name: this.state.name,
                    genre: this.state.genre,
                    authorId: this.state.authorId
                },
                refetchQueries: [{query: getBooksQuery}]
        })
    }
}
    render(){
        return (
            <form id="add-book" onSubmit={this.submitForm.bind(this)}>
                <div className="field">
                    <label>Book Name:</label>
                    <input type="text" onChange={(e) => this.setState({name:e.target.value})}/>
                </div>
                <div className="field">
                    <label>Genre:</label>
                    <input type="text" onChange={(e) => this.setState({genre:e.target.value})}/>
                </div>
                {this.state.authorId === "new" ? 
                        <div>
                            <div className="author">
                                <label>Author Name: </label>
                                <input type="text" onChange={(e) => this.setState({authorName:e.target.value})}/>
                            </div>
                            <div className="author">
                                <label>Age: </label>
                                <input type="text" onChange={(e) => this.setState({age:e.target.value})}/>
                            </div>
                        </div>
                        : null}
                <div className="field">
                    <label>Author:</label>
                    <select onChange={(e) => this.setState({authorId:e.target.value})}>
                        <option>Select Author</option>
                        <option value="new">New Author</option>
                        {this.displayAuthors()}
                    </select>

                </div>
                <PlusButton/>
                </form>
        );
    }
}

export default compose(
    graphql(getAuthorsQuery, { name: "getAuthorsQuery" }),
    graphql(getBooksQuery, { name: "getBooksQuey"}),
    graphql(addBookMutation, { name: "addBookMutation" }),
    graphql(addAuthorMutation, { name: "addAuthorMutation" }),
    graphql(getAuthorIdQuery, { name: "getAuthorIdQuery" })
    )(AddBook);

当我尝试使用getAuthorIdQuery（）添加作者时出现此错误

Uncaught TypeError: Object(...) is not a function

我不明白为什么它适用于addBooks（），但不适用于addAuthor部分。有人可以帮我找出问题所在