我一直在尝试同时使用多个 graphql() 增强器,但 compose 似乎不起作用。我尝试了从不同库加载不同的导入,但仍然一无所获。有谁知道有什么解决办法吗?数据没有从 graphl() 传递到我的组件 props,因此我收到一条错误,内容为 Cannot destruct property 'loading' of 'data' as it is undefined.
这是我的组件:
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)
我的查询:
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}
最佳答案
您为两个 HOC 提供了一个 name
选项,因此数据将在这些 prop 名称下可用:
props.getAuthorsQuery.loading
也就是说,HOC 已被弃用——您可能应该使用较新的 hooks API。
关于reactjs - React-Apollo 中 Compose 的替代方案是什么?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61350949/