rick and morty graphQL API를 쿼리하는 방법

22146 단어 javascriptapifetchgraphql

소개



Redwood를 처음 배우기 시작한 이후로 GraphQL에 깊이 빠져들었고 서버와 클라이언트가 포함되고 통합된 완전히 완전한 GraphQL 프로젝트로 시작했기 때문에 흥미로운 실험이었습니다.

GraphQL에 더 깊이 들어가면서 이것이 규칙에 대한 놀라운 예외라는 것을 깨달았습니다. 표준은 모든 사람이 자신의 목적에 맞게 클라이언트 및/또는 서버의 맞춤형 조합을 만드는 것입니다.

개요


  • Query with GraphiQL
  • Query with CURL

  • Query with the Fetch API
  • Create Project
  • HTML Entrypoint
  • Fetch Request


  • Query with GraphQL Request
  • Install Dependencies
  • Add Scripts and Browsers List
  • Initialize GraphQL Request Client


  • Query with Apollo Client
  • Install Apollo Dependencies
  • Initialize 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")
)
    [LeetCode] Scramble String(일반적이지 않은 DP 해결)
    Swift를 통해 사용자 이름과 암호를 입력하는 경고 표시(UIAlertController)

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage