web-dev-qa-db-fra.com

composer non exporté de React-Apollo

Je suive un didacticiel graphql sur youtube ( https://www.youtube.com/watch?v=ed8szalpx1q à environ 3 heures 16min) et une partie d'elle utilise compose de " React-Apollo ". Cependant, je reçois une erreur car la nouvelle version de React-Apollo n'exporte pas cela.

J'ai lu en ligne que j'ai besoin de remplacer import { compose } from "react-apollo" Avec import { compose } from "recompose" Mais cela produit l'erreur TypeError: Cannot read property 'loading' of undefined J'ai également lu que je devrais remplacer l'importation de React-Apollo avec import * as compose from "lodash" Mais quand je fais cela, je reçois d'autres erreurs, disant que × 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);

Je m'attendais à ce que la composition soit importée de React-Apollo et de prendre la requête et la mutation et de les rendre disponibles à l'intérieur des accessoires de AddBook, afin que je puisse les utiliser dans les afficheurs () et soumettre des fonctions (), mais plutôt l'erreur n'est pas exporté à partir de React-Apollo et lorsque j'essaie les solutions suggérées, j'ai trouvé en ligne, je reçois les autres erreurs mentionnées ci-dessus.

reactjsgraphqlapolloreact-apollocompose
8
rollerpigeon

Installez Lodash dans votre dossier client

npm lodash

et utilisez ceci pour importer de la composition de Lodash (utilisez un capital-r en floward)

import {flowRight as compose} from 'lodash';
4
Stéphane Gerber

Voici comment j'ai résolu ce problème avec mon projet :

  1. installer lodash.flowright

    NPM Installez Lodash.flowright

  2. importer dans votre addbook.js ou dans le fichier que vous souhaitez utiliser composez

    Importation composée de 'lodash.flowright'

1
DiaMaBo

Cela peut être résolu par;

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

Parce que la composition est littéralement la même que le fluide, l'équipe APOLLO a décidé de réduire la taille du paquet en le supprimant.

Pour plus d'informations, lisez la section Changements de rupture ici https://github.com/apollographeql/react-apollo/blob/e9190fac891d1Af3A1690A5D2A1305953FD5A1305953fd5A6f/changelog.md#breaking-changes

0
Roninho