Perkuat aplikasi React dengan GraphQL melalui REST API – Beragampengetahuan

Dalam pengembangan web, pengoptimalan dan penskalaan aplikasi selalu menjadi masalah. React.js telah mencapai kesuksesan luar biasa sebagai alat dalam pengembangan front-end, menyediakan cara yang ampuh untuk membuat antarmuka pengguna. Namun seiring berkembangnya aplikasi Anda, segalanya menjadi rumit, terutama ketika beberapa titik akhir REST API terlibat. Masalah seperti pengambilan yang berlebihan (memerlukan terlalu banyak data) dapat menjadi sumber hambatan kinerja dan pengalaman pengguna yang buruk.

Salah satu solusi terhadap tantangan ini adalah dengan menggunakan GraphQL dengan aplikasi React. Jika Anda memiliki beberapa titik akhir REST di backend Anda, memperkenalkan lapisan GraphQL yang memanggil titik akhir REST API secara internal dapat menyempurnakan aplikasi Anda, mencegah pengambilan berlebihan, dan menyederhanakan aplikasi front-end Anda. Pada artikel ini, Anda akan mempelajari cara menggunakannya, kelebihan dan kekurangan metode ini, berbagai tantangan dan cara mengatasinya. Kami juga akan mendalami beberapa contoh nyata tentang bagaimana GraphQL dapat membantu Anda meningkatkan cara Anda bekerja dengan data.

Pengambilan berlebihan di REST API

Dalam REST API, pengambilan berlebihan terjadi ketika jumlah data yang diteruskan API ke klien melebihi jumlah data yang dibutuhkan oleh klien. Ini adalah masalah umum pada REST API, yang biasanya mengembalikan objek tetap atau skema respons. Untuk lebih memahami masalah ini, mari kita perhatikan sebuah contoh.

Pertimbangkan halaman profil pengguna yang hanya berisi halaman pengguna name Dan email. Menggunakan REST API biasa, mendapatkan data pengguna mungkin terlihat seperti ini:

fetch('/api/users/1')
  .then(response => response.json())
  .then(user => {
    // Use the user's name and profilePicture in the UI
  });

Respons API akan berisi data yang tidak diperlukan:

{
  "id": 1,
  "name": "John Doe",
  "profilePicture": "/images/john.jpg",
  "email": "john@example.com",
  "address": "123 Denver St",
  "phone": "111-555-1234",
  "preferences": {
    "newsletter": true,
    "notifications": true
  },
  // ...more details
}

Meskipun aplikasi hanya memerlukan kolom nama pengguna dan email, API mengembalikan seluruh objek pengguna. Data tambahan ini biasanya meningkatkan ukuran payload, menghabiskan lebih banyak bandwidth, dan pada akhirnya memperlambat aplikasi saat digunakan pada perangkat dengan sumber daya terbatas atau koneksi jaringan yang lambat.

GraphQL sebagai solusinya

GraphQL memecahkan masalah pengambilan berlebihan dengan memungkinkan klien meminta data yang mereka butuhkan secara tepat. Dengan mengintegrasikan server GraphQL ke dalam aplikasi, Anda dapat membuat lapisan pengambilan data yang fleksibel dan efisien yang berkomunikasi dengan REST API yang ada.

cara kerjanya

1. Pengaturan server GraphQL

Anda memperkenalkan server GraphQL yang bertindak sebagai perantara antara front end React dan REST API.

2. Definisi skema

Anda menentukan skema GraphQL, menentukan tipe data dan kueri yang diperlukan oleh front end.

3. Implementasi pengurai

Anda menerapkan parser di server GraphQL yang mengambil data dari REST API dan hanya mengembalikan kolom yang diperlukan.

4. Integrasi ujung depan

Anda memperbarui aplikasi React Anda untuk menggunakan kueri GraphQL alih-alih panggilan REST API langsung.

Pendekatan ini memungkinkan Anda mengoptimalkan akuisisi data tanpa merombak infrastruktur backend yang ada.

Mengimplementasikan GraphQL dalam aplikasi React

Mari kita lihat cara menyiapkan server GraphQL dan mengintegrasikannya ke dalam aplikasi React.

Instal dependensi

npm install apollo-server graphql axios

Definisikan arsitektur

Buat file bernama schema.js:

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

const typeDefs = gql`
  type User {
    id: ID!
    name: String
    email: String  // Ensure this matches exactly with the frontend query
  }
  type Query {
    user(id: ID!): User
  }
`;

module.exports = typeDefs;

Pola ini mendefinisikan a User jenis dan a user Permintaan untuk mendapatkan pengguna berdasarkan ID.

Menerapkan pengurai

Buat file bernama resolvers.js:

