Vue で Graphql インターフェースを実装する例

Vue で Graphql インターフェースを実装する例

注意:この記事は現在取り組んでいる nestjs+graphql+serverless 合宿における Graphql の基礎知識ポイントについてです。前後の話題とは繋がらない可能性があります。記事内で触れた Graphql の認可についても次のセクションで紹介します。

1. 元のExpressをGraphqlプロジェクトに戻す

この章で使用しているコードは、Express が Graphql に返すコードです。使用する前に、クロスドメインの問題の処理など、コードの基本設定を行う必要があります (Graphql は基本的に http リクエストを送信します。そのため、vue プロジェクトでは当然クロスドメインの問題があり、最初に処理する必要があります)。

1. クロスドメインパッケージをインストールし、ミドルウェアを構成する

npm インストール cors
定数 cors = require('cors');
// クロスドメインリクエストを処理する app.use(cors());

2. リクエストボディを取得するためにミドルウェアを構成する

// リクエストを処理する app.use(express.json()); //express.json=bodyParser.json
app.use(express.urlencoded({extended: true}));

2. VueにGraphqlを統合する

1. 参照文書アドレス

2. 依存パッケージをインストールする

npm インストール --save vue-apollo graphql apollo-boost graphql-tag

3. src/main.jsにapollo-boostモジュールを導入し、ApolloClientをインスタンス化する

'apollo-boost' から ApolloClient をインポートします
...
const apolloClient = 新しい ApolloClient({ 
  // ここでは絶対パスを使用する必要があります。開発環境間の区別はありません。uri: 'http://localhost:8000/graphql'、
});
...

4. src/main.jsでvue-apolloプラグインを設定する

'vue-apollo' から VueApollo をインポートします 
Vue.js で VueApollo をビルドします。

5. Apolloプロバイダーを作成し、アプリケーションにマウントする

'vue' から Vue をインポートします
'./App.vue' からアプリをインポートします。
'apollo-boost' から ApolloClient をインポートします
'vue-apollo' から VueApollo をインポートします 
Vue.js で VueApollo をビルドします。

Vue.config.productionTip = false

const apolloClient = 新しい ApolloClient({ 
  // ここでは絶対パス URI を使用する必要があります: 'http://localhost:8000/graphql',
});
const apolloProvider = 新しい VueApollo({
  デフォルトクライアント: apolloClient、
})

新しいVue({
  レンダリング: h => h(App),
  // アプリケーションapolloProviderにマウントし、
}).$mount('#app')

3. クエリデータ

1. apolloページを使用してデータを照会する

公式の紹介によると、apolloProviderをvueにマウントするだけで、vueフック関数にapollo属性が追加されます。

<テンプレート>
  <div class="about">
    {{アカウントリスト}}
  </div>
</テンプレート>

'graphql-tag' から gql をインポートします。
エクスポートデフォルト{
  名前: 'About'、
  アポロ:
    アカウントリスト: gql`クエリ {
      アカウントリスト{
        id
        ユーザー名
        パスワード
      }
    }`
  },
} 

2. 関数を使用してapolloを呼び出す

'graphql-tag' から gql をインポートします。
エクスポートデフォルト{
  アポロ:
    アカウントリスト(){
      戻る {
        クエリ: gql`query {
          アカウントリスト{ 
            id
            ユーザー名
            パスワード
            作成日時
          }
        }`,
      }
    },
  }
}

3.ボタンをクリックしてデータを取得します

'graphql-tag' から gql をインポートします。
// クエリスキーマを定義する
const アカウントリスト Gql = gql`{
  アカウントリスト{
    id
    ユーザー名
    パスワード
  }
}`;

エクスポートデフォルト{
  データ() {
    戻る {
      テーブルリスト: [],
    }
  },
  メソッド: {
    テーブルデータを取得する() {
      this.$apollo.addSmartQuery('accountList', {
        クエリ: accountListGql、
        結果(レスポンス) {
          console.log(応答);
          定数アカウントリスト = 応答.データ;
          this.tableList = アカウントリスト;
        },
        エラー(エラー) {
          console.log('リクエストが失敗しました', error);
        }
      })
    }
  }
}

上記の方法は、次のような書き方でも代用できます。要求される業務が複雑でない場合は、このように記述できます。複雑な場合は、上記の方法に従って別途スキーマを抽出します

