분류 Reactjs

React + Apollo Tutorial

컨텐츠 정보

  • 조회 476 (작성일 )

본문

소개 


참고 :이 튜토리얼의 최종 프로젝트는 GitHub에서 찾을 수 있습니다. 다음 장의 과정에서 길을 잃을 때마다 항상 참조로 사용할 수 있습니다. 

또한 각 코드 블록에는 파일 이름이 주석 처리되어 있습니다. 이 주석은 GitHub의 해당 파일에 직접 연결되므로 코드를 넣을 위치와 최종 결과가 어떻게 보이는지 명확하게 확인할 수 있습니다.


원본 : https://www.howtographql.com/react-apollo/0-introduction/ 


개요 


이전 튜토리얼에서는 GraphQL의 주요 개념과 이점에 대해 배웠습니다. 이제 손을 더럽히고 실제 프로젝트로 시작할 때입니다!


간단한 Hackernews 복제본을 작성합니다. 앱의 기능 목록은 다음과 같습니다.

  • 링크 목록 표시
  • 링크리스트 검색
  • 사용자는 인증 할 수 있습니다
  • 인증 된 사용자는 새 링크를 만들 수 있습니다
  • 인증 된 사용자는 링크를 투표 할 수 있습니다 (링크 및 사용자 당 하나의 투표)
  • 다른 사용자가 링크를 투표하거나 새 링크를 만들 때 실시간 업데이트

이 트랙에서는 다음과 같은 기술을 사용하여 앱을 빌드 합니다.

  • 프론트 엔드 :
    React : 사용자 인터페이스 구축을 위한 프론트 엔드 프레임 워크
    Apollo Client 2.1 : 생산 준비 완료, 캐싱 GraphQL 클라이언트
  • 백엔드 :
    graphql-yoga : 손쉬운 설정, 성능 및 뛰어난 개발자 경험에 중점을 둔 완벽한 기능을 갖춘 GraphQL 서버
    Prisma : 데이터베이스를 GraphQL API로 바꾸는 오픈 소스 GraphQL API 레이어

필요한 모든 빌드 구성이 이미 설정된 빈 프로젝트를 제공하는 널리 사용되는 명령 줄 도구 인 create-react-app를 사용하여 React 프로젝트를 작성합니다.


왜 GraphQL 클라이언트인가? 


GraphQL 파트의 Clients 섹션에서 GraphQL 클라이언트의 책임을 더 높은 수준에서 이미 다루었으므로 이제는 좀 더 구체적으로 설명해야 합니다.


요컨대, 작성 중인 앱에 대해 반복적이고 독립적인 작업에는 GraphQL 클라이언트를 사용해야 합니다. 예를 들어, 하위 수준의 네트워킹 세부 정보에 대해 걱정하거나 로컬 캐시를 유지 관리 할 필요 없이 쿼리 및 변이를 보낼 수 있습니다. 이것은 GraphQL 서버와 통신하는 모든 프론트 엔드 애플리케이션에서 원하는 기능입니다. 놀라운 GraphQL 클라이언트 중 하나를 사용할 수 있을 때 직접 구축해야 하는 이유는 무엇입니까?


사용 가능한 GraphQL 클라이언트 라이브러리가 몇 가지 있으며,이 라이브러리는 진행 중인 GraphQL 작업을 다양하게 제어 할 수 있으며 다양한 이점과 단점이 있습니다. 매우 간단한 사용 사례 (예 : 스크립트 작성)의 경우 graphql-request가 이미 충분할 수 있습니다. 같은 라이브러리는 GraphQL API에 HTTP 요청을 보내기 위한 얇은 계층입니다.


캐싱, 낙관적 UI 업데이트 및 기타 편리한 기능을 활용하려는 다소 큰 응용 프로그램을 작성하고 있을 가능성이 있습니다. 이 경우 모든 GraphQL 작업의 수명주기를 처리하는 풀 GraphQL 클라이언트를 사용하고 싶을 것입니다. Apollo Client, Relayurql 중에서 선택할 수 있습니다.


Apollo vs Relay vs urql 


프론트 엔드에서 GraphQL을 시작하는 사람들로부터 가장 일반적인 질문은 어떤 GraphQL 클라이언트를 사용해야 하는지 입니다. 다음 프로젝트에 적합한 고객을 결정하는 데 도움이 되는 몇 가지 힌트를 제공합니다.


