GraphQL

GitLab 프론트엔드 개발에서 GraphQL, Apollo Client, Vue Apollo를 사용하는 방법과 쿼리 작성, 캐시 업데이트, 테스트 전략을 설명합니다.

시작하기 # 유용한 리소스 # 일반 리소스 : 📚 GraphQL 공식 입문서 📚 Apollo 공식 입문서 GitLab에서의 GraphQL : GitLab Unfiltered GraphQL 재생목록 GitLab에서의 GraphQL: 심층 분석 (영상) by Nick Thomas GitLab에서 GraphQL의 역사에 대한 개요 (프론트엔드 한정이 아님) GraphQL과 Vue Apollo를 이용한 GitLab 기능 연습 (영상) by Natalia Tepluhina GraphQL을 이용해 GitLab에서 프론트엔드 기능을 구현하는 실제 예시 GitLab에서 클라이언트 사이드 GraphQL의 역사 (영상) Illya Klymov and Natalia Tepluhina Vuex에서 Apollo로 (영상) by Natalia Tepluhina Apollo가 Vuex보다 나은 선택이 될 수 있는 경우와 전환 방법에 대한 개요 🛠 Vuex -> Apollo 마이그레이션: 개념 증명 프로젝트 Vue+GraphQL+(Vuex 또는 Apollo) 앱에서 상태 관리의 가능한 접근 방식을 보여주는 예시 모음 라이브러리 # 프론트엔드 개발에 GraphQL을 사용할 때는 Apollo (구체적으로 Apollo Client )와 Vue Apollo 를 사용합니다. Vue 애플리케이션에서 GraphQL을 사용하는 경우 Vue에서의 사용법 섹션에서 Vue Apollo 통합 방법을 배울 수 있습니다. 다른 사용 사례의 경우 Vue 외부에서의 사용법 섹션을 참조하세요. 불변 캐시 업데이트를 위해 Immer 를 사용합니다. 자세한 내용은 불변성과 캐시 업데이트 를 참조하세요. 도구 # Apollo Client Devtools Apollo GraphQL VS Code 확장 # VS Code를 사용하는 경우 Apollo GraphQL 확장 이 .graphql 파일에서 자동완성을 지원합니다. GraphQL 확장을 설정하려면 다음 단계를 따르세요: 스키마 생성: bundle exec rake gitlab:graphql:schema:dump 로컬 gitlab 디렉터리의 루트에 apollo.config.js 파일을 추가합니다. 파일에 다음 내용을 입력합니다: module.exports = { client: { includes: ['./app/assets/javascripts/**/*.graphql', './ee/app/assets/javascripts/**/*.graphql'], service: { name: 'GitLab', localSchemaFile: './tmp/tests/graphql/gitlab_schema.graphql', }, }, }; VS Code를 재시작합니다. GraphQL API 탐색 # GraphQL API는 인스턴스의 /-/graphql-explorer 또는 GitLab.com 에서 GraphiQL을 통해 탐색할 수 있습니다. 필요한 경우 GitLab GraphQL API 참조 문서 를 참고하세요. 사용 가능한 모든 쿼리와 뮤테이션을 보려면 Graph