GraphQL-쿼리

GraphQL 작업은 읽기 또는 쓰기 작업 일 수 있습니다. GraphQL 쿼리는 값을 읽거나 가져 오는 데 사용되는 반면 변형은 값을 쓰거나 게시하는 데 사용됩니다. 두 경우 모두 작업은 GraphQL 서버가 특정 형식의 데이터를 구문 분석하고 응답 할 수있는 간단한 문자열입니다. 일반적으로 모바일 및 웹 애플리케이션에 사용되는 인기있는 응답 형식은 JSON입니다.

쿼리를 정의하는 구문은 다음과 같습니다.

//syntax 1
query query_name{ someField }

//syntax 2
{ someField }

다음은 쿼리의 예입니다-

//query with name myQuery
query myQuery{
   greeting
}

// query without any name
{
   greeting
}

위의 예에서 쿼리 키워드가 선택 사항이라는 것이 분명합니다.

GraphQL 쿼리는 데이터 오버 페칭을 줄이는 데 도움이됩니다. Restful API와 달리 GraphQL을 사용하면 사용자가 서버에서 가져와야하는 필드를 제한 할 수 있습니다. 이는 네트워크를 통한 더 적은 쿼리와 더 적은 트래픽을 의미합니다. 결과적으로 응답 시간이 줄어 듭니다.

그림 1-사용자 지정 필드를 사용하여 학생 모델 쿼리

이 예에서는 json 파일에 저장된 학생 세트가 있습니다. 각 학생 모델에는 firstName, lastName 및 id와 같은 필드가 있지만 fullName은 없습니다. 여기에서는 모든 학생의 fullName을 검색하는 쿼리를 만드는 방법에 대해 설명합니다. 이를 위해 두 스키마 해석기에서 fullName 필드를 만들어야합니다.

아래 단계를 사용하여이 그림을 수행하는 방법을 살펴 보겠습니다.

1 단계-프로젝트에 필요한 종속성 다운로드 및 설치

다음과 같은 폴더를 만듭니다. query-app. 디렉토리를 다음으로 변경하십시오.query-app터미널에서. 나중에 환경 설정 장에 설명 된 3 ~ 5 단계를 따릅니다.

2 단계-스키마 생성

더하다 schema.graphql 프로젝트 폴더 query-app에 파일을 추가하고 다음 코드를 추가하십시오.

type Query {
   greeting:String
   students:[Student]
   studentById(id:ID!):Student
}

type Student {
   id:ID!
   firstName:String
   lastName:String
   fullName:String 
}

에는 fullName 필드 가 없습니다 .students.json파일. 그러나 쿼리를 통해 학생 의 전체 이름 을 가져와야합니다 . FULLNAME 님이 ,이 경우 데이터 소스를 사용할 수없는 사용자 정의 필드 것입니다.

3 단계-Resolver 생성

파일 생성 resolvers.js 프로젝트 폴더에 다음 코드를 추가하십시오-

const db = require('./db')
const Query = {
   //resolver function for greeting
   greeting:() => {
      return "hello from  TutorialsPoint !!!"
   },
   
   //resolver function for students returns list
   students:() => db.students.list(),

   //resolver function for studentbyId
   studentById:(root,args,context,info) => {
      //args will contain parameter passed in query
      return db.students.get(args.id);
   }
}

//for each single student object returned,resolver is invoked

const Student = {
   fullName:(root,args,context,info) => {
      return root.firstName+":"+root.lastName
   }
}

module.exports = {Query,Student}

4 단계-애플리케이션 실행

만들기 server.js파일. 환경 설정 장의 8 단계를 참조하십시오. 터미널에서 npm start 명령을 실행합니다  . 서버는 9000 포트에서 실행됩니다. 여기서는 GraphiQL을 클라이언트로 사용하여 애플리케이션을 테스트합니다.

브라우저를 열고 URL을 입력하십시오. http://localhost:9000/graphiql. 편집기에 다음 쿼리를 입력하십시오-

