GraphQL 및 NuxtJS의 강력한 기능 활용

본고에서 우리는 GraphQL 조회와 NuxtJS를 결합하여 사용하는 몇 가지 방법을 탐색하여 서로 다른 업계의 고성능 응용 프로그램을 구축할 것이다.
GraphQL과 NuxtJS는 현재 과학 기술계에서 가장 핫한 기술일 것이다.

그래픽 QL

RESTAPI를 사용할 때 데이터는 특정 끝점에서 가져옵니다.모든 단점은 명확하게 정의된 반환 정보 구조를 가지고 있다.즉, 클라이언트의 데이터 요구는 연결된 API에 의해 결정됩니다.GraphQL API는 클라이언트가 실제 필요로 하는 데이터 형식을 완전히 유연하게 결정할 수 있고 보통 단일 노드만 공개할 수 있도록 게임 규칙을 바꾸었다.
GraphQL의 핵심 개념은 다음과 같습니다.

조회: 서버에 보내는 정보로 클라이언트가 필요로 하는 정보를 설명합니다.

돌연변이: 조회와 유사하지만 업데이트, 삭제, 창설 등 데이터를 변경해야 하는 작업을 수행하는 데 사용됩니다.

다른 개념은 구독, 세션, 매개 변수와 변수를 포함한다.

NuxtJS 회사

Nuxt는 강력한 모듈식 구조를 바탕으로 즉각적으로 최적화된 응용 프로그램을 구축하는 데 사용할 수 있으며 최상의 개발 체험을 제공할 수 있다(NuxtJS 사이트에서 온 것).NuxtJS에 대한 주요 화제는 스파나 ssr 프로그램을 쉽게 구축할 수 있다는 것입니다. 이것은 매우 멋있습니다.

설치

NuxtJS 프로젝트를 설정합니다.터미널에서 다음 작업을 실행합니다.yarn create nuxt-app <project-name>다음:cd <project-name>이제 실행:yarn dev응용 프로그램이 실행 중인 것을 보아야 합니다. (기본 로컬 호스트: 3000)
다음은 apollo 플러그인을 응용 프로그램에 추가합니다.yarn add @nuxtjs/apollo@nuxtjs/apollo를 nuxt로 가져옵니다.구성js 파일:

  modules: [
   ["@nuxtjs/apollo"]
 ]

Apollo 구성 추가

다음에nuxt에서apollo 설정을 설정합니다.구성js 파일.

 apollo: {
   tokenName: "nuxt-apollo", // specify token name
   cookieAttributes: {
     expires: 7 // optional, default: 7 (days)
   },
   defaultOptions: {
     $query: {
       fetchPolicy: "network-only",
       errorPolicy: "all"
     }
   },
   watchLoading: "@/apollo/loadingHandler.js",
   errorHandler: "@/apollo/errorHandler.js",
   clientConfigs: {
     default: {
       httpEndpoint: process.env.BASE_URL
     }
   }
 },

영패 이름: 프로그램이 브라우저를 기반으로 하고 쿠키를 사용하여 로그인과 세션 관리를 하고 있다면 이것은 쿠키 이름입니다.

cookie Attributes: 사용자 브라우저에 저장하고 있는 쿠키의 속성을 저장합니다.만료: 쿠키가 살아남기를 원하는 시간입니다.

default Options:apollo 통화 전체에 정의할 속성을 저장합니다.예를 들어 $query입니다.

fetchPolicy: 응용 프로그램에 캐시를 설정할지 여부에 따라 사용할 캐시 정책을 지정할 수 있습니다.

오류 정책: 서버의 GraphQL 오류를 UI 코드로 보내는 방법을 제어할 수 있습니다.기본적으로 오류 정책은 GraphQL 오류를 네트워크 오류로 간주하고 요청 체인을 종료합니다.errorPolicy는 none, ignore 또는 all로 설정할 수 있습니다.

clientConfigs: 단점, 인증 및 기타 매개 변수를 설정하는 데 사용됩니다.

httpEndpoint: 응용 프로그램에서 사용할 GraphQL 노드를 지정합니다.

watchLoading(isLoading,countModifier)은 조회의 마운트 상태 변경 시 호출되는 갈고리입니다.countModifier 매개 변수는 검색을 불러올 때 1이거나 더 이상 검색을 불러오지 않을 때 -1입니다.

errorhandler(graphQLErrors,networkError,operation,forward)는 오류가 발생했을 때 호출되는 갈고리입니다.

폴더 apollo를 만들고 loadingHandler를 만듭니다.js를 추가하고nuxt에 추가합니다.구성js 파일:

