Apollo is a set of tools to help you use GraphQL  in the apps you are developing. Apollo is developed by METEOR Development Group. GraphQL has been very successful around the world. It has been the most preferred method of client-server data transfer. It is a graph-oriented query language written by facebook. There is vue-apollo to integrate Apollo-client 2 with Vue.js. Let’s see how to use Apollo with Vue.js by creating a simple list of names. In this example we have one query for getting the names and mutation that adds a name.

yarn add graphql apollo-boost vue-apollo

First we are setting up vue-apollo. You will get a main.js file that starts your app if you started with vue-cli or codesanbox. Main.js imports vue and calls our main component, we have to add vue-apollo here with its configurations. After importing Apollo-boost and vue-apollo initialise vue-apollo by passing a uri to ApolloClient and tells vue to use vue-apollo as a client. Then set up our provider to be the apolloProvider. We are importing Form component that will hold our mutation to add the name component which will have all names in our server in our app.vue.

import { gql } from "apollo-boost";  
export const GET_NAMES = gql`  
  query { 
    allNameses {  
      id 
      name 
    }
  }  
`;  
export const ADD_NAME = gql`  
  mutationcreateNames($name: String!) {
  createNames(name: $name) {
  
      name
      id 
    }  
  }
  
`;  
export const DELETE_NAME = gql`
  mutation deleteNames($id: ID!) {  
    deleteNames(id:$id) {
      name
      id
    } 
  }
  
`;

import { gql } from "apollo-boost";
 
export const GET_NAMES = gql`
  query {
    allNameses {
      id
      name
    }
  }
`;
 
export const ADD_NAME = gql`
  mutation
createNames($name: String!) {
    createNames(name:$name) {
      name
      id
    }
  }
`;
 
export const DELETE_NAME = gql`
  mutation deleteNames($id: ID!) {
    deleteNames(id:$id) {
      name
      id
    }
  }
`;

We are going to import our query and start ApolloQuery comopent.

<template>
  <ApolloQuery:query="query">
    <template slot-scope="{ result: { loading, error, data } }">     
    </template>
  </ApolloQuery>
</template> 
<script>
import { GET_NAMES } from "../queries.js";
export default {
  name:"Names",
  data() {
    return {
      query: GET_NAMES
    };
  }
};
</script>
 <style scoped>
</style>

Import the  GET_NAMES query from queries.js file. Set it as query property on the data and then calling it in template. Initialise ApolloQuery component passing it the same query, it returns a template which gets the result from query as props.

To check if it is loading by creating two elements that checks for properties.

<template>
  <ApolloQuery:query="query">
    <template slot-scope="{ result: { loading, error, data } }">
      <span v-if="loading">Loading...</span>
      <span v-else-if="error">An error occured</span>
      <section v-if="data">         
      </section>
    </template>
  </ApolloQuery>
</template>

Now we have some data to display as a list:

<template>
  <ApolloQuery:query="query">
    <template slot-scope="{ result: { loading, error, data } }">
      <span v-if="loading">Loading...</span>
      <span v-else-if="error">An error occured</span>
      <section v-if="data">
          <ul>
            <li :key="name.id" v-for="name in data.allNameses" >
             
              {{name.name}}
            </li>
          </ul>
      </section>
    </template>
  </ApolloQuery>
</template>

Now we go in to our Form.vue and add our names to the server using mutation. Import mutation queries from queries.js and create a simple form to hold the names the user inputs. It has input that has model which uses two-way binding and calls submit method.