Relay adalah kerangka kerja (framework) JavaScript yang dirancang oleh Facebook untuk mengelola dan memfasilitasi pengambilan serta penyinkronan data dalam aplikasi berbasis React. Relay bekerja secara khusus dengan GraphQL, sebuah query language untuk API, untuk memungkinkan aplikasi mendapatkan data dengan cara yang efisien, terstruktur, dan dapat diatur.

Relay menyediakan cara otomatis dan teroptimasi untuk mem-fetch data, melakukan cache, serta memperbarui tampilan aplikasi React saat data berubah. Tujuan utamanya adalah memaksimalkan performa dan efisiensi data-fetching dengan menjaga agar jumlah permintaan jaringan tetap minimum.

Keunggulan Menggunakan Relay

• Optimasi Data Fetching: Relay mengoptimalkan pengambilan data, sehingga hanya mengambil data yang dibutuhkan komponen secara spesifik.
• Manajemen Cache yang Cerdas: Relay menggunakan cache pintar untuk mengurangi jumlah request yang dilakukan oleh aplikasi. Data yang sudah diambil sebelumnya akan disimpan untuk penggunaan di masa mendatang.
• Colocation Queries: Relay memungkinkan Anda untuk menulis query GraphQL langsung di dalam komponen React, menjadikannya lebih terorganisir dan mudah untuk memahami hubungan antara UI dan data yang dibutuhkan.
• Handling Pagination and Mutations: Relay mempermudah penanganan pagination (memuat data bertahap) dan mutasi (perubahan data seperti pembaruan, penambahan, atau penghapusan).

Cara Kerja Relay

Relay bekerja dengan GraphQL untuk mengirimkan query dari komponen React ke server. Setiap komponen dapat menentukan data yang dibutuhkan, dan Relay akan menggabungkan semua query dari berbagai komponen menjadi satu permintaan (batched request), lalu mengirimkannya ke server.

Berikut alur sederhana bagaimana Relay bekerja:

• Komponen React mendefinisikan data yang dibutuhkan menggunakan query GraphQL.
• Relay mengumpulkan semua query dari komponen yang aktif.
• Relay mengirim satu permintaan gabungan ke server GraphQL.
• Server GraphQL merespons dengan data yang diminta.
• Relay mengirimkan data tersebut ke komponen yang membutuhkannya dan menyimpannya di cache untuk digunakan kembali.

Menggunakan Relay: Langkah-Langkah Dasar

Untuk menggunakan Relay, berikut adalah langkah-langkah yang harus diikuti:

1. Instalasi Relay dan GraphQL**

Untuk memulai, kita perlu menginstal react-relay dan alat CLI untuk menjalankan kompilasi schema GraphQL:

npm install react-relay relay-compiler graphql babel-plugin-relay

2. Buat Skema GraphQL

Relay bekerja dengan schema GraphQL. Anda memerlukan file skema yang berisi definisi dari semua tipe data dan hubungan di API Anda. Anda bisa menghasilkan skema ini dengan alat seperti Apollo Server atau lainnya yang mendukung GraphQL.

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

type User {
  id: ID!
  name: String!
  email: String!
}

3. Definisikan Query di Komponen React

Dalam Relay, Anda mendefinisikan data yang dibutuhkan oleh komponen React langsung dalam bentuk query GraphQL. Relay kemudian akan mengoptimalkan permintaan dan pengambilan data untuk Anda.

Berikut adalah contoh bagaimana Anda mendefinisikan query GraphQL di dalam komponen React:

import React from 'react';
import { graphql, useLazyLoadQuery } from 'react-relay/hooks';

const UserComponent = ({ userId }) => {
  const data = useLazyLoadQuery(
    graphql`
      query UserComponentQuery($id: ID!) {
        user(id: $id) {
          id
          name
          email
        }
      }
    `,
    { id: userId }
  );

  return (
    <div>
      <h1>{data.user.name}</h1>
      <p>{data.user.email}</p>
    </div>
  );
};

export default UserComponent;

Dalam contoh di atas, kita menggunakan useLazyLoadQuery untuk mengeksekusi query GraphQL dan mengambil data yang dibutuhkan oleh komponen.

4. Konfigurasi Relay Environment

Relay membutuhkan konfigurasi khusus yang disebut "Relay Environment" untuk mengatur bagaimana permintaan dikirim ke server GraphQL dan bagaimana cache dikelola.

import { Environment, Network, RecordSource, Store } from 'relay-runtime';

function fetchQuery(operation, variables) {
  return fetch('https://api.example.com/graphql', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({
      query: operation.text,
      variables,
    }),
  }).then(response => response.json());
}

const environment = new Environment({
  network: Network.create(fetchQuery),
  store: new Store(new RecordSource()),
});

export default environment;

Relay environment di atas menentukan cara melakukan permintaan ke server GraphQL menggunakan fetchQuery, dan menggunakan Store untuk mengelola data yang disimpan di cache.

5. Gunakan Relay di Aplikasi React

Setelah kita mendefinisikan Relay environment, kita dapat menggunakannya dalam aplikasi React. Kita akan menggunakan RelayEnvironmentProvider untuk menyediakan environment ini ke komponen.

import React from 'react';
import { RelayEnvironmentProvider } from 'react-relay/hooks';
import environment from './relayEnvironment';
import UserComponent from './UserComponent';

const App = () => (
  <RelayEnvironmentProvider environment={environment}>
    <UserComponent userId="1" />
  </RelayEnvironmentProvider>
);

export default App;

Menggunakan Mutasi di Relay

Selain melakukan query, Relay juga mendukung mutasi, yang merupakan cara untuk mengubah data di server. Misalnya, berikut adalah cara untuk melakukan mutasi GraphQL menggunakan Relay:

import { graphql, commitMutation } from 'react-relay';

const mutation = graphql`
  mutation AddUserMutation($input: AddUserInput!) {
    addUser(input: $input) {
      user {
        id
        name
        email
      }
    }
  }
`;

function addUser(environment, input) {
  return commitMutation(environment, {
    mutation,
    variables: { input },
    onCompleted: (response, errors) => {
      console.log('Mutasi berhasil:', response);
    },
    onError: err => console.error(err),
  });
}

Kesimpulan

Relay adalah alat yang kuat untuk mengelola pengambilan data secara efisien dalam aplikasi React yang menggunakan GraphQL. Dengan fitur seperti cache otomatis, colocation queries, serta dukungan penuh untuk mutasi dan pagination, Relay sangat cocok digunakan dalam aplikasi skala besar yang memerlukan optimasi dan pengelolaan data yang baik.

Memahami dan menguasai Relay akan memberikan keuntungan besar dalam pengembangan aplikasi modern yang mengandalkan GraphQL sebagai sumber data utama.