React Hooks：使用 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:

1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. 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.

Answer 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

Answer 2

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>