GraphQL 개발자가 체험할 수 있는 세 가지 좋은 도구

내가 GraphQL과 Apollo 클라이언트를 진정으로 좋아하는 곳은 그들이 나에게 전단 엔지니어로서의 개발 경험을 제공한 것이다.이 문장에서, 우리는 당신의 일상적인 일을 더욱 쉽게 할 수 있는 유용한 도구들을 볼 것입니다.

Please note this article assumes you already have some experience with GraphQL

GraphQL 브라우저/놀이터

일반적으로 우리가 새로운 API를 사용하기 시작할 때 가장 먼저 해야 할 일은 API 문서를 읽는 것이다.낡은 RESTAPI를 사용하는 날에 만약에 내가 모든 단점에 대한 묘사적인 문서를 가지고 있다면 나는 정말 기쁘다. 그래서 Swagger 같은 것은 정말 다행이다.GraphQL 의 상황은 어떻습니까?
문서 보기Rick and Morty APIs
보시다시피 GraphQL 섹션의 문서 기록은 REST에 비해 매우 간단합니다...그런데 저기 운동장으로 가는 링크가 있어요!

그럼, 이게 뭐예요?기본적으로 GraphQL 조회와 돌연변이를 실행하고 결과를 검사할 수 있는 플랫폼이다.이 질의를 리소스 매니저 왼쪽에 붙여넣으려면Run 단추를 클릭합니다.

query Characters {
  characters {
    results {
      id
      name
    }
  }
}

이 특정 GraphQL 끝점에 대한 추가 조회를 알고 싶으면 오른쪽 Docs 탭을 주저 없이 클릭하십시오.검색에 필요한 매개 변수, 응답에 지정할 수 있는 필드 등에 대한 모든 정보를 찾을 수 있습니다.

또한 다른 검색을 작성하려고 시도하면 운동장에도 linting과 autocompletion이 있음을 알 수 있습니다.

A playground shown on these screenshots is Prisma Playground. Other popular option is GraphiQL - for example, we're using it at GitLab as our GraphQL Explorer

IDE 플러그인을 사용하여 Linting 및 autocomplete 구현

모든 벨소리와 휘파람이 있는 운동장이 정말 좋지만, 우리는 여전히 IDE/편집기에서 코드를 작성한다.우리를 도울 수 있는 도구가 있습니까?유행하는 두 개의 IDE: VS 코드와 WebStorm을 살펴보고 그래프QL과 어떻게 작동하는지 살펴보자.

VS 코드

IDE가 VS 코드인 경우 Apollo의 Apollo GraphQL extension 에 관심이 있을 수 있습니다.그것은 많은 장점을 제공했다. 문법 하이라이트 디스플레이,linting, 자동 완성, 내비게이션 세션 등이다.
플러그인을 설치한 후, 플러그인을 정확하게 설정해야 합니다.이를 위해 프로젝트 루트 디렉터리에 apollo.config.js 파일을 만듭니다.이 파일의 최상위 레벨 client 키를 사용하여 항목을 구성합니다.

// apollo.config.js

module.exports = {
  client: { ... },
};

현재 플러그인에 실행 모드를 제공해야 합니다.Rick 및 Morty API의 경우 원격 모드를 처리하므로 service 의 client 속성에 올바른 모드 URL을 설정해야 합니다.

// apollo.config.js

module.exports = {
  client: {
    service: {
      name: 'Rick and Morty',
      url: 'https://rickandmortyapi.com/graphql',
    },
  },
};

우리는 그것이 어떻게 linting과 자동으로 완성되는지 검사할 수 있다.JS 파일을 만들고 graphql-tag 를 사용하여 질의를 작성합니다.

import gql from 'graphql-tag';

const charactersQuery = gql`
  query CharactersQuery {
    characters {
      results {
        id
        name
      }
    }
  }
`;

새 필드를 추가하기 시작하면 자동 보완 작업이 표시됩니다.

또한 존재하지 않는 필드를 추가하면 오류로 강조 표시됩니다.

같은 기능은 .graphql 또는 .gql 폴더 아래의 /src 파일에 적용됩니다.만약 당신이 그것의 하청에 서류를 포함하고 싶다면, 당신은 set up your client correctly
GraphQL 형식을 정의하려면 플러그인은 로컬 모드와 원격 모드를 자동으로 봉합합니다. 그러면 로컬 검색과 돌연변이가 정확하게 검증됩니다.

네트워크 폭풍

WebStorm IDE의 경우 Jim Kynde MeyerJS GraphQL 플러그인을 사용할 수 있습니다.설치 후에는 GraphQL 모드를 정의하여 구성해야 합니다.이를 위해 프로젝트 베이스 폴더를 마우스 오른쪽 단추로 클릭하고 New -> GraphQL Configuration File 을 선택합니다.
이렇게 하면 프로젝트 루트 디렉터리에 다음과 같은 내용을 포함하는 .graphqlconfig 파일을 만들 수 있습니다

