GraphSQLとNuxtjsのパワーを活用する

このポストでは、私たちは、いくつかのGLQLクエリをNuxtjsで使用することができますいくつかの方法を探索するさまざまな産業のパフォーマンスアプリケーションを構築する.
GraphqlとNuxtjsは、おそらく今日のハイテク世界で最も話題の技術です.

グラフ

休息APIで働くとき、データは特定の終点からとられます.各エンドポイントは、それが返す情報の明確に定義された構造を持っています.これは、クライアントのデータ要件がそれらが接続するAPIによって決定されることを意味します.彼らが実際に必要とするデータのタイプを決定する際にクライアントが完全に柔軟であるのを許容して、典型的にただ一つの終点を露出するだけであるので、graphql APIはゲーム変化です.
Graphqlのいくつかのコアコンセプトは以下のようになります.

問い合わせ:これはクライアントが必要とする情報を記述するサーバに送られる情報です.

突然変異:これはクエリのようですが、更新、削除、作成のようにデータを変更する必要があるアクションを実行するために使用されます.

他の概念は、購読、断片、引数と変数を含みます.

京大理

Nuxtは、Nuxtjsウェブサイトから最高の開発者の経験を提供しながら、ボックスから最適化されたアプリケーションを構築するために使用できる強力なモジュラーアーキテクチャに基づいています.Nuxtjsについては、この主な話題は、簡単にいずれかのスパやSSRアプリを構築することができます、これは非常にクールです.

インストール

Nuxtjsプロジェクトを設定しましょう.端末で次のコマンドを実行します.yarn create nuxt-app <project-name>Then:cd <project-name>では実行しましょう.yarn dev我々のアプリケーションの実行を見る必要があります-(デフォルトlocalhost:3000).
次に、アポロプラグインをアプリケーションに追加します.yarn add @nuxtjs/apolloNuxtに@ nuxtjs/アポロを輸入しましょう.設定.jsファイル

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

アポロ設定の追加

次に、Nuxtの中にアポロ設定を設定しましょう.設定.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
     }
   }
 },

TokenName:あなたのアプリがブラウザベースで、ログインとセッション管理のためにクッキーを使用している場合、これはクッキー名です.

CookieAttributes :これは、ユーザーのブラウザに保存しているクッキーのプロパティを保持します.期限:これはどのくらいのクッキーを生きている.

DefaultOptions :これはあなたのアポロ呼び出しのためにグローバルに定義するプロパティを保持します.例は$ queryです.

fetchPolicy :アプリケーションのキャッシュを設定する場合には、どのキャッシュポリシーを使用するかを指定できます.

ErrorPolicy :これはサーバーからのGraphSQLエラーがどのようにUIコードに送られるかを制御することができます.既定では、エラーポリシーはGraphSQLエラーをネットワークエラーとして扱い、要求チェーンを終了します.ErrorPolicyはNone , ignore , allに設定できます.

ClientConfigs :エンドポイント、認証、その他のパラメータを設定するために使用されます.

HttpendPoint :これは、アプリケーションが使用するGraphLegelポイントを指定するために使用されます.

WatchLoading(IsLoading、Count修飾子)は、クエリの読み込み状態が変更されたときに呼び出されるフックです.QueryModifierパラメーターは、クエリが読み込まれているとき、またはクエリがもう読み込まれていない場合に- 1になります.

ErrorHandler ( GraphlError , NetworkError , Operation , Forward )エラーが発生したときに呼び出されるフックです.

フォルダを作成しましょう.JSと私たちのnuxtに追加します.設定.jsファイル

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

ErrorHandlerを作りましょう.jsアポロフォルダーの中で

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

グラフクエリの作成

IDに基づいてユーザーをプルするクエリを作りましょう.
まず、fetchUserを作成します.アポロのクエリフォルダ内のgqlファイル

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

インサイドインデックス.vueファイル、fetchuserをインポートしましょう.gql

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

さて、ユーザを引っ張り、プレハブを指定する最初の問い合わせを行いましょう.
プリフェッチは、クエリがプリフェッチされるかどうかを判断するのに役立つブールか関数です.プリフェッチをtrueとして使用すると、SEOを改善するためにSSRを使用する素晴らしい方法です.

 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 . query . user . load”を使用してプロセスの状態を表示します.

<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を使用して、GraphSQLクエリを作成してみましょう.

公式Nuxtjsウェブサイトによって
NuxtServerInitがストア内で定義されており、モードがUniversalである場合、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>

ああ!NYxtjsでGraphSQLクエリを作成する方法を理解しています.ユーザーがログインしてnuxtserverinitを使用してユーザーセッションをチェックするときに、クッキーを保存するようなより高度な機能を探索できます.何か質問がある場合、または任意のトラブルに実行するには、または外出先でGithubにお気軽に.
このドットラボは、企業のデジタル変換の努力を実現支援に焦点を当てた現代のWebコンサルティングです.専門家の建築指導、訓練、または反応、角度、Vue、Webコンポーネント、Graphql、ノード、バゼル、またはポリマー、コンサルテーションthisdotlabs.comをご覧ください.
このドットメディアは、すべての包括的で教育的なウェブを作成することに集中します.我々は最新のイベント、ポッドキャスト、および無料のコンテンツを介して近代的なWebの進歩と最新の状態に保つ.学ぶには、thisdot.coをご覧ください.