estoy haciendo una aplicacion y a traves de un boton se dispara un evento onClick que llama a la funcion loadMoreBooks
-> es en esta funcion en donde se llama al servicio el servicio es una querie que tengo en el archivo queries.js en donde esta el servicio en donde se pasan los argumentos pero de alguna forma recibo un error loadMoreBooks no es una funcion
.
En el componente BookHome:
class BookHome extends React.Component {
constructor(props) {
super(props);
this.state = {
books: []
}
}
static getDerivedStateFromProps(props, state) {
const { bookList: {bookList} } = props;
if(bookList) {
return {
books: bookList
}
} else {
return null;
}
}
loadMoreBooks = async() => {
const { loadMoreBooks } = this.props;
const { books } = this.state;
let lastBookId = books[books.length - 1].id;
const variables = {
bookId: lastBookId ? lastBookId : ''
}
try {
const response = await loadMoreBooks({variables});
} catch(err) {
console.log(err.message);
}
}
render() {
const { books } = this.state;
return(
<div className="books-home-container">
<div className="books-header-home"></div>
<SearchBar />
<Books books={books}/>
<LoadMoreButton loadMoreBooks={e => this.loadMoreBooks()}/>
</div>
);
}
}
export default compose(
graphql(queries.bookList, { name: 'bookList' }),
graphql(queries.loadMoreBooks, { name: 'loadMoreBooks' })
)(BookHome);
El archivo querie es el siguiente: import gql from 'graphql-tag';
const queries = {
bookList: gql`
query bookList {
bookList {
id
coverImage
title
description
author
rating
}
}
`,
loadMoreBooks: gql`
query loadMoreBooks($bookId: String!) {
loadMoreBooks(bookId: $bookId) {
id
coverImage
author
title
}
}
`,
}
export default queries;