{
   students{
      id
      fullName
   }
}

쿼리에 대한 응답은 다음과 같습니다.

{
   "data": {
      "students": [
         {
            "id": "S1001",
            "fullName": "Mohtashim:Mohammad"
         },
         
         {
            "id": "S1002",
            "fullName": "Kannan:Sudhakaran"
         },
         
         {
            "id": "S1003",
            "fullName": "Kiran:Panigrahi"
         }
      ]
   }
}

만들기 server.js 다음 코드를 추가하십시오-

const bodyParser = require('body-parser');
const cors = require('cors');
const express = require('express');

const db = require('./db');
const port = 9000;
const app = express();

//loading type definitions from schema file
const fs = require('fs')
const typeDefs = fs.readFileSync('./schema.graphql',{encoding:'utf-8'})

//loading resolvers
const resolvers = require('./resolvers')

//binding schema and resolver
const {makeExecutableSchema} = require('graphql-tools')
const schema = makeExecutableSchema({typeDefs, resolvers})

//enabling cross domain calls and form post
app.use(cors(), bodyParser.json());

//enabling routes
const  {graphiqlExpress,graphqlExpress} = require('apollo-server-express')
app.use('/graphql',graphqlExpress({schema}))
app.use('/graphiql',graphiqlExpress({endpointURL:'/graphql'}))

//registering port
app.listen(port, () => console.info(`Server started on port ${port}`));

터미널에서 npm start 명령을 실행합니다. 서버는 9000 포트에서 실행됩니다. 여기서는 GraphiQL을 클라이언트로 사용하여 애플리케이션을 테스트합니다.

브라우저를 열고 URL을 입력하십시오. http://localhost:9000/graphiql. 편집기에 다음 쿼리를 입력하십시오-

{
   students{
      id
      fullName
   }
}

쿼리에 대한 응답은 다음과 같습니다.

{
   "data": {
      "students": [
         {
            "id": "S1001",
            "fullName": "Mohtashim:Mohammad"
         },
         {
            "id": "S1002",
            "fullName": "Kannan:Sudhakaran"
         },
         {
            "id": "S1003",
            "fullName": "Kiran:Panigrahi"
         }
      ]
   }
}

그림 2-중첩 쿼리

학생 세부 정보와 대학 세부 정보를 가져 오기위한 중첩 쿼리를 만들어 보겠습니다. 동일한 프로젝트 폴더로 작업합니다.

1 단계-스키마 편집

스키마 파일에 이미 학생 필드가 있습니다. 현장 대학을 추가하고 그 유형을 정의하겠습니다.

type College {
   id:ID!
   name:String
   location:String
   rating:Float
}

type Student {
   id:ID!
   firstName:String
   lastName:String
   fullName:String
   college:College
}

2 단계-resolver.js 수정

아래와 같이 대학 리졸버 기능을 추가해야합니다. 반환 된 각 학생 객체에 대해 대학 해석기 기능이 실행됩니다. 이 경우 resolver의 루트 매개 변수에는 student 가 포함 됩니다.

const Student = {
   fullName:(root,args,context,info) => {
      return root.firstName+":"+root.lastName
   },
   college:(root) => {
      return db.colleges.get(root.collegeId);
   }
}
module.exports = {Query,Student}

리졸버는 대학 컬렉션의 get 메서드를 호출하고 collegeId를 전달하여 각 학생의 대학을 반환합니다 . 우리는 collegeId를 통해 Student와 College 사이에 연관 관계가 있습니다.

3 단계-애플리케이션 테스트

터미널 창을 열고 프로젝트 폴더로 이동합니다. -npm start 명령을 입력합니다. 브라우저를 시작하고 URL을 입력하십시오.http://localhost:9000/graphiql.

GraphiQL 창에 다음 쿼리를 입력하십시오-

{
   students{
      id
      firstName
      college {
         id
         name
         location
         rating
      }
   }
}