...
テーブルデータを取得する() {
  this.$apollo.addSmartQuery('accountList', {
    クエリ: gql`{
      アカウントリスト{
        id
        ユーザー名
        パスワード
      }
    }`,
    結果(レスポンス) {
      console.log(応答);
      定数アカウントリスト = 応答.データ;
      this.tableList = アカウントリスト;
    },
    エラー(エラー) {
      console.log('リクエストが失敗しました', error);
    }
  })
}
...

4. パラメータを渡してデータを要求する

ハンドルクリック (行データ) {
  this.$apollo.addSmartQuery('アカウント', {
    クエリ: gql`
      クエリ($id: ID!) {
        アカウント(ID: $id) {
          id
          ユーザー名
          パスワード
        }
      }
    `、
    変数: {
      id: rowData.id、
    },
    結果(応答){
      console.log('単一データのクエリ', response.data);
    }
  })
}

4. データクエリ方法の改善

1. 上記の方法ではデータを照会できますが、ボタンを繰り返しクリックすることはできません。そうしないとエラーが発生します。

2. クエリデータの改良版、クエリメソッドを直接使用してクエリを実行する

テーブルデータを取得する() {
  this.$apollo.query({
    クエリ: gql`{
      アカウントリスト{
        id
        ユーザー名
        パスワード
      }
    }`,
  }).then(応答 => {
    console.log(応答);
    const { accountList } = レスポンス.data;
    this.tableList =アカウントリスト;
  })
}

5. ミューテーションを使用してデータを追加する

具体的な実装コードについては以下を参照してください。

送信() {
  this.$refs.form.validate(非同期(有効) => {
    (有効)の場合{
      console.log(このフォーム);
      const 結果 = これを待機します。$apollo.mutate({
        変異: gql`
          ミューテーション addAccount($username: String!, $password: String!) {
            アカウントを追加します(ユーザー名:$username,パスワード:$password)
          }
        `、
        変数: {
          ユーザー名: this.form.username,
          パスワード: this.form.password,
        }
      });
      console.log('更新結果', result);
    } それ以外 {
      // this.$message.error('データを追加してください')
      false を返します。
    }
  })
}

6. Graphql リクエストの最適化

1. ブラウザコンソールを開いてGraphqlインターフェースを要求すると、次の3つのパラメータが表示されます。

2. 同じデータまたは変数の値が変更されない場合、バックエンドにリクエストは送信されません。

3. operationName とは何ですか? 多くの人が疑問に思うと思います。次の 2 つの図を見ると、誰もが混乱しないと思います。

この操作名は、クエリまたはミューテーションを使用するときに使用する名前です。任意の名前を付けることができますが、通常はバックエンド API 操作名と一貫性を保つことをお勧めします。
この操作名の用途は何でしょうか? Graphql によって送信されたリクエストはすべて同じ URL アドレスであることがわかります。従来の Restful API を使用している場合、ログイン認証を行うときや URL を取得するときに、現在のリクエストのアドレスを取得する必要があります。Graphql の場合、この操作名はこの関数に似ており、どの API がリクエストしているかを区別します。

7. コードを最適化する

従来の Restful API リクエストでは、管理しやすいようにすべての API リクエストをまとめてプロジェクト内にサービス フォルダーを作成し、すべてのリクエストを Vue ページに書き込むことはほとんどありません。これは GraphQL でも実行できますが、方法が異なります。

1. プロジェクト内に graphql フォルダを作成します。このフォルダには、Restful API に似たインターフェースリクエストが含まれます。

2. src/graphql/accountList.graphql にクエリインターフェースを作成する

アカウントリストをクエリする {
  アカウントリスト{
    id
    ユーザー名
    パスワード
  }
}

3. Vueで導入する

'./../graphql/accountList.graphql' から AccountList をインポートします。
...
メソッド: {
  非同期initTableData(){
    this.tableList = [];
    this.loading = true;
    const { データ、読み込み } = this.$apollo.query({
      クエリ: AccountList、
    });
    console.log(data, 'リクエストの戻りデータ');
    this.loading = 読み込み中;
    this.tableList = data.accountList;
  },
}
...

