撰写未从反应阿波罗导出 [英] compose not exported from react-apollo

问题描述

我正在关注 youtube 上的 graphql 教程(https://www.youtube.com/watch?v=ed8SzALpx1Q 在大约 3 小时 16 分钟)，其中一部分使用来自react-apollo"的 compose.但是，我收到一个错误，因为新版本的 react-apollo 没有导出这个.

我在网上读到我需要将 import { compose } from "react-apollo" 替换为 import { compose } from "recompose" 但这样做会产生错误TypeError: Cannot read property 'loading' of undefined 我还读到我应该用 import * as compose from "lodash" 替换来自 react-apollo 的导入，但是当我这样做我得到了其他错误，说 × TypeError: lodash__WEBPACK_IMPORTED_MODULE_2__(...) is not a function

App.js:

从react"导入React；从apollo-boost"导入 ApolloClient；从react-apollo"导入{ ApolloProvider}；从./components/BookList"导入 BookList；从./components/AddBook"导入AddBook；//阿波罗客户端设置const 客户端 = 新 ApolloClient({uri: "http://localhost:4000/graphql"});功能应用(){返回 (<ApolloProvider client={client}><div className="main"><h1>我的阅读清单</h1><书单/><AddBook/>

</ApolloProvider>);}导出默认应用程序；

queries.js:

import { gql } from "apollo-boost";const getBooksQuery = gql`{书籍{名称ID}}`;const getAuthorsQuery = gql`{作者{名称ID}}`;const addBookMutation = gql`变异{addBook(name: "", 流派: "", authorId: "") {名称ID}}`;导出 { getAuthorsQuery, getBooksQuery, addBookMutation };

AddBooks.js:

import React, { Component } from "react";从react-apollo"导入{graphql}；从重构"导入 { compose };//import * as compose from "lodash";import { getAuthorsQuery, addBookMutation } from "../queries/queries";类 AddBook 扩展组件 {状态 = {名称: ""，类型: ""，作者 ID:"};displayAuthors = () =>{让数据 = this.props.data;如果(数据加载){返回<option>加载作者...</option>;} 别的 {返回 data.authors.map(author => {返回 (<option key={author.id} value={author.id}>{作者姓名}</选项>);});}};提交表格(e){e.preventDefault();控制台日志(这个状态)；}使成为() {返回 (<form onSubmit={this.submitForm.bind(this)}><div className="字段"><label>书名:</label><输入类型=文本"onChange={e =>{this.setState({ name: e.target.value });}}/>

<div className="字段"><label>流派:</label><输入类型=文本"onChange={e =>{this.setState({ 类型: e.target.value });}}/>

<div className="字段"><label>作者:</label><选择onChange={e =>{this.setState({ authorId: e.target.value });}}><option>选择作者</option>{this.displayAuthors()}</选择>

<按钮>+</按钮></表单>);}}导出默认撰写(graphql(getAuthorsQuery, { name: "getAuthorsQuery" }),graphql(addBookMutation, { name: "addBookMutation" }))(添加书籍);

我希望从 react-apollo 导入 compose 并进行查询和更改，并使它们在 AddBook 的 props 内可用，因此我可以在 displayAuthors() 和 submitForm() 函数中使用它们，但我得到了错误，它不是从 react-apollo 导出的，当我尝试在网上找到的建议解决方案时，我遇到了上面提到的其他错误.

解决方案

compose 已从 React Apollo 3.0.0 中删除.如果您想使用相同的 HOC 模式，请随意使用 lodash 的 flowRight 的相同副本.

在你的客户端文件夹中安装 lodash

npm 安装 lodash

并使用它从 lodash 导入 compose(在 flowRight 中使用大写的 R)

import {flowRight as compose} from 'lodash';

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.

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:

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

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.

解决方案

compose was removed from React Apollo 3.0.0. If you want to use the same HOC pattern, feel free to use the same copy of lodash's flowRight.

Install lodash in your client folder

npm install lodash 

and use this to import compose from lodash (use a capital R in flowRight)

import {flowRight as compose} from 'lodash';

Reference for the braking changes

这篇关于撰写未从反应阿波罗导出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！