Reactjs 合成不是从阿波罗导出的

我正在关注youtube上的graphql教程（大约3小时16分钟），其中一部分使用了“react apollo”中的

compose

。然而，我得到了一个错误，因为新版本的阿波罗没有导出这个

我在网上看到，我需要将“react apollo”中的

import{compose}替换为“recompose”中的
import{compose}
但这样做会产生错误
类型错误：无法读取未定义的属性“加载”
我还读到，我应该将react apollo的导入替换为从“lodash”合成的
导入*
，但当我这样做时，我会得到其他错误，说
×类型错误：lodash\uu WEBPACK\u IMPORTED\u MODULE\u 2\uu（…）不是函数

App.js：

import React from "react";
import ApolloClient from "apollo-boost";
import { ApolloProvider } from "react-apollo";

import BookList from "./components/BookList";
import AddBook from "./components/AddBook";

//apollo client setup
const client = new ApolloClient({
  uri: "http://localhost:4000/graphql"
});

function App() {
  return (
    <ApolloProvider client={client}>
      <div className="main">
        <h1>My Reading List</h1>
        <BookList />
        <AddBook />
      </div>
    </ApolloProvider>
  );
}

export default App;

AddBooks.js：

import React, { Component } from "react";
import { graphql } from "react-apollo";
import { compose } from "recompose";
// import * as compose from "lodash";
import { getAuthorsQuery, addBookMutation } from "../queries/queries";

class AddBook extends Component {
  state = {
    name: "",
    genre: "",
    authorId: ""
  };

  displayAuthors = () => {
    let data = this.props.data;
    if (data.loading) {
      return <option>loading authors...</option>;
    } else {
      return data.authors.map(author => {
        return (
          <option key={author.id} value={author.id}>
            {author.name}
          </option>
        );
      });
    }
  };

  submitForm(e) {
    e.preventDefault();
    console.log(this.state);
  }

  render() {
    return (
      <form 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>
        <div className="field">
          <label>Author: </label>
          <select
            onChange={e => {
              this.setState({ authorId: e.target.value });
            }}
          >
            <option>Select author</option>
            {this.displayAuthors()}
          </select>
        </div>
        <button>+</button>
      </form>
    );
  }
}

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

import React，{Component}来自“React”；
从“react apollo”导入{graphql}；
从“重新组合”导入{compose}；
//从“lodash”导入*作为合成；
从“./querys/querys”导入{getAuthorsQuery，AddBookSpection}；
类AddBook扩展组件{
状态={
姓名：“，
体裁：“，
作者：“
};
displayAuthors=（）=>{
让data=this.props.data；
if（数据加载）{
返回加载作者。。。；
}否则{
返回data.authors.map（author=>{
返回(
{author.name}
);
});
}
};
提交表格（e）{
e、 预防默认值（）；
console.log（this.state）；
}
render（）{
返回(
书名：
{
this.setState（{name:e.target.value}）；
}}
/>
体裁：
{
this.setState（{genre:e.target.value}）；
}}
/>
作者：
{
this.setState（{authord:e.target.value}）；
}}
>
选择作者
{this.displayAuthors（）}
+
);
}
}
导出默认组合(
graphql（getAuthorsQuery，{name:“getAuthorsQuery”}），
graphql（addBookMutation，{name:“addBookMutation”}）
)（地址簿）；

我希望compose从react apollo导入，并接受查询和变异，使它们在AddBook的道具中可用，这样我就可以在displayAuthors（）和submitForm（）函数中使用它们，但我得到的错误是它不是从react apollo导出的，当我尝试在网上找到的建议解决方案时，我会发现上面提到的其他错误。
在您的客户端文件夹中安装lodash

npm install lodash 

并使用它从lodash导入compose（在flowRight中使用大写字母R）

下面是我如何用我的项目解决这个问题的：

安装lodash.flowright

npm安装lodash.flowright

将其导入AddBook.js或要使用的文件中
谱写

从“lodash.flowright”导入合成

compose
已从React Apollo 3中删除（请参见中断）。
现在，要使用compose，请使用lodash的flowRight

安装flowright：

纱线添加lodash.flowright

在代码中替换：

从'react apollo'导入{compose}

借

