撰写未从 react-apollo 导出

Question

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

我在网上读到我需要用import { compose } from "recompose" 替换import { compose } from "react-apollo"，但这样做会产生错误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：

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

哇，我也在网络忍者 youtube 教程中做同样的项目，并得到了同样的错误，实际上 react-oppollo 的版本随着时间的推移而改变

Answer 2

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

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

npm install lodash 

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

import {flowRight as compose} from 'lodash';

braking changes的参考

Answer 3

这就是我不使用 Compose 的方式。

我使用 useQuery 来查询作者，然后使用 graphql 来变异。只需避免嵌套查询，这需要使用 compose。

这只是一种绕过 Compose（避免）并让教程继续进行的方法，时间至关重要

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

我希望这能帮助你完成你的 graphql 教程，但是如果你正在寻找解决 compose 问题？好吧，我也在为此苦苦挣扎。

Answer 4

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

Answer 5

至少对于这个问题，你不必使用 lodash

简单嵌套graphql函数

export default graphql(addBookMutation)(graphql(getAuthorsQuery)(AddBook))

你可以参考一下

Apollo concepts

Answer 6

问题不在于撰写。 每当我们编写 2 个或更多查询时，我们都不会获得“数据”属性 你应该试试

让数据 = this.props.getAuthorsQuery;

Answer 7

这可以解决；

npm install lodash.flowright
import * as compose from 'lodash.flowright';

因为 compose 在字面上与 flowRight 相同，所以 apollo 团队决定通过删除它来减小包大小。

有关更多信息，请阅读此处的重大更改部分https://github.com/apollographql/react-apollo/blob/e9190fac891dd7af3a1690a5d2a1305953fd5a6f/Changelog.md#breaking-changes

Answer 8

同样，我尝试按照他的教程“https://www.youtube.com/watch?v=rHw0_A4SJxo&list=PL4cUxeGkcC9iK6Qhn-QLcXCXPQUov1U7f&index=31”，并停留在撰写站点，这是我修复它的方法： - 安装 lodash：npm lodash - 导入 flowRight ：

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

Answer 9

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

安装 flowright：

yarn add lodash.flowright

在你的代码中替换：

import { compose } from 'react-apollo'

由

import {flowRight as compose} from 'lodash';

Answer 10

以下是我在项目中解决此问题的方法：

1. 安装 lodash.flowright

   npm install lodash.flowright

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

   从“lodash.flowright”导入撰写