4. 予期せぬ事態が発生しない場合は、vue が graphql ファイルを直接認識できないため、エラーが直接報告されます。graphql をロードするには、webpack を使用して対応するローダーを構成する必要があります。

5. プロジェクトのルートディレクトリにvue.config.js構成ローダーを作成する

モジュール.エクスポート = {
  Webpack を構成する: (config) => {
    config.module.rules.push({
      テスト: /\.(graphql|gql)$/,
      除外: /node_modules/、
      ローダー: 'graphql-tag/loader'
    })
  },
};

6. 処理データが更新されない

データを追加、削除、または変更するたびに、initTableData を呼び出しても、Graphql はバックエンドに到達しません。これはキャッシュの問題が原因です。クエリを実行するときに、赤で囲まれたフィールドを追加して、呼び出すたびにデータを更新できるようにする必要があります。

fetchPolicy: "キャッシュなし"、 

7. この章の全体的な効果図

8. このセクションのコード コードのダウンロードアドレス

これで、Vue での Graphql インターフェースのドッキングの実装例に関するこの記事は終了です。Vue での Graphql インターフェースのドッキングに関するより関連性の高いコンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Vue で GraphQL を使用するサンプルコード
  • vue-cli で graphql または vue-apollo を使用する方法の詳細な説明
  • Vue プロジェクト (vue-ApolloClient) に graphql を統合する

<<:  mysql5.7 のエンコーディングを utf8mb4 に設定する方法

>>:  MySQL で 1 つのテーブルのフィールドを使用して別のテーブルのフィールドを更新する方法

推薦する

MySQLで負荷分散を実装する方法

序文MySQL は、クライアント/サーバー構造に基づく、高速、高性能、マルチスレッドのオープン ソー...

React Native APPのアップデートに関する簡単な説明

目次アプリ更新プロセス大まかなフローチャートアプリ情報の更新1. まず取得する必要があるファイルアド...

MySQL ロック制御同時実行方法

目次序文1. 楽観的ロックバージョンフィールドを追加する2. 悲観的ロック読み取りロック完全なテーブ...

MySQL はエンタープライズレベルのログ管理、バックアップ、リカバリの実践的なチュートリアルを実装します

背景事業が発展するにつれ、会社の事業内容や規模は拡大し続け、ウェブサイトには大量のユーザー情報やデー...

iostat を使用して Linux ハードディスクの IO パフォーマンスを表示する方法

TOP 観察: IO 待機に占められる CPU 時間の割合。30% を超えると、IO の負荷が高くな...

ショートカットアイコンとアイコンコードの違いの紹介

ステートメント 1: <link rel="shortcut icon" ...

MySQL のインデックス障害の一般的なシナリオと回避方法

序文これまでにも、一部の SQL ステートメントを不適切に使用すると MySQL インデックスが失敗...

union (all) と limit および exists キーワードの使用法を理解するための MySQL シリーズチュートリアル

目次1.union: クエリ結果を追加できます1) すべてを結合: 重複を削除できません2) ユニオ...

CSS3 を使って本のページめくり効果を実現するサンプルコード

重要なポイント: 1. CSS3 3Dアニメーションをマスターする2. ページめくり後のページ内容の...

Kylin V10 サーバーで Storm をコンパイルしてインストールする詳細なプロセス

1 はじめにApache Storm は、Hadoop と同様に、大量のデータを処理するために使用で...

CSSはフロントエンドの画像変形の問題を完璧に解決します

Toutiao IT School で、CSS がフロントエンドの画像変形の問題を完璧に解決するとい...

CentOS7にPostgreSQL11をインストールする方法

CentOS 7にPostgreSQL 11をインストールする PostgreSQL: 世界で最も先...

HTML の doctype とエンコーディングに関する簡単な説明

文書タイプDoctype は、指示を解析するためにどのバージョンの HTML を使用するかをブラウザ...

ウェブページのカラーマッチングにおけるオーバーラップとソフトカラーマッチングの手法を詳しく説明

この記事には、細かい点は一切なく、カラーマッチングのテクニックをシェアするだけです。とてもシンプルで...

Linuxターミナルでファイルを作成する2つの一般的な方法を簡単に理解する

mkdir コマンドを使用して新しいディレクトリを作成できることは誰もが知っていますが、多くの場合、...