Question

我正在尝试使用Apollo useLazyQuery挂钩来获取数据，但是该挂钩未返回任何内容。我尝试进行console.log(data, loading, error, called )，但是即使在调用该函数之后，这里的所有内容仍然为空。但是，我尝试了XHR标签。它显示了正确的响应。

此外，我注意到一次单击就向XHR发送了两个/graphql请求。第一个没有任何邮件正文和204响应代码，第二个似乎是实际请求。

这是我的代码：

import React, { useState } from 'react';
import Button from '@material-ui/core/Button';
import TextField from '@material-ui/core/TextField';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import Checkbox from '@material-ui/core/Checkbox';
import Link from '@material-ui/core/Link';
import Grid from '@material-ui/core/Grid';
import { makeStyles } from '@material-ui/core/styles';
import CircularProgress from '@material-ui/core/CircularProgress';
import { useQuery } from '@apollo/react-hooks';
import { gql } from 'apollo-boost';


const useStyles = makeStyles(theme => ({
  ...
  }))
`;

export default function AdminLogin() {
  const classes = useStyles();

    const [username, setUsername] = useState("");
    const [password, setPassword] = useState("");
    const [showAlert, setShowAlert] = useState(false);
    const [alert, setAlert] = useState({variant: "", message: ""});

    const [signInClicked, { data, loading, error, called }] = useLazyQuery(ADMIN_LOGIN);

    useEffect(() => {
        if(username.length !== 0 && password.length !== 0){
            signInClicked({ variables: { username, password }})

            console.log(data, loading, error, called ) //loading and called are false, data and error is undefned

            if(called && !loading && error){
                setShowAlert(true);
                setAlert({variant: "error", message: "Error"})
            }
        }
    }, [username, password]);

    function handleSignIn(e) {
        e.preventDefault();
        const formData = new FormData(e.target);
        setUsername(formData.get('username'));
        setPassword(formData.get('password'));
    }



  return (

          <form className={classes.form} noValidate onSubmit={handleSignIn}>
            <TextField
              variant="outlined"
              margin="normal"
              required
              fullWidth
              id="username"
              label="Username"
              name="username"
              autoComplete="username"
              autoFocus
            />
            <TextField
              variant="outlined"
              margin="normal"
              required
              fullWidth
              name="password"
              label="Password"
              type="password"
              id="password"
              autoComplete="current-password"
            />
            <FormControlLabel
              control={<Checkbox value="remember" color="primary" />}
              label="Remember me"
            />
            <Button
              type="submit"
              fullWidth
              variant="contained"
              color="primary"
              className={classes.submit}
            >
              {loading && <CircularProgress size={24} color="inherit" />} Sign In
            </Button>
            <Grid container>
              <Grid item xs>
                <Link href="#" variant="body2">
                  Forgot password?
                </Link>
              </Grid>
            </Grid>
          </form>
  );
}

Apollo useLazyQuery钩子无法正常工作

0 个答案: