React 및 GraphQL - 07을 사용하여 Reddit 클론 만들기

이 시점에서 우리는 사용자를 등록합니다. 이제 사용자가 성공적으로 등록되면 사용자는 홈 페이지로 리디렉션해야 합니다.
useRouter에서 next/router를 추가하는 것으로 시작합니다. 그런 다음 홈 페이지에 리디렉션을 추가합니다.

router.push("/")

In the original video that I follow up to now, got an error here. But maybe because of an update of the ORM tool I didn’t get that. But at this point, it shows how to generate query manually. So let’s do it now.

먼저 EntityManager 에서 @mikro-orm/postgresql를 가져옵니다. 그런 다음 em를 EntityManager로 캐스트합니다. 쿼리를 만들고 삽입합니다. 완전한 쿼리 빌더 코드는 다음과 같습니다.

const result = await (em as EntityManager).createQueryBuilder(User)
                  .getKnexQuery().insert({
                    username: options.username,
                    password: hashedPassword,
                    created_at: new Date(),
                    updated_at: new Date(),
                  }).returning("*");

여기서 getKnexQuery를 사용하면 모든 쿼리 작업을 사용할 수 있다는 몇 가지 사항을 강조해야 합니다. 또 다른 점은 User 엔터티에 createdAt 속성이 있고 mikroORM CamelCase 때문에 밑줄이 추가된다는 것입니다. 그러나 여기에 수동으로 추가해야 합니다. 또한 returning 메서드에서 모든 필드를 반환합니다.

그래서 우리는 모두 Register 양식을 잘하고 다음으로 Login 페이지를 완성하기 위해 이동합니다. 먼저 login.tsx 파일과 login.graphql 파일을 추가해야 합니다. register.tsx 파일에서 코드를 복사하여 거기에 붙여넣고 약간 수정할 수 있습니다. 또한 GraphQL Playground에서 로그인 변형을 복사하고 변수를 갖도록 수정하십시오.

그런 다음 yarn gen 명령을 실행합니다. graphql.tsx 파일에 관련 함수를 생성합니다.
username 및 password 가 포함된 객체를 전달해야 한다는 점을 강조해야 합니다. login 메서드 위로 마우스를 가져가면 UsernamePasswordInput 개체가 필요하기 때문입니다.

...
const response = await login({ options: values });
...

이제 완벽하게 작동하는 로그인 페이지가 있습니다. 다음 목표는 프로젝트에 NavBar를 추가하는 것입니다. 컴포넌트를 생성하고 거기에 추가할 수 있습니다. 지금 해보자.

import { Box, Button, Flex, Link } from "@chakra-ui/react";
import React from "react";
import NextLink from "next/link";
import { useMeQuery } from "../generated/graphql";

interface NavBarProps {}

export const NavBar: React.FC<NavBarProps> = ({}) => {
  const [{ data, fetching }] = useMeQuery();

  let body = null;

  if (fetching) {
  } else if (!data?.me) {
    body = (
      <>
        <NextLink href="/login">
          <Link mr={2}>login</Link>
        </NextLink>
        <NextLink href="/register">
          <Link mr={2}>register</Link>
        </NextLink>
      </>
    );
  } else {
    // because one line no need ()
    body = (
      <Flex>
        <Box mr={2}>{data.me.username}</Box>
        <Button variant="link">logout</Button>
      </Flex>
    );
  }
  return (
    <Flex bg="tomato" p={4}>
      <Box ml={"auto"}>{body}</Box>
    </Flex>
  );
};

여기 <NextLink />는 클라이언트 측 라우팅을 지원하는 next.js 구현입니다. 이제 사용자 로그인 상태에 따라 로그인 및 등록 링크를 표시해야 합니다. 또한 사용자가 로그인한 경우 사용자 이름을 표시합니다. 이 구성 요소를 Index 구성 요소에 추가해야 합니다.

const Index = () => (
  <>
    <NavBar />
    <div>Hello world!!!</div>
  </>
);

me 쿼리에서 데이터를 얻습니다. 먼저 me 쿼리를 추가하고 yarn gen를 사용하여 함수를 생성합니다.

// we need to give a name to query
query Me {
  me {
    id
    username
  }
}

그런 다음 NavBar 에서 데이터를 가져옵니다.

const [{ data, fetching }] = useMeQuery();

여기에서 데이터 속성을 사용하고 상태를 가져오는 첫 번째 매개변수를 사용하고 있다는 차이점을 레지스터로 확인하십시오. 필요한 모든 것을 추가하고 쿠키를 제거하여 로그아웃을 시도한 후 다시 로그인하여 메인 페이지로 이동합니다. 아마도 사용하면 거기에서 귀하의 이름이 업데이트되지 않을 것입니다. urql 의 캐싱 때문입니다. 다음 블로그 게시물에서 문제가 무엇인지 확인하고 해당 문제를 수정하겠습니다.

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

참조:

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

기본 이미지credit