Gatsby와 함께 GraphQL 놀이터 사용

인기있는 React 정적 사이트 생성기 인 Gatsby는 데이터 소싱, 빌딩 및 배포를 간소화하여 웹 사이트 생성을 단순화합니다. 프로세스는 일반적으로 다음과 같습니다.

1. 데이터 수집 : 다양한 소스 (CMS, Markdown, 데이터베이스 등)에서 데이터 수집.
2. 빌드 프로세스 (GraphQL 구동) : GraphQL을 사용하여 웹 사이트 생성을위한 데이터를 관리하고 처리합니다.
3. 배포 : 정적 사이트를 호스팅 플랫폼 (NetLify, Vercel 등)에 게시합니다.

이 기사는 특히 Gatsby의 Default Graphiql GraphQL IDE를 기능이 풍부한 GraphQL Playground로 바꾸어 빌드 프로세스 향상에 중점을 둡니다.

Graphiql vs. GraphQL 놀이터

GraphIQL은 Gatsby의 기본 IDE 역할을하지만 GraphQL Playground는 몇 가지 장점을 제공합니다.

• 향상된 스키마 문서 : 대화식, 다중 열 스키마 문서를 제공합니다.
• 자동 업데이트 : 스키마를 자동으로 다시로드합니다.
• 구독 지원 : GraphQL 가입을 지원합니다.
• 향상된 사용자 경험 : 쿼리 기록, HTTP 헤더 구성, 탭 및 테마 확장 성과 같은 기능이 포함되어 있습니다.

그들 사이의 선택은 프로젝트의 요구에 달려 있습니다. 이 튜토리얼은 고급 기능으로 인해 GraphQL Playground를 사용하는 것을 보여줍니다.

Gatsby와 함께 GraphQL 놀이터 설정

이 가이드는 새로운 Gatsby 프로젝트를 설정하고 GraphQL Playground를 통합합니다.

1. Gatsby Cli 설치 :

 NPM 설치 -G 개츠비 클리

2. 새로운 개츠비 프로젝트 만들기 :

 개츠비 뉴 개츠비-플레이 그라운드
CD 개츠비-플레이 그라운드

3. 개발 서버 시작 :

 개츠비가 개발

http://localhost:8000/__graphql 에서 기본 그래픽 IDE에 액세스하십시오. GraphQL Playground 데스크탑 앱이 존재하지만이 자습서는 직접 통합하는 실습 접근 방식을 보여줍니다.

4. 환경 변수 구성 :

환경 변수는 다양한 환경 (개발, 생산)에서 사용자 정의를 허용합니다. 프로젝트 루트에서 .env.development 파일 생성 :

 <code>GATSBY_GRAPHQL_IDE=playground</code>

5. JavaScript의 환경 변수 관리 :

Gatsby의 환경 변수는 빌드 시간 및 node.js 런타임 중에 액세스 할 수 있습니다. 런타임에 동적으로 사용하려면 env-cmd 설치하십시오.

 원사 추가 ENV-CMD-Dev // 또는 NPM 설치 ---save-dev env-cmd

package.json 에서 "develop" 스크립트를 수정하십시오.

 "개발": "ENV-CMD-파일 .env.development-Fallback Gatsby 개발"

이를 통해 env-cmd .env.development 에서 변수를로드하도록 지시하거나 현재 존재하는 경우 .env로 .env 로 변수.

6. 서버 다시 시작 :

개발 서버를 다시 시작하십시오.

 원사 시작 // 또는 npm 실행이 개발됩니다

브라우저에서 http://localhost:8000/__graphql 새로 고치십시오. 이제 GraphQL Playground를 볼 수 있습니다!

결론

이 튜토리얼은 Gatsby 프로젝트에서 Graphiql에서 GraphQL Playground로 전환하는 방법을 보여줍니다. 전환 결정은 특정 요구 사항에 따라 다릅니다.

추가 리소스 :

• 개츠비 JS 문서
• GraphQL 놀이터 문서
• ENV-CMD 문서

위 내용은 Gatsby와 함께 GraphQL 놀이터 사용의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!