撰写未从 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 我还读到我应该替换 react-apollo 的导入使用 import * as compose from "lodash" 但是当我这样做时我得到其他错误，说 × 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

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 2

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

安装lodash.flowright

npm 安装lodash.flowright
将其导入您的 AddBook.js 或您要使用的文件中撰写

从 'lodash.flowright'

Answer 3

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 4

同样，我尝试按照他的教程“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 5

这可以通过;

解决

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 6

问题不在于撰写。每当我们编写 2 个或更多查询时，我们都不会得到 "data" 属性你应该试试

让数据=this.props.getAuthorsQuery;

Answer 7

你至少不必为这个问题使用 lodash

简单嵌套graphql函数

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

你可以参考这个

Apollo concepts

Answer 8

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 9

This Is how I got it working without using Compose.

我使用useQuery查询作者，然后使用graphql进行Mutate。简单地避免嵌套查询，这需要使用 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 10

哇，我也在做来自 net ninja youtube 教程的同一个项目，得到了同样的错误，实际上 react-oppollo 的版本随着时间的推移而改变

撰写未从 react-apollo 导出

compose not exported from react-apollo

reactjs

graphql

apollo

react-apollo

你至少不必为这个问题使用 lodash

简单嵌套graphql函数