1

Estoy utilizando React, GraphQL, Apollo, MongoDB ... tengo en pantalla una lista de clientes y tengo un botón buscar que al hacer click sobre el va a un handleSubmit:

 handleSubmit = (ev, args)=>{
    const response = this.props.allClientes({options: {variables: args}})
  }

en args vienen las variables por las que quiero filtrar la lista (por ejemplo, {contrato: "30", nombreCliente: "Wilson"}. cuando hago click en el boton Buscar sale el siguiente error:

Unhandled Rejection (TypeError): _this2.props.allClientes is not a function

Como hago para enviarle las variables al query y hacer que la lista se me actualice en pantalla correctamente ?

Agrego 3 archivos .js para ilustrar un poco mas la pregunta:

home.js:

import React from 'react';
import {graphql} from 'react-apollo';

import queries from '../../src/utils/queries'

import HomeCli1 from './home/homecli1';
import HomeCli2 from './home/homecli2';

class Home extends React.Component{
  state={
    argsBuscCliente: {},
  }

  handleChange = (ev, input)=>{
    const argsBuscCliente = this.state.argsBuscCliente
    argsBuscCliente[input.name] = input.value
    this.setState({argsBuscCliente});
    console.log(argsBuscCliente)
  }

  handleSubmit = async (ev, args) => {
    ev.preventDefault()

    const response = this.props.allClientes({options: {variables: args}})
  }

  render(){
    const {argsBuscCliente} = this.state;

    const listaCli = this.props.data.allClientes
    console.log(listaCli)
    console.log(this.props)

    return (
      <div>
        <div className="ui two column stackable grid">
          <div className="row rowBotones container">
            <div className="column">
            </div>
          </div>

          <div className="column">
            <HomeCli1 handleChange={this.handleChange} handleSubmit={this.handleSubmit} args={argsBuscCliente}/>
          </div>
          <div className="column">
            <HomeCli2 list={listaCli} />
          </div>
        </div>
      </div>
    )
  }
}

export default graphql(queries.query.allClientes, {options: {variables: {}}})(Home)

homecli1.js:

import React from 'react';
import { Form } from 'semantic-ui-react'

const HomeCli1 = ({handleChange, handleSubmit, args}) => {
  console.log("entro cli1")
  return (
    <div>
      <Form onSubmit={(ev)=>handleSubmit(ev, args)}>
        <div>
          <button className="ui right labeled icon button" type='submit'>
            <i className="large search yellow icon"></i>
            Buscar
          </button>

          <div className="ui input fluid">
            <Form.Input name="contrato" type="text" placeholder="Contrato" onChange={handleChange}/>
          </div>

          <div className="ui input fluid">
            <Form.Input name="nombreCliente" type="text" placeholder="Nombre(s)" onChange={handleChange}/>
          </div>

          <div className="ui input fluid">
            <Form.Input name="apellidoCliente" type="text" placeholder="Apellido(s)" onChange={handleChange}/>
          </div>
        </div>
      </Form>
    </div>
  )
};

export default HomeCli1

homecli2.js:

import React from 'react';

const Cliente = props => <p>{props.elemento.contrato} {props.elemento.nombreCliente} {props.elemento.apellidoCliente}</p>;

const DetalleNivel1 = props => {
  return (
    <div className="ui middle aligned animated celled list">
      <div className="item">
        <div className="content">
          <a className="header"><Cliente elemento={props.elemento} /></a>
        </div>
      </div>
    </div>
  )
};

const Lista = props => {
  const nivel1Detalle = props.list.map((elemento, _id) => <DetalleNivel1 styles={props.styles} elemento={elemento} key={elemento._id} />);
  return(
    <div>
      {nivel1Detalle}
    </div>
  )
};

const HomeCli2 = ({styles, handleClick, list}) => {
  console.log("entro cli2")
  if(!list){
    var list = []
  }
  return (
    <div>
      <button className="ui right labeled icon button">
        Clientes
      </button>

      <Lista list={list} />
    </div>
  )
};

export default HomeCli2
3
  • 1
    Bienvenido Willy, podrías por favor agregar algo mas de código, por ejemplo el archivo en donde tiene esa función (handleSubmit),por lo visto no encuentra allClientes porque no esta definida o algo mal importado, si no tenemos mas código no podremos saber. el 28 may. 2018 a las 16:37
  • Claro que si Federico, ya lo agrego, muchas gracias
    – Willy
    el 28 may. 2018 a las 19:01
  • Estoy en tu mismísima situación: stackoverflow.com/questions/51754052/… . Por más que intento listar productos metiendo criterios de búsqueda, me dice lo mismo que a ti, QUE NO ES UNA FUNCIÓN. Aun "arreglándolo" con (en tu caso...) this.props.allClientes.variables= args, sigue sin hacer una petición con los nuevos criterios de búsqueda a graphql. ¿Conseguiste arreglarlo correctamente? Qué hiciste? Por favor, si es el caso, por la solución. Me urge para un proyecyo personal de la universidad :(
    – Andynedine
    el 9 ago. 2018 a las 16:29

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

Examina otras preguntas con la etiqueta o formula tu propia pregunta.