不从react-apollo导出的撰写 [英] compose not exported from react-apollo
问题描述
我正在关注youtube上的graphql教程( https://www.youtube.com/观看?v = ed8SzALpx1Q 大约在3小时16分左右),其中一部分使用"react-apollo"中的 compose
.但是,我收到了错误消息,因为新版本的react-apollo不会导出此消息.
I'm following a graphql tutorial on youtube (https://www.youtube.com/watch?v=ed8SzALpx1Q at about 3hr 16min) and part of it uses compose
from "react-apollo". However, I'm getting an error because the new version of react-apollo does not export this.
我在网上阅读到我需要将"react-apollo"中的 import {compose}
替换为"recompose"中的 import {compose}
,但是这样做会产生错误 TypeError:无法读取未定义的属性'loading'
,我还读到我应该用 import *替换来自react-apollo的import,作为"lodash"的组成
,但是当我这样做是因为我收到其他错误,说×TypeError:lodash__WEBPACK_IMPORTED_MODULE_2 __(...)不是函数
I read online that I need to replace import { compose } from "react-apollo"
with import { compose } from "recompose"
but doing that produces the error TypeError: Cannot read property 'loading' of undefined
I've also read that I should replace the import from react-apollo with import * as compose from "lodash"
but when I do this I get other errors, saying that × TypeError: lodash__WEBPACK_IMPORTED_MODULE_2__(...) is not a function
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;
queries.js:
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:
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的props中可用,因此我可以在displayAuthors()和SubmitForm()函数中使用它们,但我却得到了它不是从react-apollo导出的错误,当我尝试建议的解决方案时,我在网上发现了上面提到的其他错误.
I expected compose to be imported from react-apollo and to take the query and mutation and make them available inside of AddBook's props, so I can use them in the displayAuthors() and submitForm() funtions, but instead I get the error that it is not exported from react-apollo, and when I try the suggested solutions I found online I get the other errors mentioned above.
推荐答案
在客户文件夹中安装lodash
Install lodash in your client folder
npm install lodash
并使用它从lodash导入compose(在flowRight中使用大写字母R)
and use this to import compose from lodash (use a capital R in flowRight)
import {flowRight as compose} from 'lodash';
这篇关于不从react-apollo导出的撰写的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!