注意:この記事は現在取り組んでいる 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 では、Innodb と MyIsam の両方がインデックス構造として B+ ツリーを...
目次順序1. 集中ルーティング2. ファイルディレクトリ3. CompileRouterを作成する4...
友人たちはいつも、Linux のプロセスを隠す方法を私に尋ねます。私は、どの程度隠したいのか、カーネ...
目次序文質問オンラインソリューション序文この記事の内容は私がこの業界に入ったときのメモを元にしている...
1.1 nginxインストールパッケージとインストールスクリプトをクライアントにコピーし、スクリプト...
Animation.css を使うと公式サイトのフォントがだんだんと変わっていくのが分かりました。c...
目次TOKEN タイマーリフレッシュ2. access_tokenの内部設計2.1 access_t...
データベースデータをエクスポートします:まずcmdを開いてMySQLのbinフォルダに入ります1. ...
この記事では、マーキースタイルのテキストの水平スクロールを実現するためのVueの具体的なコードを参考...
Redisの本やSpring Cloud Alibabaの本を執筆した際に、一部の分散コンポーネント...
この記事の例では、画像デジタル時計を実現するためのJSの具体的なコードを参考までに共有しています。具...
データは企業の中核資産であり、企業にとって最も重要なタスクの 1 つです。注意しないと、データが意図...
公式サイトからダウンロード: https://www.mysql.com MySQLの公式サイトにア...
色はウェブサイト訪問者に影響を与えますか?数年前までは、ウェブサイトはまだ贅沢品でしたが、今ではほと...
序文js を使用して、年の回転選択効果を実現します。では早速、写真を見てみましょう。 1. アイデア...