/relay-onboarding

Relay 온보딩 세션용 슬라이드 + 예제 프로젝트 in TypeScript & ReScript

Primary LanguageTypeScript

Relay 온보딩 세션

Sandbox 사용법

세팅

  • GitHub Access Token 설정하기

    • 이곳에서 생성하실 수 있습니다.

    • githubCredentials.local.ts를 만들고, githubCredentials.sample.ts의 내용을 참조하여 토큰을 적절히 삽입합니다.

    • 위 토큰은 각 sandbox 앱에서 불러와 사용하게 됩니다.

  • 언어 결정하기

    • TypeScript와 ReScript 샌드박스가 각각 sandbox/typescriptsandbox/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}</> // 타입이 잘 잡힘
        }