撰写未从react apollo导出

Question

我正在关注youtube上的graphql教程(https://www.youtube.com/watch?v=ed8SzALpx1Q大约3小时16分钟），部分使用“react apollo”中的“compose”。然而，我得到了一个错误，因为新版的react apollo没有导出这个。

我在网上读到，我需要将来自“react apollo”的导入{compose}替换为来自“recompose”的导入{compose}，但这样做会产生错误类型错误：无法读取未定义的属性“loading”，我还读到我应该将来自react apollo的导入替换为来自“lodash”的导入{code错误，表示<代码>×类型错误：lodash\uu WEBPACK\u IMPORTED\u MODULE\u 2\uuu（…）不是函数

pp.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;

queries.js：

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 };

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);

我希望compose是从react apollo导入的，并接受查询和变异，使它们在AddBook的道具中可用，因此我可以在displayAuthors（）和submitForm（）函数中使用它们，但我得到的错误是它不是从react apollo导出的，当我尝试在线找到的建议解决方案时，我得到了上面提到的其他错误。

Answer 1

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

>

npm安装lodash。flowright流程

将其导入AddBook。js或要使用compose的文件中

从“lodash”导入撰写。flowright'

Answer 2

合成已从React Apollo 3中删除（请参见突破性更改）。现在，要使用compose，请使用lodash的flowRight。

安装flow right：

纱线添加lodash。右流

在代码中替换：

从“react apollo”导入{compose}

通过

<代码>从“lodash”导入{flowRight as compose}

Answer 3

compose已从React Apollo 3.0.0中删除。如果您想使用相同的HOC模式，请随时使用相同的洛达什的flow right副本。

在您的客户端文件夹中安装Lodash

npm install lodash 

并使用此选项从lodash导入compose（在flowRight中使用大写R）

import {flowRight as compose} from 'lodash';

制动变化参考