Tutorial Apollo GraphQL untuk Pemula

GraphQL kini menjadi pilihan utama untuk pengembangan API. Ini memungkinkan klien untuk meminta data yang mereka butuhkan secara tepat - tidak lebih, tidak kurang. Ini mengubah permainan dibandingkan dengan API sebelumnya.

Sebelum GraphQL, SOAP dan REST mendominasi pengembangan API di era yang berbeda. SOAP terlalu kompleks dan berat, sementara REST memecahkan masalah ini tetapi masih memiliki masalah dengan data yang tidak cocok. GraphQL dibuat khusus untuk mengatasi masalah ini.

Dengan semakin populernya GraphQL, pengembang membutuhkan alat yang lebih baik untuk membantu pengembangan. Apollo muncul untuk menyediakan solusi GraphQL tumpukan penuh termasuk dukungan klien, server, dan perkakas. Ini membuat GraphQL jauh lebih mudah dipelajari dan diadopsi.

Dengan menyederhanakan kurva pembelajaran GraphQL, Apollo telah memicu proliferasinya. Apollo memainkan peran penting dalam ekosistem GraphQL, memungkinkan pengembang untuk membangun API dengan lebih efisien.

Apa itu Apollo GraphQL

Apollo adalah toolkit yang dirancang khusus untuk GraphQL. Ia menawarkan cara untuk menarik data dari berbagai sumber dan menyatukannya secara terpadu. Dengan Apollo GraphQL, pengembang dapat membuat aplikasi yang efisien dan disederhanakan. Alat-alatnya menangani tugas-tugas kompleks dan sederhana, memastikan bahwa bekerja dengan GraphQL adalah pengalaman yang lancar dari awal hingga akhir.

Arsitektur Apollo GraphQL

Apollo adalah serangkaian alat dan pustaka komprehensif yang dirancang untuk membantu pengembang membangun, mengelola, dan menskalakan aplikasi dengan GraphQL. Dengan menyediakan solusi klien dan server, Apollo menyederhanakan kueri dan memutasikan data, membuat pengembangan aplikasi GraphQL efisien dan ramah pengembang. Arsitektur Apollo mencakup Klien, Server, dan Federasi

Klien Apollo GraphQL

Apollo Client adalah pustaka manajemen status untuk JavaScript yang memungkinkan Anda mengelola data lokal dan jarak jauh dengan GraphQL. Ia terintegrasi dengan mulus dengan pustaka front-end JavaScript apa pun, seperti React atau Vue, dan memungkinkan caching, pembaruan UI optimis, dan data waktu nyata melalui langganan.

Contoh:

import { ApolloClient, InMemoryCache } from '@apollo/client';

// Ini mengatur koneksi ke server Anda.
const client = new ApolloClient({
  uri: 'http://localhost:4000/',
  cache: new InMemoryCache()
});

Server Apollo GraphQL

Apollo Server adalah perantara antara skema GraphQL Anda dan sumber data (seperti basis data atau REST API). Ia menawarkan pengaturan yang mudah, membuatnya mudah untuk menghubungkan API, menentukan skema, dan menulis fungsi resolver.

Contoh:

const { ApolloServer } = require('apollo-server');
const typeDefs = `
  type Query {
    hello: String
  }
`;

const resolvers = {
  Query: {
    hello: () => "Hello, world!"
  }
};
const server = new ApolloServer({ typeDefs, resolvers });
server.listen();  // Ini memulai server kita.

Federasi Apollo GraphQL

Federasi adalah fitur Apollo GraphQL Server yang memungkinkan beberapa layanan implementasi untuk menyusun grafik data tunggal. Ini memungkinkan Anda memecah API GraphQL monolitik Anda menjadi layanan yang lebih kecil dan lebih mudah dipelihara tanpa kehilangan kenyamanan untuk meminta semuanya melalui satu titik akhir.

Keuntungan dari Federasi Apollo GraphQL

Skalabilitas: Pisahkan lapisan GraphQL Anda menjadi beberapa layanan. Saat tim atau proyek Anda berkembang, Anda dapat membagi grafik Anda tanpa membebani satu titik pun.
Kecepatan Pengembangan: Tim dapat mengerjakan layanan individual tanpa memengaruhi yang lain, memungkinkan iterasi yang lebih cepat.
Penggunaan Kembali: Layanan umum dapat digunakan kembali di berbagai bagian organisasi, mengurangi redundansi.
Akses Terpadu: Untuk klien, ini masih satu titik akhir tunggal. Mereka tidak akan melihat perbedaan antara meminta satu layanan atau lima layanan.

Contoh:

const { ApolloServer, gql } = require('apollo-server');
const { buildFederatedSchema } = require('@apollo/federation');

