Pokemon Schema를 사용하여 Javascript에서 GraphQL 서버와 통신하기 위한 초보자 가이드
14772 단어 graphqlbeginnersjavascriptshowdev
graphql-zeus를 만들었습니다. 그게 무슨 뜻이야? 기본적으로 Zeus를 GraphQL 스키마로 지정하면 라이브러리가 생성됩니다.재미 있겠다? Zeus가 자동 완성 구문과 같은 자체 GraphQL 쿼리를 제공하기 때문에 GraphQL의 쿼리 언어를 알 필요가 없기 때문에
gql 훨씬 더 재미있습니다.프로젝트 폴더 만들기:
mkdir zeus-tutorial
cd zeus-tutorial
그럼 시작하겠습니다. 먼저 새 npm 패키지를 초기화해야 합니다.
npm init
입력 입력 입력 등을 클릭하십시오.
개발 종속성을 설치합니다.
npm i -D @babel/core @babel/node @babel/preset-env
종속성을 설치합니다.
npm i node-fetch
그런 다음 .babelrc 파일을 만듭니다.
echo '{ "presets": ["@babel/preset-env"] }' >> .babelrc
그런 다음 src 디렉토리를 만듭니다.
mkdir src
index.js 파일 생성touch src/index.js
package.json에 스크립트 추가
{
"scripts": {
"start": "babel-node src/index.js"
},
}
전체 package.json은 다음과 같아야 합니다.
{
"name": "zeustutorial",
"version": "1.0.0",
"description": "",
"main": "main/index.js",
"scripts": {
"start": "babel-node src/index.js"
},
"author": "Aexol <[email protected]> (http://aexol.com)",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.5.5",
"@babel/node": "^7.5.5",
"@babel/preset-env": "^7.5.5"
},
"dependencies": {
"node-fetch": "^2.6.0"
}
}
이제 GraphQL에서 일부 코드를 생성할 때입니다. 계속 설치하십시오
graphql-zeus .설치
graphql-zeusnpm i -g graphql-zeus
포켓몬 스키마에서 파일 생성
zeus https://graphql-pokemon.now.sh/ ./src
만세! ./src 폴더에 생성된 정의 파일이 있어야 합니다.
이제 가서 원하는 편집기를 여십시오. 저는 VSCode를 선호하지만 그것은 여러분에게 달려 있습니다. 그래도 VSCode와 함께 작동한다고 보장할 수 있습니다.
편집기로 패키지 디렉토리를 엽니다. 오픈
src/index.js시리즈의 첫 번째 부분에서는 처음 10개의 포켓몬 이름과 이미지를 로드하는 간단한 쿼리를 작성하고 터미널에 표시합니다.import { Chain } from "./graphql-zeus";
const chain = Chain("https://graphql-pokemon.now.sh");
const run = async () => {
const { pokemons } = await chain.Query({
pokemons: [
{
first: 10
},
{
name: true,
image: true
}
]
});
console.log(pokemons);
return pokemons;
};
run();
zeus에서는 모든 것이 입력되므로 작성하면
chain. Query가 표시되어야 하고 괄호를 열면{} 가능한 모든 쿼리가 표시되어야 합니다.zeus에서는 모든 것이 자동 완성되므로 구문을 배울 필요가 없습니다
gql.그리고 프로젝트 폴더에 있는 상태에서 실행
npm run start
출력에서 처음 10개의 포켓몬을 볼 수 있습니다! 첫 번째 GraphQL 쿼리를 완료한 것을 축하합니다.
지원하다
graphql-zeus 제작을 지원하고 싶다면 방문하세요.graphql 편집기 / graphql-제우스
GraphQL 클라이언트 및 GraphQL 코드 생성기, GraphQL 자동완성 라이브러리 생성 ⚡⚡⚡ 브라우저, nodejs 및 기본 반응용
GraphQL Zeus는 강력한 형식의 쿼리에 대한 자동 완성 기능을 제공하는
JavaScript 또는 TypeScript용 자동 완성 클라이언트 라이브러리를 생성합니다.버전 2.0부터 Zeus ⚡⚡⚡ 매핑 유형 지원 !!!
지원되는 언어:
작동 방식
다음 스키마가 주어진 경우Olympus Cards
목차
How to use
As a CLI
Use generated client example
Spec
특허
MIT
사용하는 방법
graphql zeus의 주요 용도는 CLI여야 합니다.
처럼
…View on GitHub
그리고 별을 남깁니다. 그게 다야.
Reference
이 문제에 관하여(Pokemon Schema를 사용하여 Javascript에서 GraphQL 서버와 통신하기 위한 초보자 가이드), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/graphqleditor/beginners-guide-to-communication-with-graphql-server-in-javascript-with-pokemon-schema-5e1l텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
