What is the alternative for Compose in react-Apollo? - reactjs

Question

I have been trying to use multiple graphql() enhancers at once, but compose seems not to be working. I have tried a load of different imports from different libraries, still nothing. Does any know any fix? The data is not being passed from graphl() to my component props, so I'm getting an error that reads Cannot destructure property 'loading' of 'data' as it is undefined.
Here's my component:
import React,{useState} from 'react'
// import {compose} from 'redux'
import { flowRight as compose } from 'lodash'
import { graphql} from 'react-apollo'
import {getAuthorsQuery, addBookMutation} from './queries/query'
const AddBook = (props) => {
const [formData, setFormData] = useState({
name:'',
genre:'',
authorId:''
})
const {name, genre, authorId} = formData
const onChange = e => setFormData({ ...formData, [e.target.name]: e.target.value})
const displayAuthors = () => {
let data = props.data
const {loading} = data
if(loading){
return (<option>Loading Authors</option>)
} else{
return data.authors.map(author => {
return (<option key={author.id} value={author.id}>{author.name}</option>)
})
}
}
const submitForm = e => {
e.preventDefault();
console.log(formData);
}
return (
<form id="add-book" onSubmit={e => submitForm(e)}>
<div className="field">
<label>Book name:</label>
<input
type="text"
onChange={e => onChange(e)}
name="name"
value={name}
/>
</div>
<div className="field">
<label>Genre:</label>
<input
name="genre"
value={genre}
type="text"
onChange={e => onChange(e)}
/>
</div>
<div className="field">
<label>Author:</label>
<select
name="authorId"
value={authorId}
onChange={e => onChange(e)}
>
<option>Select Author</option>
{displayAuthors()}
</select>
</div>
<button>+</button>
</form>
)
}
// export default graphql(getAuthorsQuery)(AddBook)
export default compose(
graphql(getAuthorsQuery, {name: "getAuthorsQuery"}),
graphql(addBookMutation, {name:"addBookMutation"})
)(AddBook)
And my query:
import { gql } from 'apollo-boost'
const getBooksQuery = gql`
{
books{
name,
id
}
}
`
const getAuthorsQuery = gql`
{
authors{
name,
id
}
}
`
const addBookMutation = gql`
mutation{
addBook(name:"", genre:"", authorId:""){
name,
id
}
}
`
export {getAuthorsQuery, getBooksQuery, addBookMutation}

Answer 1

You're providing a name option for both your HOCs, so the data will be available under those prop names:
props.getAuthorsQuery.loading
That said, the HOCs are deprecated -- you should probably be using the newer hooks API.

Answer 2

You can make use of useQuery hook from apollo and execute the queries like
import { useQuery } from '#apollo/react-hooks';
import React,{useState} from 'react'
// import {compose} from 'redux'
import { flowRight as compose } from 'lodash'
import {getAuthorsQuery, addBookMutation} from './queries/query'
const AddBook = (props) => {
const [formData, setFormData] = useState({
name:'',
genre:'',
authorId:''
})
const authors = useQuery(getAuthorsQuery):
const bookMutation = useQuery(addBookMutation);
... rest of code here
}
export default AddBook;

Answer 3

I was dealing with the same issue. I got useQuery and useMutation methods to work together and did not have to use compose. I am still new to gql so if you spot any bad practice or a tip, I would love to hear:
const authorsData = useQuery(authorsQuery)
//addBook takes args and send data to db when triggered in submitHandler
const [addBook] = useMutation(addBookMutation);
const submitHandler = (e) => {
e.preventDefault();
console.log(name, genre, author)
addBook({
variables: {
name: name,
genre: genre,
authorId: author
},
refetchQueries: [{ query: bookList }]
})
}