useMutation(3)_signUp_useNavigate

1. src/screens/SignUp.js

import { faInstagram } from '@fortawesome/free-brands-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { Helmet } from 'react-helmet-async'
import { useForm } from 'react-hook-form'
import { useNavigate } from 'react-router-dom'
///6. react-router-dom으로부터 useNavigate를 불러옴.

import styled from 'styled-components'
import AuthLayout from '../components/auth/AuthLayout'
import BottomBox from '../components/auth/BottomBox'
import Button from '../components/auth/Button'
import FormBox from '../components/auth/FormBox'
import Input from '../components/auth/Input'
import PageTitle from '../components/PageTitle'
import routes from '../routes'
import { FatLink } from '../styles'
import { gql, useMutation } from '@apollo/client'

///1. '@apollo/clinet로부터 gql, useMutation을 불러옴


const HeaderContainer = styled.div`
  display: flex;
  flex-direction: column;
  align-items: center;
`
const Subtitle = styled(FatLink)`
  font-size: 16px;
  text-align: center;
  margin-top: 10px;
`
const CREATE_ACCOUNT_MUTATION = gql`
  mutation createAccount(
    $username: String!
    $email: String!
    $password: String!
  ) {
    createAccount(username: $username, email: $email, password: $password) {
      ok
    }
  }
`
///2. CREATE_ACCOUNT_MUTATION을 만듬.

function SignUp() {
  const navigate = useNavigate()
  //7.useNavigate를 이용해 navigate를 만들어줌,
  
  const onCompleted = (data) => {
    const { username, password } = getValues()
    const {
      createAccount: { ok },
    } = data
    if (!ok) {
      return
    }
    //5.onCompleted 함수를 만들어줌.
    //server로부터 ok Data만 받음.
    
    navigate(routes.home, {
      state: { message: 'Account created. Please log in', username, password },
    })
    //8.onCompleted Fn안에 createAccount mutation이 잘 실행되면,
    //navigate를 이용해서 homme으로 page이동, 이동할때, state에 message, username, 
    //password를 같이 보내줌.
    //username과 password는 getValues()로 값을 얻음.
    //반드시 state:{] 형식으로 보내줄것!!
  }
  const [createAccount, { loading }] = useMutation(CREATE_ACCOUNT_MUTATION, {
    onCompleted,
  })
  ///3. const[createAccount, {loading}]=useMutaion(CREATE_ACCOUNT_MUTAION,{
  onCompleted }) 만들어줌..

  const {
    register,
    handleSubmit,
    getValues,
    formState: { errors },
  } = useForm({ mode: 'onBlur' })
  const onValid = (data) => {
    if (loading) {
      return
    }
    const { username, email, password } = getValues()
    createAccount({
      variables: {
        username,
        email,
        password,
      },
    })
    //4. react-hook-form의 onValid에서 getValue로 username, email, password를
    //얻은 다음, createAccount mutation의 variables에 값을 넣어준다.
    
  }
  return (
    <AuthLayout>
      <PageTitle title="SignUp" />
      <Helmet>Sign Up</Helmet>
      <FormBox>
        <HeaderContainer>
          <FontAwesomeIcon icon={faInstagram} size="3x" />
          <Subtitle>
            Sign up to see photos and videos from your friends.
          </Subtitle>
        </HeaderContainer>
        <form onSubmit={handleSubmit(onValid)}>
          <Input
            {...register('email', { required: true, minLength: 5 })}
            type="text"
            placeholder="Email"
          />
          {errors.email && (
            <span style={{ color: 'red', margin: '5px', fontSize: '12px' }}>
              This field is required and minLength is five!!
            </span>
          )}
          <Input
            {...register('username', { required: true, minLength: 5 })}
            type="text"
            placeholder="Username"
          />
          {errors.username && (
            <span style={{ color: 'red', margin: '5px', fontSize: '12px' }}>
              This field is required and minLength is five!!
            </span>
          )}
          <Input
            {...register('password', { required: true, minLength: 5 })}
            type="password"
            placeholder="Password"
          />
          {errors.password && (
            <span style={{ color: 'red', margin: '5px', fontSize: '12px' }}>
              This field is required and minLength is five!!
            </span>
          )}
          <Button type="submit" value="Sign Up" />
        </form>
      </FormBox>
      <BottomBox cta="Have an account?" linkText="Log In" link={routes.home} />
    </AuthLayout>
  )
}

export default SignUp