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

npm インストール cors

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

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

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

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

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

'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')

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

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

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

'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);
    }
  })
}
...

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

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

送信() {
  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 を返します。
    }
  })
}

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

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

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

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