GraphQL-JQuery 통합

웹 애플리케이션은 데이터를 비동기 적으로 (백그라운드에서) 보내고 검색합니다. AJAX를 사용하면 웹 사이트에서 페이지를 새로 고치지 않고도 화면에 콘텐츠를로드 할 수 있습니다. jQuery는 AJAX 기능에 대한 여러 가지 방법을 제공하므로 AJAX를 더 쉽게 사용할 수 있습니다. 이 장에서는 GraphQL을 jQuery와 통합하는 방법을 배웁니다.

클라이언트 서버 아키텍처를 사용하는 애플리케이션을 고려하십시오. GraphQL 서버에서 데이터를 요청하는 프런트 엔드 웹 페이지를 만들 수 있습니다. 웹 페이지는 jQuery를 사용하여 GraphQL 서버에 AJAX 호출을합니다.

GraphQL을 JQuery와 통합하기 위해 GraphiQL 요청 헤더를 검사하고 요청 매개 변수를 이해하겠습니다.

시작 hello-world앱 (관련 그림은 6 장 참조). GraphiQL 창에 graphql 쿼리 {greeting}을 입력합니다. 크롬에서 마우스 오른쪽 버튼을 클릭하고 검사하거나 (ctrl + shift + I)를 눌러 아래와 같이 네트워크 탭으로 이동합니다.

단순한 것에서 hello-world 예를 들어, 우리는 http method 사용은 POST. 이제 브라우저에서 헤더 섹션까지 아래로 스크롤하여 요청 페이로드 를 확인합니다  .

클릭하면 view code, 크롬의 요청 페이로드 섹션에 다음이 표시됩니다.

{"query":"{\n  greeting\n}","variables":null,"operationName":null}

또한 요청 URL, http://localhost:9000/graphql 클라이언트 애플리케이션에서 호출해야합니다.

삽화

단계별 프로세스를 사용하여 GraphQL을 JQuery와 통합하는 방법을 이해하겠습니다.

서버 설정

다음 단계를 사용하여 서버를 설정하는 방법을 배웁니다.

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

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

2 단계-스키마 생성

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

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

파일이 두 개의 쿼리를 정의했습니다. greetingsayHello. sayHello 쿼리는 문자열 매개 변수를 받아들이고 다른 문자열을 반환합니다. sayHello () 함수에 대한 매개 변수가 null이 아닙니다.

3 단계-리졸버 생성

프로젝트 폴더에 파일 resolvers.js를 생성하고 다음 코드를 추가합니다.

const Query =
{
   greeting: () => 'Hello GraphQL  From TutorialsPoint !!' ,
   sayHello:(root,args,context,info) =>  `Hi ${args.name} GraphQL server says Hello to you!!`
}
module.exports = {Query}

여기, greetingsayHello두 해결 자입니다. sayHello 해석기에서 name 매개 변수에 전달 된 값은 args를 통해 액세스 할 수 있습니다. 모듈 외부에서 해석기 기능에 액세스하려면 Query 객체를 다음을 사용하여 내 보내야합니다.module.exports.

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

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

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

{
   greeting,
   sayHello(name:"Mohtashim")
}

서버의 응답은 다음과 같습니다.

{
   "data": {
      "greeting": "Hello GraphQL From TutorialsPoint !!",
      "sayHello": "Hi Mohtashim GraphQL server says Hello to you!!"
   }
}

클라이언트 설정

이미 서버를 설정 했으므로 이제 클라이언트 설정 방법을 배웁니다.

1 단계-현재 프로젝트 폴더 외부에 새 폴더 jquery-client-app 생성

먼저 jquery-client-app 프로젝트 폴더 외부.

2 단계-jQuery 통합을위한 HTML 페이지 index.html 생성

jquery에서 클라이언트 응용 프로그램을 만들고 두 메서드를 모두 호출합니다. 다음은 코드입니다. index.html 파일. 그만큼 index.html 페이지에서 버튼을 누르면 서버에 요청을 보냅니다. GreetSayHello클릭됩니다. $ .ajax () 함수를 사용하여 비동기 요청을합니다.

<!DOCTYPE html>
<html>
   <head>
      <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <script>
         $(document).ready(function() {

            $("#btnSayhello").click(function() {

               const name = $("#txtName").val();
               console.log(name);
               $("#SayhelloDiv").html('loading....');

               $.ajax({url: "http://localhost:9000/graphql",
                  contentType: "application/json",type:'POST',
                  data: JSON.stringify({ query:`{
                     sayHello(name:"${name}")}`
                  }),
                  success: function(result) {
                     console.log(JSON.stringify(result))
                     $("#SayhelloDiv").html("<h1>"+result.data.sayHello +"</h1>");
                  }
               });
            });
            
            $("#btnGreet").click(function() {
               $("#greetingDiv").html('loading....');
               //https://kannan-first-graphql-app.herokuapp.com/graphql
               $.ajax({url: "http://localhost:9000/graphql",
                  contentType: "application/json",
                  type:'POST',
                  data: JSON.stringify({
                     query:`{greeting}`
                  }),
                  success: function(result) {
                     $("#greetingDiv").html("<h1>"+result.data.greeting+"</h1>");
                  }
               });
            });
         });
      </script>
   </head>
   
   <body>
      <h1>Jquery Client </h1>

      <hr/>
      <section>
         <button id = "btnGreet">Greet</button>
         <br/> <br/>
         <div id = "greetingDiv"> </div>
      </section>
      
      <br/> <br/> <br/>
      <hr/>

      <section>
         Enter a name:<input id = "txtName" type = "text" value = "kannan"/>
         <button id = "btnSayhello">SayHello</button>
         <div id = "SayhelloDiv"> </div>
      </section>
   </body>
</html>

브라우저에서이 파일을 열고 버튼을 클릭하여 응답을 확인하십시오. 출력은 다음과 같습니다.