How to use variables with Apollo Graphql

1

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
    
asked by Willy 28.05.2018 в 18:33
source

0 answers