注意:この記事は現在取り組んでいる 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 操作名と一貫性を保つことをお勧めします。 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 をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: mysql5.7 のエンコーディングを utf8mb4 に設定する方法
>>: MySQL で 1 つのテーブルのフィールドを使用して別のテーブルのフィールドを更新する方法
序文MySQL は、クライアント/サーバー構造に基づく、高速、高性能、マルチスレッドのオープン ソー...
目次アプリ更新プロセス大まかなフローチャートアプリ情報の更新1. まず取得する必要があるファイルアド...
目次序文1. 楽観的ロックバージョンフィールドを追加する2. 悲観的ロック読み取りロック完全なテーブ...
背景事業が発展するにつれ、会社の事業内容や規模は拡大し続け、ウェブサイトには大量のユーザー情報やデー...
TOP 観察: IO 待機に占められる CPU 時間の割合。30% を超えると、IO の負荷が高くな...
ステートメント 1: <link rel="shortcut icon" ...
序文これまでにも、一部の SQL ステートメントを不適切に使用すると MySQL インデックスが失敗...
目次1.union: クエリ結果を追加できます1) すべてを結合: 重複を削除できません2) ユニオ...
重要なポイント: 1. CSS3 3Dアニメーションをマスターする2. ページめくり後のページ内容の...
1 はじめにApache Storm は、Hadoop と同様に、大量のデータを処理するために使用で...
Toutiao IT School で、CSS がフロントエンドの画像変形の問題を完璧に解決するとい...
CentOS 7にPostgreSQL 11をインストールする PostgreSQL: 世界で最も先...
文書タイプDoctype は、指示を解析するためにどのバージョンの HTML を使用するかをブラウザ...
この記事には、細かい点は一切なく、カラーマッチングのテクニックをシェアするだけです。とてもシンプルで...
mkdir コマンドを使用して新しいディレクトリを作成できることは誰もが知っていますが、多くの場合、...