Relay는 2015 년에 GraphQL과 함께 오픈 소스로 만든 Facebook의 자체 GraphQL 클라이언트입니다. 2012 년에 GraphQL을 사용하기 시작한 이후 Facebook이 수집 한 모든 학습 내용을 통합했습니다. Relay는 성능에 크게 최적화되어 있으며 가능한 경우 네트워크 트래픽을 줄이려고 합니다. 흥미로운 사실은 릴레이 자체가 실제로 데이터 로딩 책임과 결합 된 라우팅 프레임 워크로 시작되었다는 것입니다. 따라서 GraphQL API와 인터페이스하기 위해 JavaScript 앱에서 사용할 수 있는 강력한 데이터 관리 솔루션으로 발전했습니다.


Relay의 성능 이점은 주목할만한 학습 곡선을 희생합니다. 릴레이는 매우 복잡한 프레임 워크이며 모든 비트와 조각을 이해하려면 실제로 시간이 필요합니다. 이러한 측면에서 전반적인 상황은 Relay Modern이라는 1.0 버전의 출시로 개선되었지만 GraphQL을 시작하기 위해 무언가를 찾고 있다면 Relay가 아직 올바른 선택이 아닐 수도 있습니다.


Apollo Client는 이해하기 쉽고 유연하며 강력한 GraphQL 클라이언트를 구축하기 위한 커뮤니티 중심의 노력입니다. Apollo는 사람들이 웹 및 모바일 애플리케이션을 구축하는 데 사용하는 모든 주요 개발 플랫폼마다 하나의 라이브러리를 구축하려는 목표를 가지고 있습니다. 현재 React, Angular, Ember 또는 Vue와 같은 인기 있는 프레임 워크뿐만 아니라 초기 버전의 iOSAndroid 클라이언트에 대한 바인딩이 있는 JavaScript 클라이언트가 있습니다. Apollo는 프로덕션 환경에 적합하며 캐싱, 낙관적 UI, 구독 지원 등과 같은 편리한 기능을 제공합니다.


urql은 GraphQL 클라이언트에 대한 보다 동적인 접근 방식이며 Relay 및 Apollo에 비해 새로운 프로젝트입니다. React에 중점을 둔 반면 핵심은 단순성과 확장성에 중점을 둡니다. 효율적인 GraphQL 클라이언트를 구축하기 위한 기본 요소가 제공되지만 "Exchanges"를 통해 GraphQL 작업 및 결과를 처리하는 방법을 완전히 제어 할 수 있습니다. 자사 교환 @ urql / exchange-graphcache와 함께 기본적으로 Apollo와 기능은 동일하지만 설치 공간이 작고 API에 중점을 둡니다.


시작하기 


이것은 프론트 엔드 트랙이므로 백엔드를 구현하는 데 시간을 소비하지 않습니다. 대신 노드 학습서에서 서버를 사용합니다.


React 애플리케이션을 만든 후에는 백엔드에 필요한 코드를 가져옵니다.


참고 :이 튜토리얼의 최종 프로젝트는 GitHub에서 찾을 수 있습니다. 다음 장의 과정에서 길을 잃을 때마다 항상 참조로 사용할 수 있습니다. 또한 각 코드 블록에는 파일 이름이 주석 처리되어 있습니다. 이 주석은 GitHub의 해당 파일에 직접 연결되므로 코드를 넣을 위치와 최종 결과가 어떻게 보이는지 명확하게 확인할 수 있습니다. 


Frontend 


앱 만들기 


먼저 React 프로젝트를 만들 것입니다! 처음에 언급 했듯이 create-react-app를 사용합니다.


아직 yarn를 사용하지 않은 경우 create-react-app를 설치해야 합니다.


yarn global add create-react-app


참고 :이 학습서는 종속성 관리를 위해 Yarn을 사용합니다. 설치 방법에 대한 지침을 여기에서 찾으십시오. npm을 사용하려면 해당 명령을 실행 하면됩니다. 


다음으로 이를 사용하여 React 애플리케이션을 부트 스트랩 할 수 있습니다.


create-react-app hackernews-react-apollo


기본 구성 설정이 모두 포함 된 hackernews-react-apollo라는 새 디렉토리가 생성됩니다.


디렉토리를 탐색하고 앱을 시작하여 모든 것이 작동하는지 확인하십시오.


cd hackernews-react-apollo
yarn start


브라우저가 열리고 앱이 실행중인 http : // localhost : 3000으로 이동합니다. 모든 것이 잘 진행되면 다음을 볼 수 있습니다.


Yujwwi6.png 

프로젝트 구조를 개선하려면 src 폴더 안에 두 개의 디렉토리를 작성하십시오. 첫 번째는 components라고 하며 모든 React 컴포넌트를 보유합니다. 두 번째 styles을 사용하십시오.이 스타일은 사용할 모든 CSS 파일 용입니다.


App.js는 구성 요소이므로 components로 옮깁니다. App.css 및 index.css에는 스타일이 포함되어 있으므로 styles로 이동하십시오. 또한 index.js와 App.js에서 이러한 파일에 대한 참조를 적절히 변경해야 합니다.


https://github.com/howtographql/react-apollo/blob/master/src/index.js 


import React from 'react'
import ReactDOM from 'react-dom'
import './styles/index.css'
import App from './components/App'


https://github.com/howtographql/react-apollo/blob/master/src/components/App.js 


import React, { Component } from 'react';
import logo from '../logo.svg';
import '../styles/App.css';


프로젝트 구조는 이제 다음과 같아야 합니다.


.
├── README.md
├── node_modules
├── package.json
├── public
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json
├── src
│   ├── App.test.js
│   ├── components
│   │   └── App.js
│   ├── index.js
│   ├── logo.svg
│   ├── serviceWorker.js
│   └── styles
│       ├── App.css
│       └── index.css
└── yarn.lock


스타일링 준비 


이 튜토리얼은 GraphQL의 개념과 React 애플리케이션 내에서 이를 사용할 수 있는 방법에 관한 것이므로 스타일링에 가장 적은 시간을 투자하고 싶습니다. 이 프로젝트에서 CSS 사용을 줄이려면 여러 CSS 클래스를 제공하는 Tachyons 라이브러리를 사용합니다.


public/index.html을 열고 Tachyons를 가져 오는 두 개의 기존 태그 바로 아래에 세 번째 링크 태그를 추가하십시오.


https://github.com/howtographql/react-apollo/blob/master/public/index.html 


<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<link rel="stylesheet" href="https://unpkg.com/tachyons@4.2.1/css/tachyons.min.css"/>


우리는 여전히 여기저기서 좀 더 사용자 정의 스타일을 원하기 때문에 프로젝트에 포함해야 할 스타일을 준비했습니다.


index.css를 열고 내용을 다음으로 바꿉니다.


https://github.com/howtographql/react-apollo/blob/master/src/styles/index.css 


body {
  margin: 0;
  padding: 0;
  font-family: Verdana, Geneva, sans-serif;
}

input {
  max-width: 500px;
}

.gray {
  color: #828282;
}

.orange {
  background-color: #ff6600;
}

.background-gray {
  background-color: rgb(246,246,239);
}

.f11 {
  font-size: 11px;
}

.w85 {
  width: 85%;
}

.button {
  font-family: monospace;
  font-size: 10pt;
  color: black;
  background-color: buttonface;
  text-align: center;
  padding: 2px 6px 3px;
  border-width: 2px;
  border-style: outset;
  border-color: buttonface;
  cursor: pointer;
  max-width: 250px;
}


Apollo 클라이언트 설치 


다음으로 여러 패키지로 제공되는 Apollo Client (및 해당 React 바인딩)의 기능을 가져와야 합니다.


yarn add apollo-boost react-apollo graphql


방금 설치 한 패키지에 대한 개요는 다음과 같습니다.

  • apollo-boost는 Apollo Client로 작업 할 때 필요한 여러 패키지를 번들로 제공하여 편의성을 제공합니다.
    -, apollo-client : 모든 마술이 일어나는 곳
    -, apollo-cache-inmemory : 권장 캐시
    -, apollo-link-http : 원격 데이터 가져 오기를 위한 Apollo Link
    -, apollo-link-error : 오류 처리를 위한 아폴로 링크
    -, apollo-link-state : 로컬 상태 관리를 위한 아폴로 링크
    -, graphql-tag : 쿼리 및 변이에 대한 gql 함수를 내 보냅니다.
  • react-apollo에는 Apollo Client를 React와 함께 사용하기 위한 바인딩이 포함되어 있습니다.
  • graphql에는 GraphQL의 Facebook 참조 구현이 포함되어 있습니다. Apollo Client는 일부 기능도 사용합니다.

