I am trying to learn GraphQL. But I am stuck at props.history.push. I am not able to route it to another page.
Register.js
import React, { useState } from 'react'
import { Row, Col, Form, Button } from 'react-bootstrap'
import { gql, useMutation } from '@apollo/client';
const REGISTER_USER = gql`
mutation register(
$username: String!
$email: String!
$password: String!
$confirmPassword: String!
) {
register(
username: $username
email: $email
password: $password
confirmPassword: $confirmPassword
) {
username
email
createdAt
}
}
`
export default function Register(props) {
const [variables, setVariables] = useState({
email: '',
username: '',
password: '',
confirmPassword: '',
})
const [errors, setErrors] = useState({})
const [registerUser, { loading }] = useMutation(REGISTER_USER, {
update: (_, __) => props.history.push('/login'),
onError: (err) => setErrors(err.graphQLErrors[0].extensions.errors),
})
const submitRegistrationForm= (e) => {
e.preventDefault()
registerUser({ variables })
}
return (
<Row className="bg-white py-5 justify-content-center">
<Col sm={8} md={6} lg={4} >
<h1 className="text-center">
Register
</h1>
<Form onSubmit={submitRegistrationForm}>
<Form.Group className="mb-3">
<Form.Label className={errors.email && 'text-danger'}>
{errors.email ?? 'Email address'}
</Form.Label>
<Form.Control
type="email"
value={variables.email}
className={errors.email && 'is-invalid'}
onChange={(e) =>
setVariables({ ...variables, email: e.target.value })
}
/>
</Form.Group>
<Form.Group className="mb-3">
<Form.Label className={errors.username && 'text-danger'}>
{errors.username ?? 'Username'}
</Form.Label>
<Form.Control
type="text"
value={variables.username}
className={errors.username && 'is-invalid'}
onChange={(e) =>
setVariables({ ...variables, username: e.target.value })
}
/>
</Form.Group>
<Form.Group className="mb-3">
<Form.Label className={errors.password && 'text-danger'}>
{errors.password ?? 'Password'}
</Form.Label>
<Form.Control
type="password"
value={variables.password}
className={errors.password && 'is-invalid'}
onChange={(e) =>
setVariables({ ...variables, password: e.target.value })
}
/>
</Form.Group>
<Form.Group className="mb-3">
<Form.Label className={errors.confirmPassword && 'text-danger'}>
{errors.confirmPassword ?? 'Confirm password'}
</Form.Label>
<Form.Control
type="password"
value={variables.confirmPassword}
className={errors.confirmPassword && 'is-invalid'}
onChange={(e) =>
setVariables({
...variables,
confirmPassword: e.target.value,
})
}
/>
</Form.Group>
<div className="text-center">
<Button variant="success" type="submit" disables={loading}>
{loading ? 'loading..':'Register'}
</Button>
</div>
</Form>
</Col>
</Row>
)
}
App.js
import React from 'react';
import { Container} from 'react-bootstrap';
import {BrowserRouter, Route, Routes} from 'react-router-dom';
import ApolloProvider from "./ApolloProvider";
import './App.scss';
import Home from "./pages/Home";
import Register from "./pages/Register";
import Login from "./pages/Login";
function App() {
return (
<ApolloProvider>
<BrowserRouter>
<Container className="pt-5">
<Routes>
<Route exact path="/" element={<Home />}/>
<Route path="/register" element={<Register />} />
<Route path="/login" element={<Login />} />
</Routes>
</Container>
</BrowserRouter>
</ApolloProvider>
);
}
export default App;
I am able to get the entries in mySQL table, but after register I am not able to redirect to /login.
I am getting the TypeError in console. But I am not sure why I am getting this.
package.json
{
"name": "client",
"version": "0.1.0",
"private": true,
"dependencies": {
"@apollo/client": "^3.5.7",
"@testing-library/jest-dom": "^5.14.1",
"@testing-library/react": "^12.0.0",
"@testing-library/user-event": "^13.2.1",
"bootstrap": "^5.1.3",
"graphql": "^16.2.0",
"node-sass": "^7.0.1",
"react": "^17.0.2",
"react-bootstrap": "^2.1.0",
"react-dom": "^17.0.2",
"react-router-dom": "^6.2.1",
"react-scripts": "5.0.0",
"web-vitals": "^2.1.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
Using v6 of "react-router-dom".
