rick and morty graphQL API를 쿼리하는 방법
22146 단어 javascriptapifetchgraphql
소개
Redwood를 처음 배우기 시작한 이후로 GraphQL에 깊이 빠져들었고 서버와 클라이언트가 포함되고 통합된 완전히 완전한 GraphQL 프로젝트로 시작했기 때문에 흥미로운 실험이었습니다.
GraphQL에 더 깊이 들어가면서 이것이 규칙에 대한 놀라운 예외라는 것을 깨달았습니다. 표준은 모든 사람이 자신의 목적에 맞게 클라이언트 및/또는 서버의 맞춤형 조합을 만드는 것입니다.
개요
Query with the Fetch API
Query with GraphQL Request
Query with Apollo Client
GraphiQL을 사용한 쿼리
전체 기본 사항으로 가져가려면 실제로 GraphQL 쿼리를 만드는 것으로 시작하고 싶을 것입니다. 예를 들어 다음link으로 이동하면 다음과 같이 표시됩니다.
우리는 쿼리를 만들고 싶으므로
query
, 특히 그들의 characters
에 대해 다음 name
를 입력합니다(results
배열은 이 특정 GraphQL 스키마의 특징입니다).{
characters {
results {
name
}
}
}
이름 배열을 반환합니다.
Abradolf Lincler를 조심하세요. 그는 나쁜 친구입니다.
CURL을 사용한 쿼리
명령줄에서 이 동일한 쿼리를 실행하려면 curl을 사용할 수 있습니다. GraphQL 엔드포인트,
Content-Type
가 application/json
임을 지정하는 헤더 및 쿼리와 함께 data-binary
옵션을 포함합니다.curl 'https://rickandmortyapi.com/graphql' \
-H 'Content-Type: application/json' \
-d '{"query":"{ characters { results { name } } }"}'
Fetch API를 사용한 쿼리
다음 계층은
fetch
요청을 합니다.프로젝트 만들기
각각
public
및 src
파일을 포함하는 index.html
및 index.js
디렉토리로 새 빈 디렉토리를 만듭니다.mkdir rick-and-morty-graphql
cd rick-and-morty-graphql
mkdir public src
touch public/index.html src/index.js
HTML 진입점
html
에 대한 script
태그가 있는 다음 index.js
상용구를 입력합니다.<!-- public/index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>How to Query the Rick and Morty GraphQL API</title>
<script src="../src/index.js" defer></script>
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<h1>Fetch API</h1>
<div id="root"></div>
</body>
</html>
가져오기 요청
다음을 포함하여
fetch
에 https://rickandmortyapi.com/graphql
요청을 합니다.POST
의 Content-Type
에 대한 application/json
요청characters
쿼리는 name
및 stringified에 포함된 body
를 요청합니다.results
가 console.log()
로 표시됨// src/index.js
fetch('https://rickandmortyapi.com/graphql', {
method: 'POST',
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify({
query: `
query getCharacters {
characters {
results {
name
}
}
}
`
})
})
.then(res => res.json())
.then(data => console.log(data.data))
Live Server과 같은 도구를 사용하여
index.html
를 엽니다.쿼리 결과를 실제로 페이지에 표시하려면 최종
.then
함수를 다음과 같이 변경합니다.// src/index.js
.then(data => {
document.querySelector('#root').innerHTML = `
<p>${JSON.stringify(data.data.characters.results)}</p>
`
})
종속성을 설치하거나
package.json
파일을 생성할 필요가 없습니다. 그러나 광범위한 장단점을 탐색하는 많은 GraphQL 클라이언트 라이브러리가 있습니다. 사용 사례에는 일반적인 GraphQL 기능에 대한 간결한 추상화 제공 또는 캐싱과 같은 추가 기능 추가가 포함될 수 있습니다.GraphQL 요청으로 쿼리
graphql-request은 노드 및 브라우저를 지원하는 최소 GraphQL 클라이언트입니다.
종속성 설치
yarn init -y
yarn add graphql graphql-request react react-dom react-scripts
스크립트 및 브라우저 목록 추가
{
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
GraphQL 요청 클라이언트 초기화
// src/index.js
import React from "react"
import { render } from "react-dom"
import { GraphQLClient, gql } from 'graphql-request'
async function main() {
const endpoint = 'https://rickandmortyapi.com/graphql'
const graphQLClient = new GraphQLClient(endpoint)
const GET_CHARACTERS_QUERY = gql`
query getCharacters {
characters {
results {
name
}
}
}
`
const data = await graphQLClient.request(GET_CHARACTERS_QUERY)
console.log(JSON.stringify(data, undefined, 2))
}
main()
render(
<React.StrictMode>
<h1>graphql-request</h1>
</React.StrictMode>,
document.getElementById("root")
)
Apollo 클라이언트로 쿼리
Apollo Client은 React 및 기타 널리 사용되는 프런트엔드 라이브러리/프레임워크와 통합된 캐싱 GraphQL 클라이언트입니다.
Apollo 종속성 설치
yarn add @apollo/react-hooks apollo-boost
Apollo 클라이언트 초기화
// src/index.js
import React from "react"
import { render } from "react-dom"
import { ApolloProvider } from "@apollo/react-hooks"
import ApolloClient from "apollo-boost"
import gql from "graphql-tag"
import { useQuery } from "@apollo/react-hooks"
export const client = new ApolloClient({
uri: 'https://rickandmortyapi.com/graphql'
})
export const GET_CHARACTERS_QUERY = gql`
query getCharacters {
characters {
results {
name
}
}
}
`
function Characters() {
const { data, loading, error } = useQuery(GET_CHARACTERS_QUERY)
const characters = data?.characters
if (loading) return <p>Almost there...</p>
if (error) return <p>{error.message}</p>
return (
<>
<pre>
{JSON.stringify(characters, null, " ")}
</pre>
</>
)
}
render(
<React.StrictMode>
<ApolloProvider client={client}>
<h1>Apollo Client</h1>
<Characters />
</ApolloProvider>
</React.StrictMode>,
document.getElementById("root")
)
Reference
이 문제에 관하여(rick and morty graphQL API를 쿼리하는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/ajcwebdev/how-to-query-the-rick-and-morty-graphql-api-mo2텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)