이제 코드를 작성할 준비가 되었습니다! ?


ApolloClient 구성 


Apollo는 모든 하위 레벨 네트워킹 로직을 추상화하고 GraphQL 서버에 대한 훌륭한 인터페이스를 제공합니다. REST API를 사용하는 것과는 달리 더 이상 고유 한 HTTP 요청을 구성 할 필요가 없습니다. 대신 쿼리와 변이를 작성하고 ApolloClient 인스턴스를 사용하여 전송할 수 있습니다.


Apollo를 사용할 때 가장 먼저 해야 할 일은 ApolloClient 인스턴스를 구성하는 것입니다. 네트워크 연결을 처리 할 수 ​​있도록 GraphQL API의 엔드 포인트를 알아야 합니다.


src / index.js를 열고 내용을 다음으로 바꿉니다.


https://github.com/howtographql/react-apollo/blob/master/src/index.js 


import React from 'react'
import ReactDOM from 'react-dom'
import './styles/index.css'
import App from './components/App'
import * as serviceWorker from './serviceWorker';

// 1
import { ApolloProvider } from 'react-apollo'
import { ApolloClient } from 'apollo-client'
import { createHttpLink } from 'apollo-link-http'
import { InMemoryCache } from 'apollo-cache-inmemory'


// 2
const httpLink = createHttpLink({
  uri: 'http://localhost:4000'
})

// 3
const client = new ApolloClient({
  link: httpLink,
  cache: new InMemoryCache()
})

// 4
ReactDOM.render(
  <ApolloProvider client={client}>
    <App />
  </ApolloProvider>,
  document.getElementById('root')
)
serviceWorker.unregister();


참고 : create-react-app에 의해 생성 된 프로젝트는 문자열에 세미콜론과 큰 따옴표를 사용합니다. 

추가하려는 모든 코드는 세미콜론을 사용하지 않고 대부분 작은 따옴표를 사용합니다. 

또한 기존 세미콜론을 자유롭게 삭제하고 큰 따옴표를 작은 따옴표로 바꿀 수 있습니다 ? 


해당 코드 스니펫에서 무슨 일이 일어나고 있는지 이해하려고 합시다.

  1. 설치된 패키지에서 필수 종속성을 가져오고 있습니다.
  2. 여기에서 ApolloClient 인스턴스를 GraphQL API와 연결하는 httpLink를 작성하면 GraphQL 서버가 http://localhost:4000에서 실행됩니다.
  3. 이제 httpLink와 InMemoryCache의 새 인스턴스를 전달하여 ApolloClient를 인스턴스화 하십시오.
  4. 마지막으로 React App의 루트 구성 요소를 렌더링 합니다. App은 client를 prop으로 전달하는 상위 구성 요소인 ApolloProvider로 래핑됩니다.

이제 모든 데이터를 앱에 로드하기 시작했습니다. ?


Backend 


서버 코드 다운로드 


위에서 언급 한 바와 같이,이 학습서의 백엔드에는 노드 학습서의 최종 프로젝트를 사용하기만 하면 됩니다.


터미널에서 hackernews-react-apollo 디렉토리로 이동하여 다음 명령을 실행하십시오.


curl https://codeload.github.com/howtographql/react-apollo/tar.gz/starter | tar -xz --strip=1 react-apollo-starter/server

참고 : Windows를 사용하는 경우 curl과 같은 명령의 잠재적 인 문제를 피하기 위해 Git CLI를 설치할 수 있습니다. 


프로젝트 내부에 백엔드에 필요한 모든 코드가 들어있는 server라는 새 디렉토리가 있습니다.