const typeDefs = gql`
  type Query {
    hello: String
  }
`;

const resolvers = {
  Query: {
    hello: () => "Hello from federated server!"
  }
};

const server = new ApolloServer({
  schema: buildFederatedSchema([{ typeDefs, resolvers }])
});

server.listen();  // Ini memulai server federasi kita.

Menyelami Lebih Dalam Klien Apollo GraphQL

Apollo Client adalah alat yang ampuh yang membantu aplikasi berkomunikasi dengan server GraphQL, membuat pengambilan data efisien dan mudah. Ia menawarkan solusi untuk masalah umum, seperti caching dan manajemen status. Mari kita selami lebih dalam.

Bagaimana Klien Apollo GraphQL Memfasilitasi Pengambilan Data

Dengan permintaan HTTP biasa, pengambilan data bisa jadi membosankan, melibatkan pengaturan titik akhir dan penguraian respons. Apollo Client menyederhanakan ini.

Langkah-Langkah Dasar untuk Mengambil Data dengan Apollo Client:

Pengaturan: Pertama, Anda harus mengatur Apollo Client dengan mengarahkannya ke server Anda.

import { ApolloClient, InMemoryCache } from '@apollo/client';

const client = new ApolloClient({
  uri: 'http://localhost:4000/graphql',
  cache: new InMemoryCache()
});

Tulis Kueri: Gunakan bahasa kueri GraphQL untuk menentukan data yang Anda butuhkan.

import { gql } from '@apollo/client';
const GET_DATA = gql`
{
  myData {
    name
    age
  }
}
`;

Ambil: Gunakan kueri untuk meminta data dari server.

client.query({ query: GET_DATA }).then(response => {
  console.log(response.data.myData);
});

Respons akan berisi nama dan usia secara tepat, tidak lebih atau kurang, memastikan transfer data yang efisien.

Mengelola Status Lokal dengan Apollo Client

Apollo GraphQL Client tidak hanya untuk data server; ia juga dapat mengelola data lokal, menjadikannya satu sumber kebenaran untuk semua data aplikasi Anda.

Bidang Lokal: Tambahkan bidang khusus sisi klien ke data server Anda.

const GET_DATA_WITH_LOCAL_FIELD = gql`
{
  myData {
    name
    age
    isFavorite @client
  }
}
`;

Arahan @client memberi tahu Apollo Client bahwa isFavorite adalah bidang lokal.

Resolver Lokal: Tangani tindakan pada data sisi klien.

const resolvers = {
  Mutation: {
    toggle: (_, { id }, { cache }) => {
      const data = cache.readFragment({
        fragment: gql`fragment favorite on Data { isFavorite }`,
        id
      });
      data.isFavorite = !data.isFavorite;
      cache.writeData({ id, data });
      return data;
    },
  },
};

Menggunakan resolver, Anda dapat memanipulasi status lokal seperti yang Anda lakukan dengan data server.

Strategi Caching untuk Kinerja

Mengambil data dari server membutuhkan waktu, tetapi caching Apollo Client membantu mempercepatnya. Berikut caranya:

Caching Otomatis: Setiap respons dari server GraphQL Anda disimpan secara otomatis. Jadi, jika Anda meminta data yang sama lagi, Apollo Client dapat mengambilnya dari cache alih-alih server.
Cache Normalisasi: Apollo Client tidak hanya menyimpan data secara membabi buta. Ia memecah respons Anda menjadi objek individual dan menyimpannya berdasarkan jenis dan ID. Pendekatan ini menghindari redundansi dan menjaga cache tetap sinkron.
Kebijakan Cache: Apollo Client memungkinkan Anda memutuskan cara mengambil data dari cache, server, atau keduanya.

Dengan kebijakan seperti cache-first, network-only, dan cache-and-network, Anda dapat menyempurnakan kinerja aplikasi Anda.

Menguasai Server Apollo GraphQL

Apollo Server menyediakan lingkungan yang kuat untuk membantu pengembang mengimplementasikan server GraphQL. Mulai dari menyiapkan dasar-dasarnya hingga menyelami fitur-fitur lanjutan, menguasai Apollo Server sangat penting untuk implementasi GraphQL yang efisien.

Dasar-Dasar Menyiapkan Server Apollo

Fondasi dari setiap proyek Apollo Server dimulai dengan pengaturannya.

Instalasi: Mulailah dengan menginstal paket yang diperlukan:

npm install apollo-server graphql

Inisialisasi Server Apollo GraphQL:

const { ApolloServer } = require('apollo-server');
const typeDefs = /*...*/; // definisi skema Anda
const resolvers = /*...*/; // fungsi resolver Anda

const server = new ApolloServer({ typeDefs, resolvers });

