Integrasi GraphQL di Vue.js: Panduan Lengkap dengan Apollo Client

 

GraphQL adalah teknologi query data yang semakin populer karena fleksibilitasnya dalam mengambil dan mengelola data dari API. Dibandingkan dengan REST API, GraphQL memungkinkan klien meminta hanya data yang dibutuhkan, sehingga lebih efisien dan cepat.

Di Vue.js, kita dapat dengan mudah mengintegrasikan GraphQL menggunakan Apollo Client, pustaka yang dirancang untuk bekerja dengan GraphQL secara optimal. Dalam artikel ini, kita akan membahas cara mengintegrasikan Apollo Client di Vue.js untuk mengambil dan mengelola data dari GraphQL API.

📌 Baca juga: Realtime Data Binding di Vue.js dengan Firebase, Gampang Banget!

1. Apa Itu Apollo Client?

Apollo Client adalah pustaka yang memungkinkan kita berinteraksi dengan API GraphQL dalam aplikasi Vue.js dengan fitur:
✅ Efisien dalam mengambil data – Hanya mengambil data yang diperlukan.
✅ Mendukung caching otomatis – Mengurangi permintaan berulang ke server.
✅ Dukungan untuk real-time data – Menggunakan subscriptions.
✅ Integrasi mudah dengan Vue.js – Menggunakan Vue Apollo.

2. Instalasi Apollo Client di Vue.js

a. Instalasi dengan NPM

Jalankan perintah berikut di terminal:

npm install @apollo/client graphql @vue/apollo-option

b. Konfigurasi Apollo Client

Buat file apollo.js di dalam folder src:

javascript

import { ApolloClient, InMemoryCache, createHttpLink } from '@apollo/client/core'
import { provideApolloClient } from '@vue/apollo-option'

const httpLink = createHttpLink({
  uri: 'https://graphql-pokemon2.vercel.app/' // Contoh API GraphQL
})

const apolloClient = new ApolloClient({
  link: httpLink,
  cache: new InMemoryCache()
})

export default apolloClient
provideApolloClient(apolloClient)

Tambahkan konfigurasi ini di main.js:

javascript

import { createApp } from 'vue'
import App from './App.vue'
import apolloClient from './apollo'

const app = createApp(App)
app.config.globalProperties.$apollo = apolloClient

app.mount('#app')

3. Menggunakan GraphQL di Komponen Vue.js

Buat komponen PokemonList.vue untuk mengambil dan menampilkan data dari API GraphQL:

vue

<template>
  <div class="container">
    <h1>Daftar Pokémon</h1>
    <ul>
      <li v-for="pokemon in pokemons" :key="pokemon.id">
        <img :src="pokemon.image" :alt="pokemon.name" />
        <p>{{ pokemon.name }}</p>
      </li>
    </ul>
    <p v-if="loading">Loading...</p>
    <p v-if="error">{{ error.message }}</p>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { gql, useQuery } from '@apollo/client'

const GET_POKEMONS = gql`
  query {
    pokemons(first: 10) {
      id
      name
      image
    }
  }
`

const pokemons = ref([])
const { loading, error, result } = useQuery(GET_POKEMONS)

onMounted(() => {
  if (result.value) {
    pokemons.value = result.value.pokemons
  }
})
</script>

<style scoped>
.container {
  max-width: 600px;
  margin: auto;
  padding: 20px;
}
ul {
  list-style: none;
  padding: 0;
}
li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  background: #f5f5f5;
  margin: 5px 0;
  border-radius: 5px;
}
img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}
</style>

Penjelasan Kode

1. Menggunakan gql untuk mendefinisikan query GraphQL.

2. Menggunakan useQuery(GET_POKEMONS) untuk mengambil data dari API.

3. Menampilkan daftar Pokémon dengan Vue.js reactivity (ref()).

4. Menampilkan loading indicator dan menangani error jika request gagal.

4. Menggunakan GraphQL Mutations untuk Menambahkan Data

GraphQL juga mendukung mutations, yang memungkinkan kita menambahkan data ke API.

Buat komponen AddPokemon.vue:

vue
<template>
  <div class="form-container">
    <input v-model="pokemonName" placeholder="Nama Pokémon" />
    <input v-model="pokemonImage" placeholder="URL Gambar" />
    <button @click="addPokemon">Tambah Pokémon</button>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { gql, useMutation } from '@apollo/client'

const ADD_POKEMON = gql`
  mutation AddPokemon($name: String!, $image: String!) {
    addPokemon(name: $name, image: $image) {
      id
      name
      image
    }
  }
`

const pokemonName = ref("")
const pokemonImage = ref("")
const { mutate } = useMutation(ADD_POKEMON)

const addPokemon = () => {
  if (!pokemonName.value || !pokemonImage.value) return
  mutate({ variables: { name: pokemonName.value, image: pokemonImage.value } })
}
</script>

<style scoped>
.form-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 300px;
  margin: auto;
}
input {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}
button {
  padding: 10px;
  background: #42b983;
  color: white;
  border: none;
  cursor: pointer;
}
</style>

Penjelasan Kode

1. Menggunakan gql untuk mendefinisikan mutation yang menambahkan Pokémon baru.

2. Menggunakan useMutation(ADD_POKEMON) untuk mengirim data ke server.

3. Mengambil input pengguna (v-model) untuk mengisi parameter mutation.

5. Keuntungan Menggunakan GraphQL di Vue.js

✅ Mengambil hanya data yang diperlukan – Mengurangi beban data yang tidak relevan.
✅ Caching otomatis dengan Apollo Client – Mempercepat respons API.
✅ Real-time update dengan Subscriptions – Memungkinkan fitur live data.
✅ Integrasi mudah dengan Vue.js – Menggunakan Vue Apollo.

Kesimpulan

Integrasi GraphQL di Vue.js dengan Apollo Client memberikan pengalaman pengambilan data yang lebih fleksibel dan efisien dibandingkan dengan REST API. Dengan fitur query, mutation, dan caching otomatis, kita dapat membuat aplikasi yang lebih cepat dan responsif.

📌 Baca juga: Realtime Data Binding di Vue.js dengan Firebase, Gampang Banget!