// .graphqlconfig
{
  "name": "Untitled GraphQL Schema",
  "schemaPath": "schema.graphql",
  "extensions": {
    "endpoints": {
      "Default GraphQL Endpoint": {
        "url": "http://localhost:8080/graphql",
        "headers": {
          "user-agent": "JS GraphQL"
        },
        "introspect": false
      }
    }
  }
}

예를 들어 "Remote Rick-n-Morty Schema" 우리의 모델에 이름을 지어주자.pathName 옵션은 스토리지 아키텍처의 파일에 대한 이름을 정의합니다. 변경하지 않습니다.Rick 및 Morty API의 경우 엔드포인트에서 모드를 다운로드해야 합니다.Default GraphQL endpoint의 경우 링크를 localhost 에서 https://rickandmortyapi.com/graphql 로 변경합니다.우리는 이 단점의 어떤 헤더도 필요하지 않기 때문에 이 부분을 안전하게 삭제할 수 있다.
또한 항목을 열 때마다 로컬 GraphQL 모드를 업데이트할 수 있습니다!이를 실현하기 위해 introspect 를 true 로 설정합니다.
현재 프로필은 다음과 같습니다.

// .graphqlconfig

{
  "name": "Remote Rick-n-Morty Schema",
  "schemaPath": "schema.graphql",
  "extensions": {
    "endpoints": {
      "Default GraphQL Endpoint": {
        "url": "https://rickandmortyapi.com/graphql",
        "introspect": true
      }
    }
  }
}

IDE 아래쪽GraphQL 탭을 클릭합니다.GraphQL 모드에 대한 정보가 표시됩니다.하지만 지금까지는 모드가 비어 있습니다!
Default GraphQL Endpoint를 두 번 클릭하고 Get GraphQL Schema from Endpoint (introspection)를 선택합니다.

현재, 모드를 가져온 후에, 우리는 그것을 어떻게 linting과 자동 완성에 사용하는지 검사할 수 있습니다.JS 파일을 만들고 graphql-tag 를 사용하여 질의를 작성합니다.

import gql from 'graphql-tag';

const charactersQuery = gql`
  query CharactersQuery {
    characters {
      results {
        id
        name
      }
    }
  }
`;

쿼리에 새 필드를 추가하려는 경우 플러그인은 권장 목록을 제공합니다.

오류를 입력하면 오류가 강조 표시됩니다.

이러한 기능은 .graphql 파일에도 적용됩니다.불행하게도 이 플러그인은 VS코드 플러그인처럼 확장자 .gql 의 파일을 식별할 수 없습니다.또한 VS 코드 플러그인과 달리 Webstorm one은 로컬 GraphQL 모드와 원격 GraphQL 모드를 봉합하지 않았습니다.

아폴로 개발 도구

우리는 API 노드 자체를 처리하고 편집기에서 GraphQL 관련 코드를 작성할 때 개발자의 체험을 개선하는 방법을 방금 이해했다.그러나 브라우저에서 GraphQL API 상호 작용을 어떻게 디버깅합니까?
GraphQL 클라이언트로 Apollo Client 를 사용하는 경우 크롬이나 Firefox 브라우저에서 멋진 Apollo DevTools 확장을 사용할 수 있습니다.
너는 이 분기기로 무엇을 할 수 있니?브라우저의 모양을 살펴보겠습니다.

GraphQL 옵션 카드: 이것은 사실상 로컬 GraphQL 놀이터입니다. 우리가 본고의 첫 부분에서 묘사한 것과 유사합니다.모드 문서를 읽고 Prisma나 GraphiQL에서처럼 질의를 작성하고 실행할 수 있습니다.

Queries: 여기서 응용 프로그램이 이때 호출된 모든 조회를 볼 수 있습니다. 이 조회를 확인하고, 필요할 때 운동장에서 실행할 수 있습니다

Mutations: 이전 레이블과 동일하지만 GraphQL 돌연변이에 사용

Cache: 내가 보기에 이것이 가장 유용하다.여기에서 Apollo 클라이언트 캐시에 현재 어떤 내용이 있는지, 그리고 이전의 모든 조회와 변화의 결과를 수시로 확인할 수 있습니다.내가 돌연변이 중에 복잡한 업데이트 논리가 있고 캐시에 어떻게 영향을 미치는지 전혀 몰랐을 때, 그것은 정말로 나의 생명을 구했다.

저는 GraphQL을 사용할 때 언급된 모든 도구가 당신의 생활을 더욱 쉽게 할 수 있기를 바랍니다.만약 당신에게 무슨 문제가 있으면 평론에서 저에게 알려주십시오