IntelliJ에서 Gatsby의 GraphQL 스키마를 인식하여 쿼리 완성을 활성화합니다.

이 게시물에서는 IntelliJ IDE 1에서 Gatsby의 GraphQL 스키마를 인식하고 JS 코드에서 GraphQL 쿼리를 완성하는 방법을 보여줍니다.

하는 방법

IDE에 JS GraphQL 설치

먼저 IDE에 JS GraphQL 플러그인을 설치합니다.

Preferences → Plugins → Marketplace를 열고 GraphQL에서 검색하여 JS GraphQL을 설치합니다.



IDE를 다시 시작합니다.

Gatsby 개발 서버 시작

콘솔에서 Gatsby 개발 서버를 시작하고 GraphQL 엔드포인트http://localhost:8000/___graphql가 생성될 때까지 기다립니다.

gatsby develop

GraphQL 설정 파일 만들기

프로젝트 루트 디렉토리를 마우스 오른쪽 버튼으로 클릭 → New → GraphQL Configuration File을 클릭합니다.



.graphqlconfig라는 파일이 만들어지므로 내용을 다음과 같이 만듭니다.

.graphqlconfig

{
  "name": "Gatsby Schema",
  "schemaPath": "gatsby.graphql",
  "extensions": {
    "endpoints": {
      "Gatsby GraphQL Endpoint": {
        "url": "http://localhost:8000/___graphql",
        "headers": {
          "user-agent": "JS GraphQL"
        },
        "introspect": false
      }
    }
  }
}

Gatsby GraphQL 스키마 파일 생성

.graphqlconfig를 열면 편집기의 7 행에 실행 버튼 (▶)이 표시되므로 그것을 클릭합니다.



이렇게 하면 gatsby.graphql이라는 GraphQL 스키마 파일이 생성됩니다.



따라서 IDE에서 Gatsby의 GraphQL 스키마를 인식하고 쿼리를 완성할 수 있습니다.

보완 시도

GraphQL 문자열에서 Ctrl+Space를 누르면 필드 등이 보완됩니다.

끝

여기에 소개 된 방법을 사용한 샘플 프로젝트는 GitHub에 있습니다.

suin/gatsby-playground at intellij-graphql

끝까지 읽어 주셔서 감사합니다. Twitter에서는, Qiita에 쓰지 않는 기술 재료 등도 트윗하고 있으므로, 좋으면 팔로우해 주시면 기쁩니다 → Twitter@suin



IntelliJ IDE뿐만 아니라 WebStorm, IntelliJ IDEA, Android Studio, RubyMine, PhpStorm, PyCharm에도 대응.  ↩