server.listen().then(({ url }) => {
  console.log(`Server siap di ${url}`);
});

Mendefinisikan Skema dan Resolver GraphQL

Setiap server GraphQL membutuhkan skema untuk mendefinisikan bentuk API-nya dan resolver untuk menangani permintaan data.

Skema GraphQL: Jelaskan struktur data Anda.

const { gql } = require('apollo-server');

const typeDefs = gql`
  type Query {
    hello: String
  }
`;

Resolver: Tentukan bagaimana data diambil atau dimodifikasi.

const resolvers = {
  Query: {
    hello: () => 'Hello, world!',
  },
};

Ketika klien mengirim kueri untuk mengambil hello, server akan merespons dengan "Hello, world!".

Ekosistem Lanjutan Apollo GraphQL

Apollo telah melampaui batas alat implementasi GraphQL belaka. Sekarang ia menawarkan ekosistem luas yang mencakup tidak hanya pengambilan data dan manajemen status tetapi juga arsitektur layanan mikro dan alat kolaborasi untuk pengembang. Mari kita selami beberapa komponen penting dari ekosistem ini.

Apa itu Apollo GraphQL Studio?

Apollo Studio (sebelumnya dikenal sebagai Apollo Engine) adalah platform yang disediakan oleh tim Apollo yang menawarkan serangkaian layanan dan alat cloud untuk mengembangkan, menyebarkan, dan memantau operasi GraphQL. Apollo Studio dirancang untuk bekerja berdampingan dengan Apollo Client dan Apollo Server tetapi juga dapat digunakan dengan skema GraphQL dan mesin eksekusi apa pun.

Berikut adalah panduan singkat dan beberapa petunjuk untuk dipertimbangkan:

Menyiapkan & Menjalankan Kueri:

Editor operasi adalah area utama tempat Anda membuat draf kueri, mutasi, atau langganan GraphQL.

Di bagian "Variabel", masukkan detail yang diperlukan, seperti {"code": "AF"}, sesuaikan seperlunya untuk kueri tertentu.
Jika kueri Anda memerlukan header HTTP (misalnya, untuk autentikasi), isi di bagian "Header", lalu mulai kueri Anda menggunakan tombol putar atau perintah yang dapat dieksekusi serupa.

Interpretasi Respons:

Setelah dieksekusi, respons akan terisi di panel kanan, menunjukkan pengembalian data dan kesalahan yang berhasil.
Tinjau respons dengan cermat; kesalahan sering memberikan petunjuk tentang masalah. Misalnya, ketidakcocokan jenis dalam variabel akan menghasilkan kesalahan.
Kueri yang diformat dengan benar dan berhasil akan mengembalikan data sesuai dengan struktur skema.

Eksplorasi Skema:

Biasakan diri Anda dengan skema GraphQL menggunakan tab "Dokumentasi" di sebelah kiri; ini mencantumkan kueri, mutasi, dan jenis yang tersedia.
Dokumentasi ini menawarkan wawasan tentang bidang, argumen yang diharapkan, dan jenis pengembalian.
Manfaatkan fitur pelengkapan otomatis editor, yang memberikan saran berdasarkan skema, membuat formulasi kueri lebih cepat.

Fitur Tambahan:

Fitur "Riwayat" di Apollo Studio memungkinkan Anda untuk mengunjungi kembali dan menjalankan kembali kueri sebelumnya, membantu dalam pengujian berulang.
Meskipun Anda dapat membuat draf dan menyimpan beberapa kueri/mutasi dalam satu tab, ingatlah untuk menjalankannya satu per satu, yang sangat berguna ketika kueri saling terkait atau bergantung.

Integrasi dengan Apidog

Apidog meningkatkan pengalaman GraphQL dengan berintegrasi secara mulus dengan fitur debugging-nya. Integrasi ini memastikan pengembang dapat secara efisien menentukan dan menyelesaikan masalah dalam implementasi GraphQL mereka.

Kami mendorong pengembang dan tim untuk menjelajahi dan bereksperimen dengan serangkaian fitur Apidog. Dengan mencoba Apidog, pengguna dapat memanfaatkan lapisan alat dan wawasan tambahan, yang selanjutnya mengoptimalkan upaya pengembangan dan pengujian GraphQL mereka.

Kesimpulan

Sebagai kesimpulan, artikel ini telah membawa Anda melalui fitur-fitur revolusioner GraphQL dan kemampuan Apidog yang hebat. Apakah Anda seorang pengembang berpengalaman atau pendatang baru dalam pengujian API, alat dan wawasan yang ditawarkan oleh GraphQL dan Apidog dapat membantu Anda membangun aplikasi yang lebih kuat dan andal. Coba Apidog hari ini!