reactjs - React-Apollo 中 Compose 的替代方案是什么？

Question

我一直在尝试同时使用多个 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}



 

Answer 1

您为两个 HOC 提供了一个 name 选项，因此数据将在这些 prop 名称下可用:

props.getAuthorsQuery.loading

也就是说，HOC 已被弃用——您可能应该使用较新的 hooks API。