问警告:从submitForm()错误捕获了一个未处理的错误：

EN

   import React from 'react';
import { Formik, Form, Field, FormikHelpers } from 'formik';
import Wrapper from '../components/Wrapper';
import InputField from '../components/InputField';
import { toErrorMap } from '../utils/toErrorMap';
import { useRouter } from 'next/router';
import { createUrqlClient } from '../utils/createUrqlClient';
import { withUrqlClient } from "next-urql"
import { Button, LinearProgress, Grid } from '@material-ui/core';
import Paper from '@material-ui/core/Paper';
import { TextField } from 'formik-material-ui';
import { makeStyles } from '@material-ui/core/styles';
import Avatar from '@material-ui/core/Avatar';
import Typography from '@material-ui/core/Typography';
//import { useLoginUsuarioQuery } from '../generated/graphql';
import { useQuery } from 'urql';
import { useUserByIdQuery } from '../generated/graphql';

const Login: React.FC<{}> = ({ }) => {
  const router = useRouter();
  const classes = useStyles();
  
  const submitForm = ({username,password}) => {
    const [{data}] = useUserByIdQuery({variables:{id:1}});
    console.log(data);
  }    

  return (
    <Grid container component="main" className={classes.root}>
      <Grid item xs={false} sm={4} md={7} className={classes.image}></Grid>
      <Grid item xs={12} sm={8} md={5} component={Paper} elevation={6} square >
        <div className={classes.paper}>
          <Avatar className={classes.avatar}>
            M
                </Avatar>
          <Typography component="h1" variant="h5">
            Ingresar
                </Typography>
          <Formik
            initialValues={{ username: '', password: '' }}
            onSubmit={(values) => {submitForm(values)}}
          >
            {({ isSubmitting }) => (
              <Form className={classes.form}>
                <Field
                  component={TextField}
                  name="username"
                  type="text"
                  label="username"
                  variant="outlined"
                  className={classes.form}
                />
                <br />
                <Field
                  component={TextField}
                  type="password"
                  label="Password"
                  name="password"
                  variant="outlined"
                  className={classes.form}
                />
                {isSubmitting && <LinearProgress />}
                <br />
                <Button
                  variant="contained"
                  color="primary"
                  disabled={isSubmitting}
                  type="submit"
                  className={classes.form}

                >
                  Submit
                </Button>
              </Form>
            )}
          </Formik>
        </div>
      </Grid>
    </Grid>


  );

}


export default withUrqlClient(createUrqlClient)(Login)