Relay 온보딩 세션

Sandbox 사용법

세팅

GitHub Access Token 설정하기
- 이곳에서 생성하실 수 있습니다.
- githubCredentials.local.ts를 만들고, githubCredentials.sample.ts의 내용을 참조하여 토큰을 적절히 삽입합니다.
- 위 토큰은 각 sandbox 앱에서 불러와 사용하게 됩니다.
언어 결정하기
- TypeScript와 ReScript 샌드박스가 각각 sandbox/typescript 와 sandbox/rescript에 존재합니다.
- 원하는 샌드박스의 폴더를 VSCode의 폴더 열기 기능으로 엽니다 (Relay 익스텐션이 모노레포에서 잘 안 돔)
- 워크스페이스 설정에 따라 권장되는 익스텐션들을 설치합니다.
프로젝트 셋업하기
- pnpm i를 실행합니다. pnpm이 없다면 corepack enable을 실행합니다.
- Relay 컴파일러를 Watch 모드로 실행하려면 Watchman이 필요합니다. brew install watchman 내지 환경에 맞는 적절한 설치법을 사용해 설치합니다.
- pnpm dev을 실행하면 Relay 컴파일러와 Vite 개발 서버가 실행될 것입니다. http://localhost:5173에 접속합니다.
- 화면에 GitHub Access Token을 생성한 계정의 이름이 잘 표시되는지 확인합니다.

언어별 팁

TypeScript

Relay 컴파일러는 TypeScript 타입 정의를 자동으로 생성하는 기능을 내장하고 있습니다. 컴파일에 성공하면 작성한 Query, Mutation, Fragment의 이름에 맞게 타입이 생성됩니다.

Query 타입 활용하기

import type { AppQuery } from "./__generated__/AppQuery.graphql.ts";

const App = () => {
  const data = useLazyLoadQuery<AppQuery>(
    graphql`
      query AppQuery {
        viewer {
          login
        }
      }
    `,
    {}
  );

  return <>{data.viewer.login}</> // 타입이 잘 잡힘
};

Fragment 타입 활용하기

import type { RepoSummary_repository$key } from "./__generated__/RepoSummary_repository.graphql.ts";

interface Props {
  $repository: RepoSummary_repository$key
}

const RepoSummary = ({ $repository }: Props) => {
  const repository = useFragment(
    graphql`
      fragment RepoSummary_repository on Repository {
        nameWithOwner
        stargazerCount
      }
    `,
    $repository // 이 값의 타입 가지고 Relay가 자동으로 반환값 타입을 잡아줌
  )

  return <>{repository.nameWithOwner}</> // 타입이 잘 잡힘
}

zth/relay-onboarding

Relay 온보딩 세션

Sandbox 사용법

세팅

언어별 팁