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 でインデックス構造として B+ ツリーを使用する利点は何ですか?

序文MySQL では、Innodb と MyIsam の両方がインデックス構造として B+ ツリーを...

反応自動構築ルーティングの実装

目次順序1. 集中ルーティング2. ファイルディレクトリ3. CompileRouterを作成する4...

1行のコードでLinuxのプロセスを隠す方法を学ぶ

友人たちはいつも、Linux のプロセスを隠す方法を私に尋ねます。私は、どの程度隠したいのか、カーネ...

エコー後に要素編集フォームel-radioが選択できない問題を解決します

目次序文質問オンラインソリューション序文この記事の内容は私がこの業界に入ったときのメモを元にしている...

Ansible を使用した Nginx のバッチ デプロイのサンプル コード

1.1 nginxインストールパッケージとインストールスクリプトをクライアントにコピーし、スクリプト...

CSS3を使用してフォントカラーグラデーションを実装する

Animation.css を使うと公式サイトのフォントがだんだんと変わっていくのが分かりました。c...

Access_Tokenの統合管理を実現するミニプログラム開発

目次TOKEN タイマーリフレッシュ2. access_tokenの内部設計2.1 access_t...

mysqldump を使用した MySql のインポートおよびエクスポート方法の概要

データベースデータをエクスポートします:まずcmdを開いてMySQLのbinフォルダに入ります1. ...

Vueはマーキースタイルのテキストの水平スクロールを実装します

この記事では、マーキースタイルのテキストの水平スクロールを実現するためのVueの具体的なコードを参考...

Windows 10 Home EditionにDockerをインストールする方法を教えます

Redisの本やSpring Cloud Alibabaの本を執筆した際に、一部の分散コンポーネント...

JSが絵柄デジタル時計を実現

この記事の例では、画像デジタル時計を実現するためのJSの具体的なコードを参考までに共有しています。具...

MySQLデータのセキュリティを確保するための提案

データは企業の中核資産であり、企業にとって最も重要なタスクの 1 つです。注意しないと、データが意図...

MySQL 8.0.16 圧縮版のダウンロードと Win10 システムへのインストール チュートリアル

公式サイトからダウンロード: https://www.mysql.com MySQLの公式サイトにア...

ウェブサイトのカラースキーム ウェブサイトに適した色の選択

色はウェブサイト訪問者に影響を与えますか?数年前までは、ウェブサイトはまだ贅沢品でしたが、今ではほと...

js を使用して年カルーセル選択効果をネイティブに実装する例

序文js を使用して、年の回転選択効果を実現します。では早速、写真を見てみましょう。 1. アイデア...