How to use hooks (useLazyQuery) in class component in ReactJS

Help
,
1

I am struggling to use the hook useLazyQuery hook in class component in ReactJS. I wanted to execute the query manually when the validation passes.
I am sure that it can be done with Reacts render props or HOC but failed to accomplish it. I was trying with reacts Render props but unable to understand that how it will call the hook function of useLazyQuery from react’s class component.
Kindly help if any body have some idea on it. Let me know if wanted to check the code i have written.

Thanks

2

@saurabh2801 please share some of you code so we can see what you’ve tried.

3 
import React from 'react';
import Stack from 'react-bootstrap/Stack';
import Image from 'react-bootstrap/Image';
import Form from 'react-bootstrap/Form';
import FloatingLabel from 'react-bootstrap/FloatingLabel';
import Button from 'react-bootstrap/Button';
import RenderWrapper from '../utils/RenderWrapper';

class Home extends React.Component{
    constructor(props) {
        super(props);
        this.state = {account: '', formerrors: {}};
    
        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }

    handleChange(event) {
        event.preventDefault();
        this.setState({[event.target.name]: event.target.value}, () => {this.validate()});
    }

    validate() {
        let errors = {};
        let pattern = /^([a-z][a-z0-9-_]*)$/;
        if (!this.state.account) {
            errors.account = "Account Id is required";
        } else if ((this.state.account.length<1 || this.state.account.length>50) || !pattern.test(this.state.account) ){
            errors.account = "Account Id is not Valid"
        }

        this.setState({formerrors: errors});
        return (Object.keys(errors).length === 0) ? false : true;
      }
      
      handleSubmit(event) {
        event.preventDefault();
        if (!this.validate()) {
            console.log("send request to server", this.props);
            this.props.loadGreeting();
            //const { error, loading, data } = useLazyQuery(GET_ACCOUNT_QUERY,{ variables: { accountName: this.state.account } });
            //console.log(error,"ERROR");
            //myFunc({ variables: { accountName: this.state.account } });
            //verifyAccount({ variables: { accountName: 'saurabh' } });
            //console.log(d);
            //myFunc();
            /*const { loading, error, data } = useQuery(GET_ACCOUNT_QUERY, {
                variables: { accountName: this.state.account },
            });
            this.setState({ loading: loading, error: error, date: data });*/
            
        }
    }

    componentDidMount() {
        //const [verifyAccount, { called, loading, data }] = useLazyQuery(GET_ACCOUNT_QUERY);
    }

    render(){
        //console.log(this.state);
        //const { loading, error, data } = useLazyQuery(GET_ACCOUNT_QUERY, {
        //    variables: { accountName: this.state.account },
        //});
        //const g = () => {};
        //const [verifyAccount, { called, loading, data }] = useLazyQuery(GET_ACCOUNT_QUERY);
        //con
        return(
            <div className="content-wrapper auth">
                <Stack gap={0} className="col-lg-4 mx-auto">
                <div className="auth-form-light text-start p-5">
                    <div className="brand-logo text-center">
                        <Image src="../../images/logo.svg" />
                    </div>
                    <h5>Hello! let's get started</h5>
                    <h6 className="font-weight-light">Sign in to continue.</h6>
                    
                        
                        <FloatingLabel controlId="floatingInput" label="Account Id" className="pt-3 mb-3">
                            <Form.Control type="text" name="account" value={this.state.account} autoComplete="off" placeholder="Account Id" onChange={this.handleChange} 
                            required
                            isInvalid={ !!this.state.formerrors.account } />
                                {this.state.formerrors.account && (
                                <Form.Control.Feedback className='font-weight-light font-12' type='invalid'>
                                {this.state.formerrors.account}
                                </Form.Control.Feedback>
                                )}
                        </FloatingLabel>

                        <RenderWrapper
                            render={(loadGreeting, { called, loading, data }) => (
                                <Button variant="primary" onClick={this.handleSubmit} {...loadGreeting} className='btn-gradient-primary' size="lg" type="button">VERIFY</Button>  
                            )}>
                        
                        
                        </RenderWrapper>
                </div>
                </Stack>
            </div>
        );
    }
}

export default Home;
4

This is the code where i am trying to accomplish it via react’s Render Props.

import React from 'react';
import { useLazyQuery, gql } from "@apollo/client";

const GET_ACCOUNT_QUERY = gql`
query GetAccount($accountName: String!) {
  getAccount(account_name: $accountName) {
    account_status
    id
  }
}
`;
 
export default function RenderWrapper({ render }) {
    const [loadGreeting, { called, loading, data }] = useLazyQuery(
        GET_ACCOUNT_QUERY,
        { variables: { accountName: 'saurabh' } }
      );
      //loadGreeting();
      return render(loadGreeting, { called, loading, data });
      /*if (called && loading) return <p>Loading ...</p>
      if (!called) {
        return <button onClick={() => loadGreeting()}>Load greeting</button>
      }
      return <h1>Hello {data.greeting.message}!</h1>;*/
}