Using GraphQL in a Vue is an example of how to use GraphQL in a Vue.

1. Initialize the VUE project

npm install -g @vue/cli
vue create vue-apollo-demo
Copy the code

Select the default template for the default CLI

Add/SRC /graphql/article. Js and/SRC /utils/graphql.js.

├ ─ ─ node_modules └ ─ ─ public │ ├ ─ ─ the favicon. Ico │ └ ─ ─ index. The HTML ├ ─ ─ the SRC │ ├ ─ ─ assets │ │ └ ─ ─ home. Js │ ├ ─ ─ components │ │ └ ─ ─ the HelloWorld. Js │ ├ ─ ─ graphql │ │ ├ ─ ─ article. Js │ ├ ─ ─ utils │ │ ├ ─ ─ graphql. Js │ ├ ─ ─ App. Vue │ └ ─ ─ main. Js ├ ─ ─ Package. The json └ ─ ─ package - lock. JsonCopy the code

2. Install the Apollo client

Vue-apollo is a set of tools to help you use GraphQL in your applications.

You can either use Apollo Boost or use the Apollo Client directly (more configuration work).

I’m using Apollo Boost here, but if you want more fine-grained control, check out the Vue Apollo documentation.

Apollo Boost is a zero-configuration way to start using the Apollo Client. It contains some useful defaults, such as InMemoryCache and HttpLink, which we recommend, and is great for quick start development.

Install it with Vue-Apollo and GraphQL:

npm install --save vue-apollo graphql apollo-boost
Copy the code

3. Create a ApolloClient instance

Create an instance of ApolloClient in your application:

/src/utils/graphql.js

import ApolloClient from 'apollo-boost';

const apolloClient = new ApolloClient({
  // You need to use absolute paths here
  uri: 'http://127.0.0.1:7001/graphql'
})

export default apolloClient;
Copy the code

4. Add the GraphQL operation instance

/src/utils/article.js

import gql from 'graphql-tag'
import apolloClient from './utils/graphql'

export function getArticleList(params) {
    return apolloClient.query({
        query: gql`query ($first: ID) { articleList(first: $first){ id title content author { name age } } }`.variables: params
    })
}

export function createArticle(params) {
    return apolloClient.mutate({
        mutation: gql`mutation ($title: String, $content: String, $author: AddAuthor) { addArticle(title: $title, content: $content, author: $author){ id title content author { age name } } }`.variables: params
    })
}
Copy the code

5. Debugging

/src/App.vue

<template>
  <div id="app">
    <div class="list">
      <h1>The article lists</h1>
      <ul>
        <li v-for="(v, k) of list" :key="k">Article name: {{v.t itle}} -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - ({{says v. uthor. Name}})</li>
      </ul>
    </div>
    <div class="form">
      <h1>Add the article</h1>Title:<input v-model="formData.title" type="text"><br>Author name:<input v-model="formData.author.name" type="text"><br>Author age:<input v-model.number="formData.author.age" type="text"><br>Article content:<textarea v-model="formData.content" name="" id="" cols="30" rows="10"></textarea>
      <button @click="createArticle">add</button>
    </div>
  </div>
</template>

<script>
import { getArticleList, createArticle } from './graphql/article'
export default {
  name: 'app'.data() {
    return {
      list: [].formData: {
        title: ' '.content: ' '.author: {
          name: ' '.age: ' '}}}},mounted() {
    this.initData()
  },
  methods: {
    initData() {
      getArticleList({first: 0})
        .then(res= >{
          console.log('request success')
          console.log(res.data.articleList.length)
          this.list = res.data.articleList
        })
        .catch(err= >{
          console.log(err)
        })
    },
    createArticle() {
      createArticle(this.formData)
        .then(() = >{
          this.initData()
        })
        .catch(err= >{
          console.log(err)
        })
    }
  }
}
</script>
Copy the code

The effect is as follows: