I am using React, GraphQL, Apollo, MongoDB ... I have a list of clients on the screen and I have a search button that when clicking on it goes to a handleSubmit:
handleSubmit = (ev, args)=>{
const response = this.props.allClientes({options: {variables: args}})
}
in args come the variables by which I want to filter the list (for example, {contrato: "30", nombreCliente: "Wilson"}
.
When I click on the Search button, the following error is displayed:
Unhandled Rejection (TypeError): _this2.props.allClients is not a function
How do I send the variables to the query and make the list update on the screen correctly?
I add 3 .js files to illustrate the question a bit more:
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