React Hooks : Invalid hook call while using useQuery

Question

I have form with a submit button when I submit the form, I'm calling lookup function. When the code complied to graphQl, It returns Invalid hooks error.

Versions

"react": "^17.0.2",
"react-dom": "^17.0.2",

Code:

import React, { useEffect, useState, useCallback } from "react";
import ReactDOM from "react-dom";
import { Button, Form, Input, Row, Card, Col } from "antd";
import { SearchOutlined, LoginOutlined } from "@ant-design/icons";
import { useQuery, useMutation, gql } from "@apollo/client";

const IDP_LOOKUP = gql`
  query getBusiness($name: String!) {
    business(name: $name) {
      id
      name
      domain {
        DomainType
        ... on Domains {
          DomainName
        }
      }
    }
  }
`;

const lookup = (values) => {
  let DomainName = "https://" + values.Orgname + ".com";

  const { data, loading, error } = useQuery(IDP_LOOKUP, {
    variables: {
      name: DomainName
    }
  });
};

const Login = () => {
  return (
    <div>
      <Card size="small" title="Okta Login">
        <Row type="flex">
          <Col lg={24}>
            <Form name="lookup_login" className="login-form" onFinish={lookup}>
              <Row gutter={16} align="center" justify="center" type="flex">
                <Col lg={18}>
                  <Form.Item
                    label="Org Name"
                    name="Orgname"
                    rules={[
                      {
                        required: true,
                        message: "Please enter org name!"
                      }
                    ]}
                  >
                    <Input addonBefore="https://" addonAfter=".com" />
                  </Form.Item>
                </Col>
                <Col lg={6}>
                  <Form.Item>
                    <Button
                      type="primary"
                      htmlType="submit"
                      className="login-form-button"
                    >
                      <SearchOutlined /> Lookup
                    </Button>
                  </Form.Item>
                </Col>
              </Row>
            </Form>
          </Col>
        </Row>
      </Card>
    </div>
  );
};

Error:

Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:

You might have mismatching versions of React and the renderer (such as React DOM)

You might be breaking the Rules of Hooks

You might have more than one copy of React in the same app See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.

You shouldn't be calling useQuery from within an event handler. — fynmnx
– fynmnx, Commented Jul 28, 2022 at 20:21
can you share you complete code or github link, to enable us help? — Chukwuemeka Maduekwe
– Chukwuemeka Maduekwe, Commented Jul 28, 2022 at 20:44

madze · Accepted Answer · 2022-07-28 20:37:52Z

1

Apollo has a useLazyQuery hook that you can call after the component has rendered. This returns a tuple where the first item is a function you can then call from your handler to actually perform the query.

I think something like this should work:

const Login = () => {    
  const [lookupIdp, { called, loading, data }] = useLazyQuery(IDP_LOOKUP);

  const lookup = (values) => {
    let DomainName = "https://" + values.Orgname + ".com";

    lookupIdp({
      variables: {
        name: DomainName
      }
    })
  };

  return (
      <div>

edited Jul 28, 2022 at 20:37

answered Jul 28, 2022 at 20:28

madze

4062 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

madze Over a year ago

Sorry, just noticed that you are also trying to use the hook outside of your component. Updated my answer to show where the handler and hook call should live.

Maria Jeysingh Anbu Over a year ago

unstable_flushDiscreteUpdates: Cannot flush updates when React is already rendering. getting this warning

madze Over a year ago

That sounds like somehow the query is being run prematurely maybe? Perhaps the lookup handler is being called while the component is rendering somehow? I would need to see more I think to help with that.

madze Over a year ago

Are you getting that warning during component render or after submitting the form?

Maria Jeysingh Anbu Over a year ago

I did not see that warning now. I will keep monitoring. Thank you.

Chukwuemeka Maduekwe · Accepted Answer · 2022-07-28 20:30:24Z

1

You shouldn be calling hooks/lookup function inside your Login component, you can declare constant variables outside the function, but not hook.

const Login = () => {
  const lookup = (values) => {
    let DomainName = "https://" + values.Orgname + ".com";

    const { data, loading, error } = useQuery(IDP_LOOKUP, {
      variables: {
        name: DomainName
     }
  });

 return <></>
};

You get the idea? Though your code is incomplete, for a better explanation, because I can't see your on change handler

edited Jul 28, 2022 at 20:30

answered Jul 28, 2022 at 20:25

Chukwuemeka Maduekwe

8,7627 gold badges61 silver badges76 bronze badges

7 Comments

V Maharajh Over a year ago

I'm not sure this is right either. The useQuery should be a statement at the top level of the react component (<Login/>). I think you should place the useQuery there, and use enabled to issue the query when you actually have the data you need to issue it (see here: tanstack.com/query/v4/docs/guides/dependent-queries)

V Maharajh Over a year ago

Oh nevermind. I thought this was using react-query, not apollo...

Maria Jeysingh Anbu Over a year ago

@chukwu3meka After the code change, I'm getting same issue.

Chukwuemeka Maduekwe Over a year ago

can I see where you're handling form value change?

Chukwuemeka Maduekwe Over a year ago

can you share you complete code or github link, to enable us help?

|

Collectives™ on Stack Overflow

React Hooks : Invalid hook call while using useQuery

2 Answers 2

5 Comments

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related