Question

我正在YouTube（https://www.youtube.com/watch?v=ed8SzALpx1Q上大约3小时16分钟）关注graphql教程，其中一部分使用了“ react-apollo”中的compose。但是，由于新版本的react-apollo不会导出此错误，因此出现错误。

我在线阅读了需要将import { compose } from "react-apollo"替换为import { compose } from "recompose"，但这样做会产生错误TypeError: Cannot read property 'loading' of undefined的信息，我还读到我应该用{替换从react-apollo导入的内容{1}}，但是当我这样做时，我得到其他错误，说import * as compose from "lodash"

App.js：

× TypeError: lodash__WEBPACK_IMPORTED_MODULE_2__(...) is not a function

queries.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;

AddBooks.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 };

我希望可以从react-apollo导入compose并接受查询和突变，并使它们在AddBook的props中可用，因此我可以在displayAuthors（）和SubmitForm（）函数中使用它们，但是我得到了错误不是从react-apollo导出的，当我尝试在线建议的解决方案时，发现了上面提到的其他错误。

Answer 1

在客户文件夹中安装lodash

npm lodash

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

import {flowRight as compose} from 'lodash';

Answer 2

您的导入很好。 props.data将始终是未定义的，因为您已将name参数传递到graphql HOC。您需要改为检查props.getAuthorsQuery.loading。

Answer 3

以下是我如何通过项目解决此问题的方法：

安装lodash.flowright

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

从“ lodash.flowright”导入

Answer 4

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

安装流水权：

yarn add lodash.flowright

替换您的代码：

import { compose } from 'react-apollo'

通过

import {flowRight as compose} from 'lodash';

Answer 5

在这里，我尝试遵循他的教程“ 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 6

这可以通过;

解决

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

由于compose实际上与flowRight相同，因此阿波罗团队决定通过删除包来减小包的大小。

有关更多信息，请在此处https://github.com/apollographql/react-apollo/blob/e9190fac891dd7af3a1690a5d2a1305953fd5a6f/Changelog.md#breaking-changes

阅读重大更改部分

Answer 7

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

让数据= this.props.getAuthorsQuery;

Answer 8

您至少不必为此使用lodash

仅嵌套graphql函数

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

您可以参考

Apollo concepts

Answer 9

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 10

<块引用>

这就是我在不使用 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 教程，但是如果您正在考虑解决撰写问题？好吧，我也在为此苦苦挣扎。

不从react-apollo导出的撰写

10 个答案:

您至少不必为此使用lodash

仅嵌套graphql函数