React 및 GraphQL - 12를 사용하여 Reddit 클론 만들기

이 블로그 게시물은 원래 내 블로그 사이트에 게시되었으며 여기에서 찾을 수 있습니다.

이전 게시물에서 말했듯이 여기에서 2개의 시나리오를 관리해야 합니다.

암호를 잊어버린 캐시 새로 고침

토큰 오류에 대한 오류 핸들입니다.

토큰 오류를 처리하기 위해 아래 코드 라인을 추가하십시오. 여기서는 상태를 사용합니다.

const [tokenError, setTokenError] = useState("");

그런 다음 토큰 오류가 있는지 확인하기 위해 아래 코드를 추가합니다. 그렇다면 우리는. 상태에 추가합니다.

// take out toErrorMap first
const errorMap = toErrorMap(response.data.changePassword.errors);
if ("token" in errorMap) {
  // this is because we defined filed as token in user.ts in backend
  setTokenError(errorMap.token);
}

이 오류를 표시해 보겠습니다.

{
  tokenError ? <Box color="red">{tokenError}</Box> : null;
}

이 순간을 추가하려고 하면 404 오류가 발생합니다. 여기서 문제는 우리가 이것을 withUrqlClient 로 래핑하지 않았다는 것입니다. 구성 요소를 덮어 보겠습니다.

export default withUrqlClient(createUrqlClient)(ChangePassword);

이제 이 토큰을 사용하면 백엔드에서 토큰을 삭제해야 합니다. 다음에 해보자.

// in resolvers/user.ts file
// first get the key out
const key = FORGET_PASSWORD_PREFIX + token;
const userId = await redis.get(key);
// then delete the key
await redis.del(key);
req.session.userId = user.id;

이제 토큰을 두 번째로 사용하여 암호를 변경하려고 하면 토큰 만료 오류가 발생합니다. 시원한. 이제 모두 잘 작동합니다.

자, 이제 토큰이 만료되면 새 토큰을 가져와야 합니다. 추가해 보겠습니다. 먼저 새 토큰 페이지를 가져오는 링크를 추가합니다.

// update code to below code block in [token].tsx file.
{
  tokenError ? (
    <Box>
      <Box color="red">{tokenError}</Box>
      <NextLink href="/forgot-password">
        <Link>Click here to get a new token.</Link>
      </NextLink>
    </Box>
  ) : null;
}

링크를 클릭하면 forgot-password 페이지로 이동합니다. 해당 페이지를 빠르게 추가해 보겠습니다.

import React from "react";
const ForgotPassword: React.FC<{}> = ({}) => {
  return <div>Forgot Password</div>;
};
export default ForgotPassword;

이것은 또한 Login 페이지에 추가해야 합니다.

// under to inputfield add this code
<Flex mt={2}>
  <NextLink href="/forgot-password">
    <Link ml="auto">forgot password?</Link>
  </NextLink>
</Flex>

이forgot-passward 페이지의 마지막으로 사용자가 이메일 주소를 삽입해야 합니다. Login 페이지에서 복사하여 여기에 추가해 보겠습니다. 또한 forgot-password에 대한 돌연변이를 생성해야 합니다. 이것은 부울 값만 반환합니다.

mutation ForgotPassword($email: String!) {
  forgotPassword(email: $email)
}

forgot-password.tsx 페이지에서 state를 사용하여 성공 메시지를 설정합니다.

const [complete, setComplete] = userState(false);

다음은 forgot-password.tsx 파일의 전체 코드입니다.

const [complete, setComplete] = userState(false);
const [, forgotPassword] = useForgotPasswordMutation();
return (
  <Wrapper variant="small">
    <Formik
      initialValues={{ email: "" }}
      onSubmit={async (values) => {
        await forgotPassword(values);
        setComplete(true);
      }}
    >
      {({ isSubmitting }) =>
        complete ? (
          <Box>we sent a password reset link to your email. Please check.</Box>
        ) : (
          <Form>
            <InputField
              name="email"
              placeholder="email"
              label="Email"
              type="email"
            />

            <Button
              isLoading={isSubmitting}
              mt={4}
              type="submit"
              colorScheme="teal"
            >
              Forgot Password
            </Button>
          </Form>
        )
      }
    </Formik>
  </Wrapper>
);

이 시점에서 우리는 이 애플리케이션의 사용자 관리 및 인증 작업에 대한 거의 모든 작업을 수행했습니다. 다음 블로그 게시물에서 Reddit 클론에 게시물을 추가하는 작업을 해 보겠습니다.


읽어주셔서 감사합니다. 이와 관련하여 질문할 사항이 있으면 여기에 댓글을 남겨주세요. 또한 내 이해에 따라 이것을 썼습니다. 따라서 잘못된 점이 있으면 주저하지 말고 저를 수정하십시오. 정말 감사합니다.
오늘의 친구들을 위한 것입니다. 곧 봐요. 고맙습니다.

참조:

이 기사 시리즈는 . 이것은 놀라운 자습서이며 확인하는 것이 좋습니다.

기본 이미지credit