const resolvers = {

  Query: {
    user: async (_, { id }) => {
      try {
        const response = await fetch(`
        const user = await response.json();
        return {
          id: user.id,
          name: user.name,
          email: user.email,  // Return email instead of profilePicture
        };
      } catch (error) {
        throw new Error(`Failed to fetch user: ${error.message}`);
      }
    },
  },
};

module.exports = resolvers;

Pengurainya adalah user Kueri mengambil data dari REST API dan hanya mengembalikan bidang yang diperlukan.

Kami akan menggunakan ini untuk REST API palsu kami.

Siapkan server

Buat sebuah server.js dokumen:

const { ApolloServer } = require('apollo-server');
const typeDefs = require('./schema');
const resolvers = require('./resolvers');

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

server.listen({ port: 4000 }).then(({ url }) => {
  console.log(`GraphQL Server ready at ${url}`);
});

Mulai server:

Server GraphQL Anda terletak di Jika Anda menanyakan server, Anda akan dibawa ke halaman ini.

Integrasikan dengan aplikasi React

Kami sekarang akan mengubah aplikasi React untuk menggunakan GraphQL API.

Instal klien Apollo

npm install @apollo/client graphql

Konfigurasikan klien Apollo

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

const client = new ApolloClient({
  uri: ' 
  cache: new InMemoryCache(),
});

Menulis kueri GraphQL

const GET_USER = gql`
  query GetUser($id: ID!) {
    user(id: $id) {
      id
      name
      email
    }
  }
`;

Sekarang, integrasikan cuplikan kode di atas dengan aplikasi React Anda. Berikut adalah aplikasi React sederhana yang memungkinkan pengguna memilih userId dan menampilkan informasi:

import { useState } from 'react';
import { ApolloClient, InMemoryCache, ApolloProvider, gql, useQuery } from '@apollo/client';
import './App.css';  // Link to the updated CSS

const client = new ApolloClient({
  uri: '  // Ensure this is the correct URL for your GraphQL server
  cache: new InMemoryCache(),
});

const GET_USER = gql`
  query GetUser($id: ID!) {
    user(id: $id) {
      id
      name
      email
    }
  }
`;

const User = ({ userId }) => {
  const { loading, error, data } = useQuery(GET_USER, {
    variables: { id: userId },
  });

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error.message}</p>;

  return (
    <div className="user-container">
      <h2>{data.user.name}</h2>
      <p>Email: {data.user.email}</p>
    </div>
  );
};

const App = () => {
  const [selectedUserId, setSelectedUserId] = useState("1");

  return (
    <ApolloProvider client={client}>
      <div className="app-container">
        <h1 className="title">GraphQL User Lookup</h1>
        <div className="dropdown-container">
          <label htmlFor="userSelect">Select User ID:</label>
          <select
            id="userSelect"
            value={selectedUserId}
            onChange={(e) => setSelectedUserId(e.target.value)}
          >
            {Array.from({ length: 10 }, (_, index) => (
              <option key={index + 1} value={index + 1}>
                {index + 1}
              </option>
            ))}
          </select>
        </div>
        <User userId={selectedUserId} />
      </div>
    </ApolloProvider>
  );
};

export default App;

hasil

Anda akan melihat detail pengguna sederhana seperti ini: [Github Link].

Gunakan beberapa titik akhir

Bayangkan sebuah skenario di mana Anda perlu mengambil postingan pengguna tertentu bersama dengan komentar individual untuk setiap postingan. Daripada membuat tiga panggilan API terpisah dari aplikasi React front-end dan memproses data yang tidak diperlukan, Anda dapat menggunakan GraphQL untuk menyederhanakan prosesnya. Dengan menentukan skema dan membuat kueri GraphQL, Anda hanya dapat meminta data persis yang dibutuhkan UI Anda, sebuah permintaan lengkap yang efisien.

Kita perlu mendapatkan data pengguna, postingan mereka, dan komentar untuk setiap postingan dari titik akhir yang berbeda. Kami akan menggunakan pengambilan untuk mengumpulkan data dari beberapa titik akhir dan mengembalikannya melalui GraphQL.

Perbarui pengurai

const fetch = require('node-fetch');

const resolvers = {
  Query: {
    user: async (_, { id }) => {
      try {
        
        // fetch user
        const userResponse = await fetch(`
        const user = await userResponse.json();

        // fetch posts for a user
        const postsResponse = await fetch(`posts?userId=${id}`);
        const posts = await postsResponse.json();

        // fetch comments for a post
        const postsWithComments = await Promise.all(
          posts.map(async (post) => {
            const commentsResponse = await fetch(`comments?postId=${post.id}`);
            const comments = await commentsResponse.json();
            return { ...post, comments };
          })
        );

        return {
          id: user.id,
          name: user.name,
          email: user.email,
          posts: postsWithComments,
        };
      } catch (error) {
        throw new Error(`Failed to fetch user data: ${error.message}`);
      }
    },
  },
};


module.exports = resolvers;

Perbarui skema GraphQL

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

const typeDefs = gql`
  type Comment {
    id: ID!
    name: String
    email: String
    body: String
  }

  type Post {
    id: ID!
    title: String
    body: String
    comments: [Comment]
  }

  type User {
    id: ID!
    name: String
    email: String
    posts: [Post]
  }

  type Query {
    user(id: ID!): User
  }
`;

module.exports = typeDefs;

Server sudah diatur server.js tetap tidak berubah. Setelah memperbarui kode React.js, kami mendapatkan output berikut:

hasil

Anda akan melihat detail pengguna seperti ini: [Github Link].

Manfaat dari pendekatan ini

Mengintegrasikan GraphQL ke dalam aplikasi React memiliki beberapa keuntungan:

Hilangkan akuisisi berlebihan

Fitur utama GraphQL adalah ia hanya mengambil apa yang Anda minta. Server hanya mengembalikan kolom yang diminta dan memastikan peningkatan kinerja dengan mengurangi jumlah data yang ditransfer melalui jaringan dengan hanya melayani apa yang diperlukan oleh kueri.

Sederhanakan kode front-end

GraphQL memungkinkan Anda mendapatkan informasi yang Anda perlukan dalam satu kueri, apa pun sumbernya. Secara internal, ia mungkin melakukan 3 panggilan API untuk mendapatkan informasi. Ini membantu menyederhanakan kode front-end Anda karena sekarang Anda tidak perlu mengatur permintaan asinkron yang berbeda dan menggabungkan hasilnya.

Tingkatkan pengalaman pengembang

Introspeksi tipe dan skema yang kuat memberikan alat dan pemeriksaan kesalahan yang lebih baik daripada implementasi API tradisional. Selain itu, pengembang dapat membuat dan menguji kueri di lingkungan interaktif, termasuk GraphiQL atau Apollo Explorer.

Mengatasi kompleksitas dan tantangan

Pendekatan ini mempunyai beberapa keuntungan, namun juga menimbulkan beberapa tantangan yang harus diatasi.

Lapisan backend tambahan

Pengenalan server GraphQL menciptakan lapisan tambahan dalam arsitektur backend, yang dapat menjadi satu titik kegagalan jika tidak dikelola dengan baik.

larutan

Perhatikan penanganan dan pemantauan kesalahan. Alat kontainerisasi dan orkestrasi seperti Docker dan Kubernetes dapat membantu mengelola skalabilitas dan keandalan.

Potensi overhead kinerja

Server GraphQL dapat membuat beberapa panggilan REST API untuk menyelesaikan satu kueri, yang dapat menimbulkan latensi dan overhead pada sistem.

larutan

Hasil cache untuk menghindari beberapa panggilan ke API. Beberapa alat, seperti DataLoader, dapat menangani proses permintaan batching dan caching.

sebagai kesimpulan

“Kesederhanaan adalah kompleksitas tertinggi” – Leonardo da Vinci

Mengintegrasikan GraphQL ke dalam aplikasi React Anda lebih dari sekedar optimalisasi kinerja – ini adalah langkah strategis menuju pembangunan aplikasi yang lebih mudah dipelihara, terukur dan efisien. Dengan memecahkan masalah pengambilan berlebihan dan menyederhanakan pengelolaan data, Anda tidak hanya meningkatkan pengalaman pengguna tetapi juga memberikan alat dan praktik yang lebih baik kepada tim pengembangan Anda.

Meskipun pengenalan lapisan GraphQL membawa tantangan tersendiri, manfaatnya sering kali lebih besar daripada kompleksitasnya. Anda dapat mengurangi potensi kekurangan dengan merencanakan penerapan secara cermat, mengoptimalkan parser, dan mengamankan titik akhir Anda. Selain itu, fleksibilitas yang diberikan oleh GraphQL membuktikan aplikasi Anda di masa depan seiring pertumbuhan dan perkembangannya.

Menerapkan GraphQL tidak berarti mengabaikan REST API yang sudah ada. Sebaliknya, ini memungkinkan Anda memanfaatkan keunggulannya sekaligus menyediakan lapisan akses data yang lebih efisien dan fleksibel untuk aplikasi front-end Anda. Pendekatan hibrid ini menggabungkan keandalan REST dengan ketangkasan GraphQL, memberikan Anda yang terbaik dari kedua hal tersebut.

Jika Anda siap untuk membawa aplikasi React Anda ke level berikutnya, pertimbangkan untuk mengintegrasikan GraphQL ke dalam strategi pengambilan data Anda. Proses ini dapat menimbulkan tantangan, namun imbalannya—proses pengembangan yang lebih lancar, pengembang yang lebih bahagia, dan pengguna yang puas—membuat upaya ini bermanfaat.

Kode lengkap tersedia

Anda dapat menemukan kode lengkap untuk implementasi ini di repositori GitHub saya.