Example of implementing the Graphql interface in Vue

npm install cors

const cors = require('cors');
// Handle cross-domain requests app.use(cors());

// Process the request app.use(express.json()); //express.json=bodyParser.json
app.use(express.urlencoded({ extended: true }));

npm install --save vue-apollo graphql apollo-boost graphql-tag

import ApolloClient from 'apollo-boost'
...
const apolloClient = new ApolloClient({ 
  // You need to use an absolute path here, no distinction is made between development environments uri: 'http://localhost:8000/graphql',
});
...

import VueApollo from 'vue-apollo' 
Vue.use(VueApollo);

import Vue from 'vue'
import App from './App.vue'
import ApolloClient from 'apollo-boost'
import VueApollo from 'vue-apollo' 
Vue.use(VueApollo);

Vue.config.productionTip = false

const apolloClient = new ApolloClient({ 
  // You need to use the absolute path uri here: 'http://localhost:8000/graphql',
});
const apolloProvider = new VueApollo({
  defaultClient: apolloClient,
})

new Vue({
  render: h => h(App),
  // Mount to the application apolloProvider,
}).$mount('#app')

<template>
  <div class="about">
    {{accountList}}
  </div>
</template>

import gql from 'graphql-tag';
export default {
  name: 'About',
  apollo:
    accountList: gql`query {
      accountList {
        id
        username
        password
      }
    }`
  },
} 

import gql from 'graphql-tag';
export default {
  apollo:
    accountList () {
      return {
        query: gql`query {
          accountList{ 
            id
            username
            password
            created_at
          }
        }`,
      }
    },
  }
}

import gql from 'graphql-tag';
// Define the query schema
const accountListGql = gql`{
  accountList {
    id
    username
    password
  }
}`;

export default {
  data() {
    return {
      tableList: [],
    }
  },
  methods: {
    getTableData() {
      this.$apollo.addSmartQuery('accountList', {
        query: accountListGql,
        result(response) {
          console.log(response);
          const {accountList} = response.data;
          this.tableList = accountList;
        },
        error(error) {
          console.log('Request failed', error);
        }
      })
    }
  }
}

...
getTableData() {
  this.$apollo.addSmartQuery('accountList', {
    query: gql`{
      accountList{
        id
        username
        password
      }
    }`,
    result(response) {
      console.log(response);
      const {accountList} = response.data;
      this.tableList = accountList;
    },
    error(error) {
      console.log('Request failed', error);
    }
  })
}
...

handleClick (rowData) {
  this.$apollo.addSmartQuery('account', {
    query: gql`
      query($id: ID!) {
        account(id: $id) {
          id
          username
          password
        }
      }
    `,
    variables: {
      id: rowData.id,
    },
    result (response) {
      console.log('Query single data', response.data);
    }
  })
}

getTableData () {
  this.$apollo.query({
    query: gql`{
      accountList{
        id
        username
        password
      }
    }`,
  }).then(response => {
    console.log(response);
    const { accountList } = response.data;
    this.tableList =accountList;
  })
}

onSubmit () {
  this.$refs.form.validate(async (valid) => {
    if (valid) {
      console.log(this.form);
      const result = await this.$apollo.mutate({
        mutation: gql`
          mutation addAccount($username: String!, $password: String!) {
            addAccount(username:$username,password: $password)
          }
        `,
        variables: {
          username: this.form.username,
          password: this.form.password,
        }
      });
      console.log('Update result', result);
    } else {
      // this.$message.error('Please add data')
      return false;
    }
  })
}

query AccountList {
  accountList {
    id
    username
    password
  }
}

import AccountList from './../graphql/accountList.graphql';
...
methods: {
  async initTableData () {
    this.tableList = [];
    this.loading = true;
    const { data, loading } = await this.$apollo.query({
      query: AccountList,
    });
    console.log(data, 'request return data');
    this.loading = loading;
    this.tableList = data.accountList;
  },
}
...

module.exports = {
  configureWebpack: (config) => {
    config.module.rules.push({
      test: /\.(graphql|gql)$/,
      exclude: /node_modules/,
      loader: 'graphql-tag/loader'
    })
  },
};

fetchPolicy: "no-cache",