JavaScript GraphQL API 학습 사례 5개

많은 회사들이 개발자에게 서비스를 제공하는 REST API에서 GraphQL API를 공개하는 것으로 바뀌었다.Github, Shopify, 그리고 많은 다른 회사들이 바로 이렇게 하는 예이다.그들이 이렇게 하는 이유는 일반적으로 개발자들이 실제 필요로 하는 데이터만 조회하거나 수정하기 쉽도록 하기 위해서이다.그러나 GraphQL API를 사용하는 것은 자체 API를 구축하는 것과 크게 다르다.응용 프로그램을 구축할 때, 당신은 서로 다른 방법과 모델을 깊이 연구해야 합니다. 예를 들어 모델 우선과 코드 우선 (this article 참조), 또는 데이터 원본을 연결해야 합니다.
이 블로그 글에서 나는 5개의GraphQL API 예시를 수집했는데, 이것은 당신이 실제로 시도할 수 있는 프레젠테이션도 있고, 원본 코드가 있는 공공 저장소도 있다.이러한 예시를 통해 GraphQL API를 어떻게 구성하는지 알 수 있을 뿐만 아니라, 이 API를 사용하는 웹 응용 프로그램을 만들어서 GraphQL 전단 도구를 이해할 수 있습니다.우리 뛰어들어가자!

SWAPI GraphQL 패키지


이 프로젝트는 널리 환영받는 Star Wars API (SWAPI)을 포장하여, 나는 세미나에서나 신기술을 테스트하기 위해 원형을 만들고 싶을 때마다 그것을 사용한다.data-loader과 같은 가방을 사용하여 데이터를 효율적으로 얻고 aws-serverless-express과 같은 가방을 서버가 없는 곳에서 저렴하게 운행하는 것은 GraphQL API를 구축하고자 하는 모든 사람들에게 좋은 예이다.이 API의 전체 예는 here에서 찾을 수 있습니다.

graphql / 스와피투


GraphQL 모드 및 서버 패키지 SWAPI.


SWAPI GraphQL 패키지


