프로그래머스 데브코스 TIL - Day 75

 

✅ 오늘의 학습

📌 React 심화(7)

 

- Strapi + Apollo + GraphQL+ Next.js 

 

 

---

 

NextLinkComposed Component

Next의 Link는 스타일이없는 바닐라 태그를 렌더링하기 때문에

a태그로 구성된 Link컴포넌트를 새로 만들어주어 사용할 수 있다.

 

import Link, { LinkProps } from "next/link";

interface NextLinkComposedProps
  extends Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, "href">,
    Omit<LinkProps, "href" | "as" | "onClick" | "onMouseEnter"> {
  href: LinkProps["href"];
  as?: LinkProps["as"];
}

const NextLinkComposed = ({
  as,
  href,
  replace,
  scroll,
  shallow,
  prefetch,
  locale,
  ...props
}: NextLinkComposedProps) => {
  return (
    <Link
      href={href}
      as={as}
      replace={replace}
      scroll={scroll}
      shallow={shallow}
      prefetch={prefetch}
      locale={locale}
      passHref
    >
      <a />
    </Link>
  );
};

 

Matarial 에서도 권장하는 방식이라고 한다.

 

 

router.query.id 타입지정

comments 컴포넌트에 postId를 전달하기 위해 router.query.id를 넣어주었는데 type에러가 생겼다.

Comments컴포넌트에서 postId는 string으로 받도록 props 타입을 지정해두었는데

router.query.id값이 string | string[] | undefined으로 추론이 되었다.

=> as를 사용하여 해결했다.

<PostComments postId={router.query.id as string} />

 

 

Form Input Elements Type 정의

Form 내부에 작성된 input의 타입을 미리 정의해 둘 수 있다.

interface FormElements extends HTMLFormElement {
  email: HTMLInputElement;
  password: HTMLInputElement;
}

/* 생략 */

  const handleSubmit = useCallback(
    async (e: FormEvent<FormElements>) => {
      e.preventDefault();
      const elements: FormElements = e.currentTarget;
      const email = elements.email.value;
      const password = elements.password.value;
      const result = await login({ variables: { email: email, password } });
      nookies.set(null, "token", result.data.login.jwt, { path: "/" });
      setIsLoading(false);

      router.push("/");
    },
    [router, login]
  );

 

 

특정 post의 comments 불러오기

filters를 사용하여 포스트의 comments들을 불러올 수 있다.

  query GetComments($postId: ID!) {
    comments(filters: { post: { id: { eq: $postId } } }, sort: ["createdAt:desc"]) {
      data {
        id
        attributes {
          body
          user {
            data {
              id
              attributes {
                username
              }
            }
          }
        }
      }
    }
  }

eq옵션을 사용하면 주어진 데이터와 정확하게 일치하는 데이터만 가지고 올 수 있다.

 

 

---

✍ 느낀 점

오늘은 새롭게 무언가를 학습하기보다는 직접 혼자 해보면서 익혔던 것 같다.

강의에선 휙 만들던 것들이 직접 만드려니 에러를 맞이해서 시간이 꽤 걸렸다..

그 과정에서 기본적인 query와 mutation을 계속 작성하다보니 기본 패턴이 손에 익게 되었다..

하지만 능숙하게 사용하려면 조금 더 깊게 배워야 할 듯 하다.

이것 저것 작성해보면서 예기치 못한 Type 에러들이 발생해서 검색을 통해 어찌저찌 해결했지만

지식이 부족하다보니 맞게 해결했는지는 잘 모르겠다😅