export default (isLoading, countModifier) => {
 console.log("Global loading handler");
 console.log(isLoading, countModifier);
};

errorHandler를 만듭니다.js.우리 apollo 폴더에서:

export default (
 { graphQLErrors, networkError, operation, forward },
 nuxtContext
) => {
 console.log("Global error handler");
 console.log(graphQLErrors, networkError, operation, forward);
 console.log(nuxtContext);
};

GraphQL 질의 수행

id에 따라 사용자를 추출하는 조회를 진행합시다.
우선fetchuser를 만듭니다.apollo에서 폴더 내의 gql 파일을 조회합니다.

query user($id: ID!) {
 user(id: $id) {
   id
   firstname
   age
 }
}

내부 색인.vue 파일,fetchuser를 가져옵니다.회사 명

  import usersGql from "~/apollo/queries/fetchuser.gql";

이제 사용자를 추출하고 Perfich를 true로 지정하기 위한 첫 번째 질의를 진행합니다.
프리페치는 쿼리를 프리페치해야 하는지 확인하는 데 도움이 되는 부울 함수나 함수입니다.true로 프리페치를 사용하는 것은 ssr를 사용하여 SEO를 개선하는 좋은 방법입니다.

 apollo: {
   user: {
     prefetch: true,
     query: usersGql,
     variables() {
       return { id: 1 };
     },
     update(data) {
       return data.user;
     },
   },
}

우리는 템플릿 내부의 사용자를 호출해서 사용자 정보를 볼 수 있다.

<template>
 <div class="container">
   <div>
     <h4 class="title">{{ user }}</h4>
   </div>
 </div>
</template>

프리페치를 false로 설정하고 "$apollo.queries.user.loading"을 사용하여 프로세스의 상태를 표시합니다. 이 중 user는 조회의 이름입니다.

<template>
 <div class="container">
   <div>
     <h4 class="title">
       <template v-if="$apollo.queries.user.loading">I am still loading</template>
       <template v-else>{{ user }}</template>
     </h4>
   </div>
 </div>

NuxtServerInit를 사용하여 GraphQL 질의를 시도해 보겠습니다.

NuxtJS 공식 웹 사이트:
nuxtServerInit 작업이 저장소에 정의되어 있고 패턴이 일반적이라면 Nuxt.js는 상하문을 사용하여 호출합니다. (서버에서만 호출됩니다.)서버에 클라이언트에게 직접 제공할 데이터가 있을 때 매우 유용하다.
fetchuser를 가져오겠습니다.gql 내부 저장소(index.js)

import get_user_query from "~/apollo/queries/fetchusers.gql";

그런 다음 nuxtServerInit에서 질의합니다.

export const state = () => ({
  user: {}
});

export const mutations = {
  set_user: function(state, user) {
    state.user = user;
  }
};

nuxtServerInit({ commit }, { error }) {
   const clientApollo = this.app.apolloProvider.defaultClient;
   return new Promise((resolve, reject) => {
     clientApollo
       .query({
         query: get_user_query,
         variables: {
           id: 3
         }
       })
       .then(resp => {
         commit("set_user", resp.data.user);
         resolve(resp);
       })
       .catch(err => {
         resolve(err);
       });
   });
 }

이제 웹 페이지의 사용자 데이터를 활용합니다.

import { mapState } from "vuex";

export default {
 data() {
   return {
   };
 },
 computed: {
   ...mapState({
     user: (state) => state.user
   }),
 },
}

<template>
 <div class="container">
   <div>
     <h4 class="title">{{ user }}</h4>
   </div>
 </div>
</template>

예!이제 NuxtJS에서 GraphQL 질의를 수행하는 방법에 대해 알아보시기 바랍니다.사용자가 로그인할 때 쿠키를 저장하고nuxtServerInit로 사용자 세션을 검사하는 등 더 높은 기능을 탐색할 수 있습니다.문제가 있거나 문제가 있는 경우 언제든지 또는 Github 에게 문의하십시오.
현대 인터넷 컨설팅 회사로 기업의 디지털화 전환을 돕는 데 주력하고 있다.React, Angular, Vue, Web Components, GraphQL, Node, Bazel 또는 Polymer에 대한 전문가 구조 지도, 교육 또는 문의는 thisdotlabs.com를 참조하십시오.
이런 인터넷 매체는 모든 사람을 위해 포용적이고 교육적인 네트워크를 만드는 데 전념한다.이벤트, 팟캐스트, 무료 콘텐츠를 통해 현대 인터넷의 최신 진전을 알 수 있습니다.자세한 내용은 를 참조하십시오thisdot.co.