从'lodash'导入{flowRight as compose}
相同，我尝试按照他的教程“”进行操作，并停留在撰写站点，以下是我如何修复它：
-安装lodash:npm lodash
-进口流动权：

import React, { Component } from 'react';
//import { compose } from "recompose";
import {flowRight as compose} from 'lodash';
import {graphql} from 'react-apollo';
import {getAuthorsQuery,addBookMutation} from '../queries/queries';

这可以通过以下方式解决：

npm安装lodash.flowright
导入*作为“lodash.flowright”的组成部分；

由于compose与flowRight完全相同，阿波罗团队决定通过移除它来减小捆绑包的大小

有关更多信息，请阅读此处的中断更改部分
问题不在于编写。
每当我们组合两个或多个查询时，都不会得到“data”属性
你应该试试

让data=this.props.getAuthorsQuery
至少在这个问题上，您不必使用lodash
简单嵌套graphql函数
export default graphql（addbookstation）（graphql（getAuthorsQuery）（AddBook））

你可以参考这个


这就是我在不使用Compose的情况下使其工作的原因。

我使用useQuery查询作者，然后使用graphql进行变异。简单地避免嵌套查询，这需要使用compose

这只是一种绕过作曲（避免）并让教程继续的方法，时间是非常重要的

import{useQuery}来自“@apollo/react hooks”；
从“React”导入React，{useState}；
从“./querys/querys.js”导入{getAuthorsQuery，AddBookSpection}；
从“react apollo”导入{graphql}；
//从“lodash”导入{flowRight as compose}；
//从“lodash.flowRight”导入{*as compose}；
const AddBook=（道具）=>{
常量[formData，setFormData]=useState({
姓名：“，
体裁：“，
作者：“
});
const authorsData=useQuery（getAuthorsQuery）；
函数displayAuthors（）{
console.log（authorsData）
if（authorsData.loading）{
返回（正在加载作者…）
}
否则{
return（authorsData.data.authors.map）（author=>{
返回（{author.name}）
}))
}
}
函数提交形式（e）{
e、 预防默认值（）；
console.log（formData）；
}
返回(
提交格式（e）}>
书名：
setFormData（{名称：
e、 target.value}）}/>
体裁：
setFormData（{类型：
e、 target.value}）}/>
作者：
setFormData（{authorId:e.target.value}）}>
选择作者
{displayAuthors（）}
+
)}
导出默认图形ql（AddBook）（AddBook）；

我希望这能帮助您完成graphql教程，但如果您正在研究解决组合问题
import {flowRight as compose} from 'lodash';

import React, { Component } from 'react';
//import { compose } from "recompose";
import {flowRight as compose} from 'lodash';
import {graphql} from 'react-apollo';
import {getAuthorsQuery,addBookMutation} from '../queries/queries';

import React, {Component} from 'react';
import {getAuthersQuery , AddBookMutation } from '../quearies/quearies'

import { gql } from 'apollo-boost'            

import { graphql } from 'react-apollo'        
import {flowRight as compose} from 'lodash';   

import {useQuery} from "@apollo/react-hooks";
import React, {useState} from "react";
import {getAuthorsQuery, addBookMutation} from "../queries/queries.js";
import { graphql } from "react-apollo";
// import { flowRight as compose } from "lodash";
// import {* as compose} from "lodash.flowRight";


const AddBook = (props) => {
const [formData, setFormData] = useState({
    name : "",
    genre : "",
    authorId : ""
});

const authorsData = useQuery(getAuthorsQuery);


function displayAuthors(){

    console.log(authorsData)

    if(authorsData.loading){
        return( <option disabled >Loading Authors...</option> )
    }
    else{
        return( authorsData.data.authors.map(author => {
            return( <option key={author.id} value={author.id}>{author.name}</option>)
        }))
    }
}

function 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) => setFormData({name : 
e.target.value})}/>
            </div>

            <div className="field" >  
                <label>Genre:</label>
                <input type="text" onChange={(e) => setFormData({genre : 
e.target.value})}/>
            </div>

            <div className="field" >  
                <label>Author:</label>
                <select onChange={(e) => setFormData({authorId : e.target.value})}>
                    <option>Select Author</option>
                    {displayAuthors()}
                </select>
            </div>

        <button>+</button>
    </form>
)}
export default graphql(addBookMutation)(AddBook);