Photo by Daniel Cheung on Unsplash

 

GraphQL is the most easygoing way to querying APIs. With a single endpoint, we can directly execute queries from the defined schema and it will perform actions accordingly.

 

Apollo client is a community-driven effort to build an easy-to-understand, flexible and powerful GraphQL client.

 

Let’s quickly Integrate APIs through GraphQL using Vue-apollo.
First of all, install the vue-apollo-client and their dependencies 📦 in your Vue application using the command below.

npm install --save vue-apollo graphql apollo-client apollo-link apollo-link-http apollo-link-context apollo-cache-inmemory graphql-tag

 

⚙️ Set up vue-apollo-client in main.js:

 

Step 1: 🗃 Import files

 

Import files from the library and add a plugin to your Vue app.

 

main.js

 

Step 2: Create a custom link

 

Add your graphql API endpoint in httpLink. Here, I am connecting to mock API https://api.graph.cool/simple/v1/ciyz901en4j590185wkmexyex.

 

main.js

 

Create a custom link using ApolloLink interface. Add authMiddleware in the link, if you have set authorization header.

 

Step 3: Add apolloProvider in Vue instance

 

main.js

 

Create ApolloClient instance, link is one of the required objects of ApolloClient instance. InMemoryCache is a normalized data store. connectToDevTools will enable apollo client DevTools chrome extension to connect to your application.

 

Add apolloProvider in vue instance. apolloProvider holds multiple apolloClient instances which are used by the components.

 

Now, your app is ready to use vue apollo.

 

Programmer GIF - Find & Share on GIPHY

 

 

✏️ Integrate API in your component:

 

Let’s take a simple example, we have 3 fields: the user id, name, and email in the user table. We are going to fetch those records from the user table and display them on the client-side.

 

Write a query in your component and call it from anywhere instead of having it called automatically when the component has been mounted. That’s why we are not using apollo special option because we don’t want to skip queries using the skip() method.

 

Step 1: Make graphql query

 

Import template literal tag gql in your component.

 

Users.vue

 

Making graphql query to fetch data from the user table, retrieve names in ascending order and details of only those users whose email Id contains the particular character. $character is variable. we will assign value to $character whenever we’ll fire this query.

 

Step 2: Fetch data with query

 

Create a method which fires query through vue-apollo-client. We are passing constant GET_USER_DETAILS in a query. If you are using variables in query then pass those in variables. We’ll pass the value of $character in arguments.

 

Users.vue

 

Apollo-client will provide a loading state in response, based on this we can set loader.

 

Using fetchPolicy we can define interaction with apollo cache. By default, it is cache-first. You can also use the values: cache-and-network, network-only, no-cache, or cache-only based on your requirements.

 

Step 3: Here’s what the template looks like

 

Users.vue

 

 

Rendering user list in browser
Rendering user list in the browser

 

 

That’s about it!! You can see the full source code here. For the advanced options, you can go through this official document.

 

Thanks for reading 🙂  For more great reads about programming, follow me and Aubergine solutions and get notified on our latest post.