서버를 시작하기 전에 주요 구성 요소를 빠르게 이해하겠습니다.

  • prisma :이 디렉토리에는 Prisma 설정과 관련된 모든 파일이 들어 있습니다. Prisma 클라이언트는 GraphQL 리졸버 (ORM과 유사)의 데이터베이스에 액세스하는 데 사용됩니다.
    -, prisma.yml은 Prisma 프로젝트의 루트 구성 파일입니다.
    -, datamodel.prisma는 GraphQL Schema Definition Language (SDL)에서 데이터 모델을 정의합니다. Prisma를 사용할 때 데이터 모델은 데이터베이스 스키마를 설명하는 데 사용됩니다.
  • src :이 디렉토리에는 GraphQL 서버의 소스 파일이 있습니다.
    -, schema.graphql에는 응용 프로그램 스키마가 포함되어 있습니다. 응용 프로그램 스키마는 프런트 엔드에서 보낼 수 있는 GraphQL 작업을 정의합니다. 이 파일을 조금 더 자세히 살펴 보겠습니다.
    -, generated/prisma-client에는 자동 생성 된 Prisma 클라이언트, 유형 안전 데이터베이스 액세스 라이브러리 (ORM과 유사)가 포함되어 있습니다.
    -, 리졸버는 애플리케이션 스키마에 정의 된 조작에 대한 리졸버 함수를 포함합니다.
    -, index.js는 GraphQL 서버의 진입 점입니다.

언급 된 파일에서 server/src/schema.graphql에 정의 된 응용 프로그램 스키마만 프론트 엔드 개발자로서 관련이 있습니다. 이 파일에는 프론트 엔드 앱에서 보낼 수 있는 모든 작업 (쿼리, 변이 및 구독)을 정의하는 GraphQL 스키마가 포함되어 있습니다.


다음과 같은 모습입니다.


https://github.com/howtographql/react-apollo/blob/master/server/src/schema.graphql 


# import Link, Vote, LinkSubscriptionPayload, VoteSubscriptionPayload from "./generated/prisma.graphql"

type Query {
  feed(filter: String, skip: Int, first: Int, orderBy: LinkOrderByInput): Feed!
}

type Feed {
  links: [Link!]!
  count: Int!
}

type Mutation {
  post(url: String!, description: String!): Link!
  signup(email: String!, password: String!, name: String!): AuthPayload
  login(email: String!, password: String!): AuthPayload
  vote(linkId: ID!): Vote
}

type AuthPayload {
  token: String
  user: User
}

type User {
  id: ID!
  name: String!
  email: String!
}

type Subscription {
  newLink: LinkSubscriptionPayload
  newVote: VoteSubscriptionPayload
}


이 스키마는 다음 작업을 허용합니다.

  • 쿼리 :
    -, feed : 백엔드에서 모든 링크를 검색합니다.이 쿼리는 필터, 정렬 및 페이지 매김 인수도 허용합니다.
  • 변이 :
    -, post : 인증 된 사용자가 새 링크를 만들 수 있습니다.
    -, signup : 새로운 사용자 계정 만들기
    -, login : 기존 사용자 로그인
    -, vote : 인증 된 사용자가 기존 링크에 투표 할 수 있습니다
  • 구독 :
    -, newLink : 새 링크가 작성 될 때 실시간 업데이트 수신
    -, newVote : 투표 제출시 실시간 업데이트 받기

예를 들어 다음 feed 쿼리를 보내 서버에서 처음 10 개의 링크를 검색 할 수 있습니다.


{
  feed(skip: 0, first: 10) {
    links {
      description
      url
      postedBy {
        name
      }
    }
  }
}


또는 신규 사용자를 만들기 위한 signup 변이


mutation {
  signup(
    name: "Sarah",
    email: "sarah@graph.cool",
    password: "graphql"
  ) {
    token
    user {
      id
    }
  }
}


Prisma 데이터베이스 서비스 배포 


서버를 시작하고 쿼리 및 변이를 보내기 전에 해야 할 일이 하나 있습니다. GraphQL 서버가 Prisma 프로젝트에 액세스 할 수 있도록 Prisma 프로젝트를 배포해야 합니다.


서비스를 배포하려면 서버의 종속성을 설치하고 server 디렉토리에서 prisma deploy 명령을 호출하기 만하면 됩니다.


터미널에서 server 디렉토리로 이동하여 다음 명령을 실행하십시오.


https://github.com/howtographql/react-apollo/tree/master/server 


cd server
yarn install
yarn prisma deploy