SWAPI을 둘러싼 포장기
사용:

  • this schema - JavaScript GraphQL 실행 시

  • graphql-js- 통합 및 캐시 리셋에 사용됩니다.

  • DataLoader- GraphQL에 대한 HTTP 액세스를 제공합니다.

  • express-graphql-awslambda에서 express-graphql을 사용합니다.

  • aws-serverless-express- 이 GraphQL 서버를 쉽게 탐색할 수 있습니다.
  • GraphiQL으로 전화하십시오.
    http://graphql.org/swapi-graphql

    개시하다


    설치 종속성 사용
    yarn

    스와피 포장지

    The SWAPI wrapper is in ./swapi. It can be tested with:

    yarn test

    로컬 서버

    A local express server is in ./server. It can be run with:

    yarn build # Only if you changed something
    yarn start

    A GraphiQL instance will be opened at http://localhost:8080/ (or similar; the actual port number will be printed to the console) to explore the API.




    반응 핀란드

    Conferences aren't only a good place to learn at, they can also teach you new stuff in other ways. The organizers of React Finland, have made the code of the API for their conference website available online. As they also organize a GraphQL conference, they know how to setup a GraphQL API. You can inspect their API here, and already start learning from a conference before even visiting one!

    반응 핀란드 / graphql api

    회의의 GraphQLAPI.

    TOSKA 세션용 GraphQL API

    Simple GraphQL API for our conferences:

    To see the query API:

    1. NODE_ENV="development" npm start
    2. http://localhost:3000/graphql-2018 or http://localhost:3000/calendar-2018.ics (calendar)

    화상 처리

    The images are pushed to Cloudinary and it's used as our image CDN. Remember to set .env for local development if you want to use images:

    .env

    CLOUDINARY_CLOUD_NAME=react-finland
    CLOUDINARY_API_KEY=<get from Cloudinary account>
    CLOUDINARY_API_SECRET=<get from Cloudinary account>
    
    API 호스트에 동일한 설정을 설정해야 합니다.

    You can access images through http://localhost:3000/graphql-2018/images. Example: http://localhost:3000/graphql-2018/images/ken.jpg.


    그물갈고리


    Heroku에서 Netlify로


    API는 웹 훅을 사용하여 API가 변경될 때 구축할 수 있도록 사이트에 연결되었습니다.
  • heroku config:set REBUILD_SITES=<Netlify urls separate by comma go here> -a react-finland-api
  • Remember to run the server in production mode. That will enable site rebuilding hook!



    GitHub 보기 예술적


    무료 온라인 에서 인터넷과 모바일 기기에서 예술품을 발견하고 수집할 수 있습니다.이외에도 예술 애호가들의 핫한 사이트로 GraphQL API를 오픈해 응용 프로그램을 데이터로 채웠다.임시 저장 데이터에 대한 API Artsy platform을 시험적으로 사용해 보십시오.이 프로젝트의 소스 코드는 프로덕션 레벨 GraphQL API를 설정하는 방법을 보여줍니다.💪.

    여기/ 예술적


    Artsy의 GraphQL API


    형이상학


    형이상학은 metaphysics 과 호환되는 API로 각종
    예술 API.너는 GraphQL을 선택할 수 있다
    우리의 등단 API를 겨냥하다.
    그것은 express, express-graphqlgraphql 위에 세워졌다.graphiql모래상자를 제공하여 일을 진행하다.
    현재, 그것은 이미 세계 각지의 생산에서 사용되고 있다
    try it here
    Artsy.net

    Meta Artsy iOS 애플리케이션


  • 시: 생산

  • CI/구축: ,artsy/metaphysics#master으로 통합된 PRs는 자동으로 준비 상태로 배치됩니다.staging에서 release까지의 PRs는 자동으로 프로덕션에 배치됩니다.CircleCi

  • 제작:
  • Start a deploy...
  • Endpoint
  • Kubernetes deployment dashboard
  • Datadog Monitoring - Overview
  • Datadog Monitoring - GraphQL Queries
  • Datadog Monitoring - GraphQL Resolver
  • Datadog Monitoring - Express
  • Datadog Monitoring - HTTP Requests
  • Datadog Monitoring - Cache
  • DataDog Monitoring - ELB
  • DataDog Monitoring - NodeJS VM / Custom Metrics
  • Sentry error reporting
  • Papertrail logs

  • 등단:
  • When Disaster Strikes
  • Endpoint
  • Kubernetes deployment dashboard

  • Datadog Monitoring - GraphQL Queries
  • Datadog Monitoring

    GitHub 보기 SpaceX 육상 API


    이 API를 통해 스페이스X에서 제공하는 모든 공공 데이터를 탐색하고 GraphQL을 사용하여 조회할 수 있습니다.이 GraphQL API 인터페이스를 방문하면 이전 발사, 스페이스X 로켓 등에 대한 정보를 확인할 수 있습니다.이 프로젝트는 웹 응용 프로그램을 연결하는 데 도움을 주는 예시도 제공합니다.Apollo의 React 애플리케이션 예제 중 하나는 here에서 찾을 수 있습니다.이게 얼마나 멋있어요?

    코드 샌드박스/ spacexland


    🚀 모든 로켓, 발사 및 기타 스페이스X 데이터를 탐색하기 위한 GraphQL 및 REST API


    SpaceX 육상 API


    api


    GraphQL 및 REST API 모두 탐색🚀, 다른 스페이스X 데이터 발사!


    사용
    👩‍💻기술자👨‍🏫
    👴& 기술자 없음👩‍🌾
    🌏세계 각지에서 오다🌖
    💻어떤 설비를 써도📱
    그리고
    👩‍🚀몽상가👨‍🚀

    사용법


    모든 스페이스X 데이터에서 가장 중요한✨사용자와 개발자 체험!
    ✋ 설정/권한 부여
    🤗 완전히 업데이트된 문서
    😍 웹 기반 상호작용
    확인란을 클릭하면 사용 가능한 데이터를 검토하고 필요한 데이터를 정확하게 정의할 수 있습니다.
    하나의 호출로 여러 요청을 교체하여 API와 상호작용하는 새로운 방법을 발견합니다!
    💜GraphQL🔗
    https://api.spacex.land/graphql
    만약 당신이 확실히 구파 API 애호가라면, 각자의 GraphQL 모델을 바탕으로 자동으로 생성된 REST API를 놓치지 마세요!
    🖤쉬다🔗
    https://api.spacex.land/rest

    멋진 디자인🚀 동서


    창조와 공유는 결코 쉬운 일이 아니다💯당신이 가장 좋아하는 FE의 웹 응용 프로그램 프로젝트를 사용하십시오...

    GitHub 보기 릭과 모티


    이 목록의 마지막 API는 구조가 간단하기 때문에GraphQL 초보자들에게도 좋은 API로 인기 있는 텔레비전 프로그램 을 특색으로 한다.GraphQL과 REST API에 표시할 모든 데이터를 공개하기 때문에 이 두 가지 기술을 쉽게 비교할 수 있습니다.이 프로젝트는 Rick and Morty에 의해 만들어졌으며 Axel Fuhrmann에서 GraphQL 단점을 볼 수 있습니다.릭과 모티의 모든 것을 이해할 준비를 해라!

    웹 주소/ 네?


    Rick 및 Morty API


    rick-and-morty-api

    Rick 및 Morty API


    Hey, did you ever want to hold a terry fold I got one right here, grab my terry flap.


    (또는 ShlaAPI)은 텔레비전 프로그램 The Rick and Morty API을 바탕으로 하는 RESTful과GraphQL API이다.너는 수백 개의 캐릭터, 이미지, 위치, 드라마의 데이터를 방문할 것이다.
    시작하려면 Rick and Morty의 문서를 보거나 계속 읽으십시오.)
    사이트 코드 rickandmortyapi.com을 보실 수 있습니다.

    컨텐트


  • here
  • Introduction
  • Rate limit
  • GraphQL
  • REST

  • Info and pagination
  • Character
  • Character schema
  • Get all characters
  • Get a single character
  • Get multiple characters

  • Filter characters
  • Location
  • Location schema
  • Get all locations
  • Get a single location
  • Get multiple locations

  • Filter locations
  • Episode
  • Episode schema
  • Get all episodes
  • Get a single episode
  • Get multiple episodes

  • Filter episodes
  • Libraries
  • Elixir
  • Go
  • GraphQL
  • JavaScript
  • .NET
  • Python
  • R
  • Ruby
  • 소개하다.


    이거는...
    Run the API locally
    이 목록에 어떤 항목이 없습니까?댓글에 어떤 피드백도 남기는 것을 잊지 말라고 알려주세요.😄!

    좋은 웹페이지 즐겨찾기