쿼리에 대한 응답은 다음과 같습니다.

{
   "data": {
      "students": [
         {
            "id": "S1001",
            "firstName": "Mohtashim",
            "college": {
               "id": "col-102",
               "name": "CUSAT",
               "location": "Kerala",
               "rating": 4.5
            }
         },
         
         {
            "id": "S1002",
            "firstName": "Kannan",
            "college": {
               "id": "col-101",
               "name": "AMU",
               "location": "Uttar Pradesh",
               "rating": 5
            }
         },
         
         {
            "id": "S1003",
            "firstName": "Kiran",
            "college": {
               "id": "col-101",
               "name": "AMU",
               "location": "Uttar Pradesh",
               "rating": 5
            }
         }
      ]
   }
}

쿼리 변수 란 무엇입니까?

쿼리에 전달할 동적 값이있는 경우 변수를 사용하여 이러한 동적 값을 나타냅니다. 따라서 클라이언트 응용 프로그램에서 쿼리를 다시 사용할 수 있습니다.

삽화

쿼리 변수를 이해하는 간단한 응용 프로그램을 만들어 보겠습니다.

1 단계-스키마 파일 편집

문자열 매개 변수를 받아 문자열을 반환 하는 sayHello 필드를 추가 합니다. 이름 값은 클라이언트 응용 프로그램에서 동적입니다.

type Query {
   sayHello(name:String!):String
}

2 단계-resolver.js 파일 편집

아래와 같이 매개 변수를 취하는 sayHello 해결자를 추가하십시오.

sayHello:(root,args,context,info) => `Hi ${args.name} GraphQL server says Hello to you!!`

3 단계-GraphiQL에서 쿼리 변수 선언

변수는 $와 변수 이름으로 선언됩니다. 예 : $ myname_Variable.

$ myname_Variable이 선언되면 명명 된 쿼리 구문과 함께 사용해야합니다. 쿼리 myQuery는 문자열 값을 받아 아래와 같이 sayHello에 전달합니다.

query myQuery($myname_Variable:String!) {
   sayHello(name:$myname_Variable)
}

GraphiQL 클라이언트의 쿼리 변수 섹션에서 $ myname_Variable의 값을 JSON 개체로 설정합니다.

{
   "myname_Variable": "Mohtashim"
}

위 코드의 출력은 다음과 같습니다.

{
   "data": {
      "sayHello": "Hi Mohtashim GraphQL server says Hello to you!!"
   }
}

Enum과 함께 쿼리 변수를 사용하는 방법

필드 매개 변수가 다음과 같을 때 쿼리 변수를 사용하는 방법을 살펴 보겠습니다. enum type.

1 단계-schema.graphql 파일 편집

enum ColorType {
   RED
   BLUE
   GREEN
}

type Query {
   setFavouriteColor(color:ColorType):String
}

setFavouriteColor의 함수는 입력으로 ENUM 소요 문자열 값을 반환한다.

2 단계-resolvers.js 파일 편집

해석기 함수 setFavouriteColorrootargs를 사용 합니다. 런타임에 함수에 전달 된 enum 값은 args 매개 변수를 통해 액세스 할 수 있습니다.

setFavouriteColor:(root,args) => {
   return  "Your Fav Color is :"+args.color;
}

3 단계-GraphiQL에서 쿼리 변수 선언

쿼리 이름이 query_to_setColorColorType의 color_variable이라는 이름의 변수를 사용합니다. 이 변수는 setFavouriteColor 메소드에 전달됩니다.

query query_to_setColor($color_variable:ColorType) {
   setFavouriteColor(color:$color_variable)
}

GraphiQL의 쿼리 변수 섹션에 다음 코드를 입력하십시오.

{
   "color_variable":"RED"
}

응답은 다음과 같습니다.

{
   "data": {
      "setFavouriteColor": "Your Fav Color is: RED"
   }
}