prisma CLI를 머신에 전체적으로 설치 한 경우 (yarn global add prisma로 수행 할 수 있는 경우) 위 명령에서 yarn prisma을 생략 할 수 있습니다. 이 경우 prisma deploy를 간단히 실행할 수 있습니다.


  • 서비스를 설정/배포 할 위치를 묻는 메시지가 표시되면 데모 서버 (로그인이 필요하고 GitHub 계정으로 로그인 할 수 있음)를 선택한 다음 지역을 선택하십시오 (예 : demo-us1 또는 demo-eu1. demo server에는 AWS Aurora 데이터베이스의 무료 인스턴스가 포함되어 있습니다. Docker가 설치되어 있으면 로컬로 배포 할 수도 있습니다.


참고 : 명령 실행이 완료되면 CLI는 Prisma API의 엔드 포인트를 prisma.yml에 씁니다. https://eu1.prisma.sh/john-doe/hackernews-node/dev와 비슷합니다. 


서버 탐색 


적절한 Prisma 엔드 포인트가 있으면 이제 서버를 탐색 할 수 있습니다!


서버 디렉토리로 이동하여 다음 명령을 실행하여 서버를 시작하십시오.


https://github.com/howtographql/react-apollo/tree/master/server 


yarn start


yarn start은 package.json에 정의 된 start 스크립트를 실행합니다. 스크립트는 먼저 서버를 시작한 다음 (http://localhost:4000에서 실행) API를 탐색하고 작업 할 수 있는 GraphQL Playground를 엽니다.


V1hp4ID.png 

Playground는“GraphQL IDE”로, GraphQL API에 쿼리, 변이 및 구독을 보낼 수 있는 대화식 환경을 제공합니다. REST API 작업을 통해 알 수 있지만 Postman과 같은 도구와 유사하지만 많은 추가 이점이 있습니다.


Playground에 대해 가장 먼저 알아 두어야 할 것은 GraphQL API에 대한 문서가 내장되어 있다는 것입니다. 이 문서는 GraphQL 스키마를 기반으로 생성되며 Playground 오른쪽 가장자리에 있는 녹색 SCHEMA 버튼을 클릭하여 열 수 있습니다. 결과적으로 위의 애플리케이션 스키마에서 본 것과 동일한 정보가 표시됩니다.


8xK81qt.png 


Playground의 왼쪽 창은 쿼리, 변이 및 구독을 작성하는 데 사용할 수 있는 편집기입니다. 중간에 있는 재생 버튼을 클릭하면 요청이 전송되고 서버의 응답이 오른쪽의 결과 창에 표시됩니다.


다음 두 가지 변이를 편집기 창에 복사합니다. 왼쪽 메뉴에서 선택한 app 프로젝트의 default Playground가 있어야 합니다.


mutation CreatePrismaLink {
  post(
    description: "Prisma turns your database into a GraphQL API ?",
    url: "https://www.prismagraphql.com"
  ) {
    id
  }
}

mutation CreateApolloLink {
  post(
    description: "The best GraphQL client for React",
    url: "https://www.apollographql.com/docs/react/"
  ) {
    id
  }
}


한 번에 두 개의 변이를 편집기에 추가하므로 변이에는 작업 이름이 있어야 합니다. 귀하의 경우에는 CreatePrismaLink 및 CreateApolloLink입니다.


두 창 가운데에 있는 Play 버튼을 클릭하고 드롭 다운에서 각 변이를 정확히 한 번 선택하십시오.


2GViJwb.png 


데이터베이스에 두 개의 새 Link 레코드가 작성됩니다. 이미 열려 있는 Playground에서 다음 쿼리를 보내서 변이가 실제로 작동했는지 확인할 수 있습니다.


{
  feed {
    links {
      id
      description
      url
    }
  }
}


참고 : app 섹션의 default Playground에서 feed 쿼리를 보낼 수도 있습니다.


모든 것이 잘 진행되면 쿼리는 다음 데이터를 반환합니다 (ID는 prisma에 의해 생성되고 전 세계적으로 고유하기 때문에 귀하의 경우 ID는 다를 수 있습니다).


{
  "data": {
    "feed": {
      "links": [
        {
          "id": "cjcnfwjeif1rx012483nh6utk",
          "description": "The best GraphQL client",
          "url": "https://www.apollographql.com/docs/react/"
        },
        {
          "id": "cjcnfznzff1w601247iili50x",
          "description": "Prisma turns your database into a GraphQL API ?",
          "url": "https://www.prismagraphql.com"
        }
      ]
    }
  }
}


환상적이고 서버가 작동합니다! ?