Styjun

I have used same form to create and update account(module). Create is working fine but in update mode I am not able to set form field value using Set State methods. I have used query component on render methods and setstate not working on rendor method.

import Mutation from "react-apollo";
import Query from "react-apollo";
import gql from "graphql-tag";
import React, Component from "react";
import Router from "next/router";
import Joi from "joi-browser";

const CREATE_ACCOUNT = gql`
mutation CreateAccount(
$name: String
$phone_office: String
$website: String
 ) 
 createAccount(name: $name, phone_office: $phone_office, website: 
 $website) 
 name
 phone_office
 website


`;



 export const allAccountbyidQuery = gql`
 query account($id: String) 
 account(id: $id) 
 id
 name
 phone_office
 website
 
 ;
 const schema = 
 name: Joi.string()
 .required()
 .error(errors => 
 return 
 message: "Name is required!"
 ;
 ),
 phone_office: Joi.string()
 .required()
 .error(errors => 
 return 
 message: "Phone Number is required!"
 ;
 ),
 website: Joi.string()
 .required()
 .error(errors => 
 return 
 message: "Website is required!"
 ;
 )
;

Main class component

class CreateAccountModule extends React.Component 
 static async getInitialProps( query ) 
 const id = query;
 return id ;
 
 constructor(props) 
 super();
 this.state = 
 isFirstRender: true,
 name: "",
 phone_office: "",
 website: ""
 ;
 

 handleChange = event => 
 console.log("hello");
 const name, value = event.target;
 this.setState( [name]: value );

 ;
validate(name, phone_office, website) 
let errors = "";
const result = Joi.validate(
 
 name: name,
 phone_office: phone_office,
 website: website
 ,
 schema
);
if (result.error) 
 errors = result.error.details[0].message;

return errors;

setName = name => 
 if (this.state.isFirstRender) 
 this.setState( name, isFirstRender: false );
 
 ;

 render() 
 let input;
 const errors = this.state;
 console.log(this.props);

 const allAccountbyidQueryVars = 
 id: this.props.id
 ;

 //console.log(allAccountbyidQueryVars);
 return (
 <Query
 query=allAccountbyidQuery
 variables=allAccountbyidQueryVars
 onCompleted=data => this.setName(data.account.name)
 >
 ( data, loading, error ) => 
 <CreateAccountModule account=data.account />;

 return (
 <Mutation mutation=CREATE_ACCOUNT>
 (createAccount, loading, error ) => (
 <div>
 <form
 onSubmit=e => 
 e.preventDefault();
 const errors = this.validate(
 e.target.name.value,
 e.target.phone_office.value,
 e.target.website.value
 );
 if (errors) 
 this.setState( errors );
 return;
 
 if (!errors) 
 let accountres = createAccount(
 variables: 
 name: e.target.name.value,
 phone_office: e.target.phone_office.value,
 website: e.target.website.value
 
 ).then(() => Router.push("/"));
 input.value = "";
 
 
 >
 errors && <p>errors</p>
 <input
 type="text"
 name="name"
 id="name"
 placeholder="Name"
 value=this.state.name
 onChange=this.handleChange
 />
 <input
 name="phone_office"
 id="phone_office"
 placeholder="Phone Number"
 //value=data.account.phone_office
 //value="123456"
 onChange=this.handleChange
 />
 <input
 name="website"
 id="website"
 placeholder="Website"
 //value=data.account.website
 onChange=this.handleChange
 />
 <button type="submit">Add Account</button>
 <button type="button">Cancel</button>
 </form>
 loading && <p>Loading...</p>
 error && <p>Error :( Please try again</p>
 </div>
 )
 </Mutation>
 );
 
 </Query>
 );
 


export default CreateAccountModule;
`

I have tried with props but get props data in apollo state. anyone please suggest possible solution to fix this issue.