Apollo & React로 GraphQL 탐색 : 슈퍼 히어로 데이터베이스 구축

GraphQL의 세계로 뛰어 들어가 왜 그렇게 많은 흥분을 일으키는 지 알아 봅니다! 이 튜토리얼은 GraphQL에 대한 명확한 설명을 제공하고 실습 경험을 제공합니다.

먼저, 핵심 질문을 해결합시다. 모호한 계산기 기능이 아닙니다. 대신, 다양한 소스에서 데이터를 가져 오기위한 강력한 쿼리 언어 (또는보다 정확하게 쿼리 사양)입니다. 주요 이점? 단일 네트워크 요청에서 필요한 데이터를 검색하여 전통적인 REST API의 비 효율성을 제거합니다. 이 자습서는 Apollo 서버를 엔드 포인트로 사용하고 Apollo 클라이언트와 React 앱을 사용하여 데이터에 액세스합니다. 서버로 시작하겠습니다. 주요 개념 :

GraphQL은 모든 데이터 소스의 단일 요청에서 정확한 데이터 검색을 제공하는 쿼리 언어로, 효율성과 유연성의 REST API를 능가합니다. 아폴로 서버 (endpoint)와 아폴로 클라이언트를 사용하는 반응 앱은 그래프 QL 데이터 사용에 필수적입니다. 튜토리얼은 슈퍼 히어로 데이터베이스 예제를 사용하여 스키마 생성, 데이터 추가, 리졸버 정의 및 통합을 보여줍니다. 는 스키마가 인터페이스 역할을하면서 프론트 엔드 및 백엔드 개발이 크게 독립적으로 진행될 수있는 방법을 보여줍니다.

아폴로 서버 설정 : 디렉토리를 만듭니다 를 탐색하고 필요한 패키지를 설치하십시오

를 만들고

를 추가하십시오 : 이것은 Apollo Server 및 GraphQL 쿼리 구문 분석의 필수 구성 요소를 가져옵니다. 그래프 QL 스키마 생성 :

다음으로 : 에서 스키마를 정의하십시오

이것은 유형과 두 개의 쿼리를 정의합니다. 샘플 데이터 추가 : 모의 데이터를
• : 에 추가하십시오
이것은 쿼리를위한 샘플 데이터를 제공합니다. GraphQL은 JavaScript 배열에만 국한되지 않습니다. 모든 데이터 소스에 연결할 수 있습니다.
• Resolvers 정의 :
• Resolvers는 쿼리를 해석합니다. 이것들을
: 에 추가하십시오

Resolver는 모든 사용자를 반환하고 는 id로 사용자를 찾습니다. 서버 시작 :

서버를 인스턴스화하고 시작하여 를 완료하십시오
1. apollo-server를 실행하고 대화식 쿼리 :
놀이터 에서이 쿼리를 시도하십시오 :
Peter Parker의 이름을 가져 오십시오 :
Peter Parker의 이름과 초강력을 가져 오십시오 :

npm install apollo-server apollo-server-express graphql

• 모든 사용자와 초강대국을 가져 오십시오 :
반응과 통합 :

const { ApolloServer, gql } = require('apollo-server');

반응 앱 생성 :

const typeDefs = gql`
  type User {
    id: ID!
    name: String
    superpowers: [Superpower]!
  }

  type Superpower {
    id: ID!
    text: String
  }

  type Query {
    users: [User]
    user(id: ID!): User
  }
`;

수정

:

교체
1. :

const users = [
  { id: '1', name: 'Peter Parker', superpowers: [{ id: '1', text: 'Web slinging' }, { id: '2', text: 'Spidey sense' }] },
  { id: '2', name: 'Tony Stark', superpowers: [{ id: '3', text: 'Industrial design' }, { id: '4', text: 'Robotic fashion' }] }
];

에서 실행 에서
2. . 이 자습서는 GraphQL을 사용하기위한 토대를 제공합니다. 돌연변이 (데이터 수정 용) 및 기타 고급 기능을 탐색하여 기술을 더욱 향상시킵니다. 행복한 코딩! src/index.js GraphQL FAQS :
graphql 란 무엇입니까?

const resolvers = {
  Query: {
    users: () => users,
    user: (root, { id }) => users.find(user => user.id === id),
  },
};

API를위한 쿼리 언어와 데이터에 대한 쿼리를 실행하기위한 런타임. 휴식을위한보다 효율적이고 유연한 대안입니다.
3. src/App.js GraphQL vs. REST :
REST는 여러 엔드 포인트를 사용하는 반면, GraphQL은 클라이언트가 단일 쿼리에서 필요한 데이터 만 요청하여 과도하게 가져 와지 못하고 언더 페치를 방지 할 수 있습니다.

const server = new ApolloServer({ typeDefs, resolvers });
server.listen().then(({ url }) => console.log(`Apollo server started at ${url}`));

키 그래프 QL 기능 :

계층 적 쿼리 구조, 강력한 타이핑, 구독이있는 실시간 데이터 및 내성 (스키마 자체 쿼리). npm start my-graphql GraphQL Schema : http://localhost:3000/ 클라이언트와 서버 간의 계약 역할을하는 데이터 유형과 관계를 정의합니다.

쿼리 구조 :

계층 적, 응답 데이터 구조를 반영합니다. 클라이언트는 특정 필드를 요청하고 복잡한 데이터 검색을 위해 중첩합니다.

RESOLVERS : 특정 스키마 필드에 대한 데이터를 가져 오거나 돌연변이하는 방법을 정의하는 기능. 쿼리를 데이터 소스에 연결합니다

위 내용은 Apollo & React로 GraphQL 탐색 : 슈퍼 히어로 데이터베이스 구축의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!