reactjs - 撰写未从 react-apollo 导出
问题描述
我正在关注 youtube 上的 graphql 教程(https://www.youtube.com/watch?v=ed8SzALpx1Q,大约 3 小时 16 分钟),其中一部分使用compose
了“react-apollo”。但是,我收到一个错误,因为新版本的 react-apollo 没有导出它。
我在网上读到我需要替换但import { compose } from "react-apollo"
这样import { compose } from "recompose"
做会产生错误TypeError: Cannot read property 'loading' of undefined
import * as compose from "lodash"
× TypeError: lodash__WEBPACK_IMPORTED_MODULE_2__(...) is not a function
应用程序.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;
查询.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);
我希望从 react-apollo 导入 compose 并获取查询和突变并使它们在 AddBook 的道具中可用,因此我可以在 displayAuthors() 和 submitForm() 函数中使用它们,但是我得到了错误不是从 react-apollo 导出的,当我尝试在网上找到的建议解决方案时,我得到了上面提到的其他错误。
解决方案
compose
已从 React Apollo 3.0.0 中删除。如果您想使用相同的 HOC 模式,请随意使用 lodash 的flowRight
.
在您的客户端文件夹中安装 lodash
npm install lodash
并使用它从 lodash 导入 compose(在 flowRight 中使用大写 R)
import {flowRight as compose} from 'lodash';
制动变化参考
推荐阅读
- javascript - 如何从我的 express 应用程序获取数据到我的前端组件(在 React 中)?
- vb.net - 示例数据表绑定到 gridview 在 vs2019-2017 中不起作用
- javascript - 如何正确清除超时
- css - “Gotham Bold”字体系列在 Safari 浏览器中不起作用
- amazon-web-services - AWS API Gateway 集成请求 Http 标头未传递给 lambda
- javascript - 无法使用 Patches.get 值来编写 spark AR 脚本
- android - 使用 Tensorflow 在 Android 上实现离线连续语音识别器的最有效方法是什么?
- java - 在扫描仪行中直接添加用户输入的数字而不是下面的行?
- c# - 每次我使用多个表时序列化类型对象时检测到循环引用
- c# - Autofac.Core.Registration.ComponentNotRegisteredException, FAILED: 处理后台作业时发生异常