Kueri Relasional Parse di Aplikasi React: Panduan Lengkap

10min
Kueri Relasional di React menggunakan Parse
Pendahuluan
Dalam panduan ini, Anda akan melakukan kueri relasional di Parse dan mengimplementasikan komponen React menggunakan kueri ini. Anda akan belajar cara menyiapkan dan mengkueri data realistis menggunakan Back4App dan React.
Prasyarat
Untuk menyelesaikan tutorial ini, Anda akan membutuhkan:
Aplikasi React yang dibuat dan terhubung ke Back4App.

Jika Anda ingin menjalankan proyek contoh panduan ini, Anda harus menyiapkan ﻿Ant Design pustaka.
Tujuan
Kueri data relasional yang disimpan di Back4App dari Aplikasi React.
- Memahami kelas Parse.Query
Setiap operasi kueri Parse menggunakan Parse.Query tipe objek, yang akan membantu Anda mengambil data spesifik dari database Anda di seluruh aplikasi Anda. Sangat penting untuk mengetahui bahwa Parse.Query hanya akan terpecahkan setelah memanggil metode ambil (seperti Parse.Query.find atau Parse.Query.first), jadi kueri dapat disiapkan dan beberapa modifikator dapat dirangkai sebelum benar-benar dipanggil.
Untuk membuat Parse.Query, Anda perlu melewatkan sebagai parameter Parse.Object subclass yang diinginkan, yang akan berisi hasil query Anda. Contoh query dapat dilihat di bawah, di mana sebuah Buku  subclass sedang di-query.
JS
// This will create your query
let parseQuery = new Parse.Query("Book");
// The query will resolve only after calling this method
let queryResult = await parseQuery.find();
// This will create your query
let parseQuery = new Parse.Query("Book");
// The query will resolve only after calling this method
let queryResult = await parseQuery.find();
﻿
Anda dapat membaca lebih lanjut tentang Parse.Query class di sini pada dokumentasi resmi.
- Simpan beberapa data di Back4App
Mari kita buat berbagai kelas, yang akan menjadi target kueri kita dalam panduan ini. Kelas-kelas tersebut adalah: Penulis, Buku, Penerbit dan Toko Buku, di mana Buku  memiliki hubungan 1:N dengan Penerbit  dan N:N dengan Penulis, dan Toko Buku  memiliki hubungan N:N dengan Buku.
Di Parse JS Console, Anda dapat menjalankan kode JavaScript secara langsung, menanyakan dan memperbarui konten database aplikasi Anda menggunakan perintah JS SDK. Jalankan kode di bawah ini dari JS Console Anda dan masukkan data di Back4App. Berikut adalah tampilan konsol JS di dasbor Anda:
﻿
Silakan lanjutkan dan buat kelas dengan konten contoh berikut:
JS
// Add objects and create tables
// Authors
const AuthorA = new Parse.Object('Author');
AuthorA.set('name', 'Aaron Writer');
await AuthorA.save();

const AuthorB = new Parse.Object('Author');
AuthorB.set('name', 'Beatrice Novelist');
await AuthorB.save();

const AuthorC = new Parse.Object('Author');
AuthorC.set('name', 'Casey Columnist');
await AuthorC.save();

// Publishers
const PublisherA = new Parse.Object('Publisher');
PublisherA.set('name', 'Acacia Publishings');
await PublisherA.save();

const PublisherB = new Parse.Object('Publisher');
PublisherB.set('name', 'Birch Distributions');
await PublisherB.save();

// Books
const BookA = new Parse.Object('Book');
BookA.set('title', 'A Love Story');
BookA.set('publisher', PublisherA);
BookA.set('publishingDate', new Date('05/07/1998'));
const BookARelation = BookA.relation("authors");
BookARelation.add(AuthorA);
await BookA.save();

const BookB = new Parse.Object('Book');
BookB.set('title', 'Benevolent Elves');
BookB.set('publisher', PublisherB);
BookB.set('publishingDate', new Date('11/31/2008'));
const BookBRelation = BookB.relation("authors");
BookBRelation.add(AuthorB);
await BookB.save();

const BookC = new Parse.Object('Book');
BookC.set('title', 'Can You Believe It?');
BookC.set('publisher', PublisherB);
BookC.set('publishingDate', new Date('08/21/2018'));
const BookCRelation = BookC.relation("authors");
BookCRelation.add(AuthorA);
BookCRelation.add(AuthorC);
await BookC.save();

// BookStore
const BookStoreA = new Parse.Object('BookStore');
BookStoreA.set('name', 'Books of Love');
const BookStoreARelation = BookStoreA.relation("books");
BookStoreARelation.add(BookA);
await BookStoreA.save();

const BookStoreB = new Parse.Object('BookStore');
BookStoreB.set('name', 'Fantasy Books');
const BookStoreBRelation = BookStoreB.relation("books");
BookStoreBRelation.add(BookB);
await BookStoreB.save();

const BookStoreC = new Parse.Object('BookStore');
BookStoreC.set('name', 'General Books');
const BookStoreCRelation = BookStoreC.relation("books");
BookStoreCRelation.add(BookA);
BookStoreCRelation.add(BookC);
await BookStoreC.save();

console.log('Success');
// Add objects and create tables
// Authors
const AuthorA = new Parse.Object('Author');
AuthorA.set('name', 'Aaron Writer');
await AuthorA.save();

const AuthorB = new Parse.Object('Author');
AuthorB.set('name', 'Beatrice Novelist');
await AuthorB.save();

const AuthorC = new Parse.Object('Author');
AuthorC.set('name', 'Casey Columnist');
await AuthorC.save();

// Publishers
const PublisherA = new Parse.Object('Publisher');
PublisherA.set('name', 'Acacia Publishings');
await PublisherA.save();

const PublisherB = new Parse.Object('Publisher');
PublisherB.set('name', 'Birch Distributions');
await PublisherB.save();

// Books
const BookA = new Parse.Object('Book');
BookA.set('title', 'A Love Story');
BookA.set('publisher', PublisherA);
BookA.set('publishingDate', new Date('05/07/1998'));
const BookARelation = BookA.relation("authors");
BookARelation.add(AuthorA);
await BookA.save();

const BookB = new Parse.Object('Book');
BookB.set('title', 'Benevolent Elves');
BookB.set('publisher', PublisherB);
BookB.set('publishingDate', new Date('11/31/2008'));
const BookBRelation = BookB.relation("authors");
BookBRelation.add(AuthorB);
await BookB.save();

const BookC = new Parse.Object('Book');
BookC.set('title', 'Can You Believe It?');
BookC.set('publisher', PublisherB);
BookC.set('publishingDate', new Date('08/21/2018'));
const BookCRelation = BookC.relation("authors");
BookCRelation.add(AuthorA);
BookCRelation.add(AuthorC);
await BookC.save();

// BookStore
const BookStoreA = new Parse.Object('BookStore');
BookStoreA.set('name', 'Books of Love');
const BookStoreARelation = BookStoreA.relation("books");
BookStoreARelation.add(BookA);
await BookStoreA.save();

const BookStoreB = new Parse.Object('BookStore');
BookStoreB.set('name', 'Fantasy Books');
const BookStoreBRelation = BookStoreB.relation("books");
BookStoreBRelation.add(BookB);
await BookStoreB.save();

const BookStoreC = new Parse.Object('BookStore');
BookStoreC.set('name', 'General Books');
const BookStoreCRelation = BookStoreC.relation("books");
BookStoreCRelation.add(BookA);
BookStoreCRelation.add(BookC);
await BookStoreC.save();

console.log('Success');
﻿
- Kuery data
Sekarang setelah Anda mengisi semua kelas, kita sekarang dapat melakukan beberapa kueri relasional di dalamnya. Mari kita mulai dengan memfilter Buku hasil berdasarkan penerbit, mencari yang termasuk dalam Penerbit “Acacia Publishings” (atau “Penerbit A”) menggunakan Parse.Query.equalTo metode:
JS
// Get PublisherA object
const PublisherAQuery = new Parse.Query('Publisher');
PublisherAQuery.equalTo('name', 'Acacia Publishings');
const PublisherA = await PublisherAQuery.first();

// Query Books with PublisherA
const bookQuery = new Parse.Query('Book');
bookQuery.equalTo('publisher', PublisherA);
let queryResults = await bookQuery.find();

// Let's show the results
for (let result of queryResults) {
 // You access `Parse.Objects` attributes by using `.get`
 console.log(result.get('title'));
};
// Get PublisherA object
const PublisherAQuery = new Parse.Query('Publisher');
PublisherAQuery.equalTo('name', 'Acacia Publishings');
const PublisherA = await PublisherAQuery.first();

// Query Books with PublisherA
const bookQuery = new Parse.Query('Book');
bookQuery.equalTo('publisher', PublisherA);
let queryResults = await bookQuery.find();

// Let's show the results
for (let result of queryResults) {
 // You access `Parse.Objects` attributes by using `.get`
 console.log(result.get('title'));
};
﻿
Sekarang mari kita kuery objek mana yang BookStore yang mengandung Book objek dengan tanggal penerbitan lebih besar dari 01/01/2010, menggunakan kuery dalam dengan Parse.Query.greaterThan metode dan kemudian Parse.Query.matchesQuery metode:
JS
// Create inner Book query
const bookQuery = new Parse.Query('Book');
bookQuery.greaterThan('publishingDate', new Date('01/01/2010'));

// Query BookStore using inner Book query
const bookStoreQuery = new Parse.Query('BookStore');
bookStoreQuery.matchesQuery('books', bookQuery);
let queryResults = await bookStoreQuery.find();

// Let's show the results
for (let result of queryResults) {
 // You access `Parse.Objects` attributes by using `.get`
 console.log(result.get('name'));
};
// Create inner Book query
const bookQuery = new Parse.Query('Book');
bookQuery.greaterThan('publishingDate', new Date('01/01/2010'));

// Query BookStore using inner Book query
const bookStoreQuery = new Parse.Query('BookStore');
bookStoreQuery.matchesQuery('books', bookQuery);
let queryResults = await bookStoreQuery.find();

// Let's show the results
for (let result of queryResults) {
 // You access `Parse.Objects` attributes by using `.get`
 console.log(result.get('name'));
};
﻿
Sekarang mari kita buat kueri relasional yang lebih kompleks, mencari BookStore objek yang memiliki setidaknya satu Buku yang ditulis oleh Penulis “Aaron Writer” (atau “AuthorA”), menggunakan equalTo  dan matchesQuery:
JS
// Get AuthorA object
const AuthorAQuery = new Parse.Query('Author');
AuthorAQuery.equalTo('name', 'Aaron Writer');
const AuthorA = await AuthorAQuery.first();

// Create inner Book query
const bookQuery = new Parse.Query('Book');
bookQuery.equalTo('authors', AuthorA);

// Query BookStore using inner Book query
const bookStoreQuery = new Parse.Query('BookStore');
bookStoreQuery.matchesQuery('books', bookQuery);
let queryResults = await bookStoreQuery.find();

// Let's show the results
for (let result of queryResults) {
 // You access `Parse.Objects` attributes by using `.get`
 console.log(result.get('name'));
};
// Get AuthorA object
const AuthorAQuery = new Parse.Query('Author');
AuthorAQuery.equalTo('name', 'Aaron Writer');
const AuthorA = await AuthorAQuery.first();

// Create inner Book query
const bookQuery = new Parse.Query('Book');
bookQuery.equalTo('authors', AuthorA);

// Query BookStore using inner Book query
const bookStoreQuery = new Parse.Query('BookStore');
bookStoreQuery.matchesQuery('books', bookQuery);
let queryResults = await bookStoreQuery.find();

// Let's show the results
for (let result of queryResults) {
 // You access `Parse.Objects` attributes by using `.get`
 console.log(result.get('name'));
};
﻿
- Kueri dari komponen React
Mari kita gunakan kueri contoh kita di dalam sebuah komponen di React, dengan antarmuka sederhana yang memiliki daftar yang menunjukkan hasil dan juga tombol untuk memanggil kueri. Inilah cara kode komponen disusun, perhatikan doQuery fungsi, yang berisi kode contoh dari sebelumnya.
JavaScript
TypeScript
import React, { useState, FC, ReactElement } from 'react';
import './App.css';
import { Button, Divider } from 'antd';
import { CloseOutlined, SearchOutlined } from '@ant-design/icons';
const Parse = require('parse/dist/parse.min.js');

export const QueryRelational: FC<{}> = (): ReactElement => {
 // State variable
 const [queryResults, setQueryResults] = useState<Parse.Object[]>();

 const doQueryA = async function (): Promise<boolean> {
   // Get PublisherA object
   const PublisherAQuery: Parse.Query = new Parse.Query('Publisher');
   PublisherAQuery.equalTo('name', 'Acacia Publishings');
   const PublisherA: Parse.Object | undefined = await PublisherAQuery.first();

   // Query Books with PublisherA
   const bookQuery: Parse.Query = new Parse.Query('Book');
   bookQuery.equalTo('publisher', PublisherA);

   try {
     let results: Parse.Object[] = await bookQuery.find();
     setQueryResults(results);
     return true;
   } catch (error) {
     // Error can be caused by lack of Internet connection
     alert(`Error! ${error.message}`);
     return false;
   }
 };

 const doQueryB = async function (): Promise<boolean> {
   // Create inner Book query
   const bookQuery: Parse.Query = new Parse.Query('Book');
   bookQuery.greaterThan('publishingDate', new Date('01/01/2010'));

   // Query BookStore using inner Book query
   const bookStoreQuery: Parse.Query = new Parse.Query('BookStore');
   bookStoreQuery.matchesQuery('books', bookQuery);

   try {
     let results: Parse.Object[] = await bookStoreQuery.find();
     setQueryResults(results);
     return true;
   } catch (error) {
     // Error can be caused by lack of Internet connection
     alert(`Error! ${error.message}`);
     return false;
   }
 };

 const doQueryC = async function (): Promise<boolean> {
   // Get AuthorA object
   const AuthorAQuery: Parse.Query = new Parse.Query('Author');
   AuthorAQuery.equalTo('name', 'Aaron Writer');
   const AuthorA: Parse.Object | undefined = await AuthorAQuery.first();

   // Create inner Book query
   const bookQuery: Parse.Query = new Parse.Query('Book');
   bookQuery.equalTo('authors', AuthorA);

   // Query BookStore using inner Book query
   const bookStoreQuery: Parse.Query = new Parse.Query('BookStore');
   bookStoreQuery.matchesQuery('books', bookQuery);

   try {
     let results: Parse.Object[] = await bookStoreQuery.find();
     setQueryResults(results);
     return true;
   } catch (error) {
     // Error can be caused by lack of Internet connection
     alert(`Error! ${error.message}`);
     return false;
   }
 };

 const clearQueryResults = async function (): Promise<boolean> {
   setQueryResults(undefined);
   return true;
 };

 return (
   <div>
     <div className="header">
       <img
         className="header_logo"
         alt="Back4App Logo"
         src={
           'https://blog.back4app.com/wp-content/uploads/2019/05/back4app-white-logo-500px.png'
         }
       />
       <p className="header_text_bold">{'React on Back4App'}</p>
       <p className="header_text">{'Relational Queries'}</p>
     </div>
     <div className="container">
       <div className="flex_between">
         <h2 className="heading">{'Query List'}</h2>
         <div className="flex">
           <Button
             onClick={() => doQueryA()}
             type="primary"
             className="heading_button"
             color={'#208AEC'}
             icon={<SearchOutlined />}
           >
             QUERY A
           </Button>
           <Button
             onClick={() => doQueryB()}
             type="primary"
             className="heading_button"
             color={'#208AEC'}
             icon={<SearchOutlined />}
           >
             QUERY B
           </Button>
           <Button
             onClick={() => doQueryC()}
             type="primary"
             className="heading_button"
             color={'#208AEC'}
             icon={<SearchOutlined />}
           >
             QUERY C
           </Button>
           <Button
             onClick={() => clearQueryResults()}
             type="primary"
             className="heading_button"
             color={'#208AEC'}
             icon={<CloseOutlined />}
           >
             CLEAR RESULTS
           </Button>
         </div>
       </div>
       <Divider />
       <div className="flex_between">
         <div className="flex_child">
           {/* Query list */}
           {queryResults !== undefined &&
             queryResults.map((result: Parse.Object, index: number) => (
               <div className="list_item" key={`${index}`}>
                 <p className="list_item_title">{`${result.get('name') !== undefined ? result.get('name') : result.get('title')}`}</p>
               </div>
             ))}
           {queryResults !== undefined &&
           queryResults.length <= 0 ? (
             <p>{'No results here!'}</p>
           ) : null}
         </div>
       </div>
     </div>
   </div>
 );
};
import React, { useState, FC, ReactElement } from 'react';
import './App.css';
import { Button, Divider } from 'antd';
import { CloseOutlined, SearchOutlined } from '@ant-design/icons';
const Parse = require('parse/dist/parse.min.js');

export const QueryRelational: FC<{}> = (): ReactElement => {
 // State variable
 const [queryResults, setQueryResults] = useState<Parse.Object[]>();

 const doQueryA = async function (): Promise<boolean> {
   // Get PublisherA object
   const PublisherAQuery: Parse.Query = new Parse.Query('Publisher');
   PublisherAQuery.equalTo('name', 'Acacia Publishings');
   const PublisherA: Parse.Object | undefined = await PublisherAQuery.first();

   // Query Books with PublisherA
   const bookQuery: Parse.Query = new Parse.Query('Book');
   bookQuery.equalTo('publisher', PublisherA);

   try {
     let results: Parse.Object[] = await bookQuery.find();
     setQueryResults(results);
     return true;
   } catch (error) {
     // Error can be caused by lack of Internet connection
     alert(`Error! ${error.message}`);
     return false;
   }
 };

 const doQueryB = async function (): Promise<boolean> {
   // Create inner Book query
   const bookQuery: Parse.Query = new Parse.Query('Book');
   bookQuery.greaterThan('publishingDate', new Date('01/01/2010'));

   // Query BookStore using inner Book query
   const bookStoreQuery: Parse.Query = new Parse.Query('BookStore');
   bookStoreQuery.matchesQuery('books', bookQuery);

   try {
     let results: Parse.Object[] = await bookStoreQuery.find();
     setQueryResults(results);
     return true;
   } catch (error) {
     // Error can be caused by lack of Internet connection
     alert(`Error! ${error.message}`);
     return false;
   }
 };

 const doQueryC = async function (): Promise<boolean> {
   // Get AuthorA object
   const AuthorAQuery: Parse.Query = new Parse.Query('Author');
   AuthorAQuery.equalTo('name', 'Aaron Writer');
   const AuthorA: Parse.Object | undefined = await AuthorAQuery.first();

   // Create inner Book query
   const bookQuery: Parse.Query = new Parse.Query('Book');
   bookQuery.equalTo('authors', AuthorA);

   // Query BookStore using inner Book query
   const bookStoreQuery: Parse.Query = new Parse.Query('BookStore');
   bookStoreQuery.matchesQuery('books', bookQuery);

   try {
     let results: Parse.Object[] = await bookStoreQuery.find();
     setQueryResults(results);
     return true;
   } catch (error) {
     // Error can be caused by lack of Internet connection
     alert(`Error! ${error.message}`);
     return false;
   }
 };

 const clearQueryResults = async function (): Promise<boolean> {
   setQueryResults(undefined);
   return true;
 };

 return (
   <div>
     <div className="header">
       <img
         className="header_logo"
         alt="Back4App Logo"
         src={
           'https://blog.back4app.com/wp-content/uploads/2019/05/back4app-white-logo-500px.png'
         }
       />
       <p className="header_text_bold">{'React on Back4App'}</p>
       <p className="header_text">{'Relational Queries'}</p>
     </div>
     <div className="container">
       <div className="flex_between">
         <h2 className="heading">{'Query List'}</h2>
         <div className="flex">
           <Button
             onClick={() => doQueryA()}
             type="primary"
             className="heading_button"
             color={'#208AEC'}
             icon={<SearchOutlined />}
           >
             QUERY A
           </Button>
           <Button
             onClick={() => doQueryB()}
             type="primary"
             className="heading_button"
             color={'#208AEC'}
             icon={<SearchOutlined />}
           >
             QUERY B
           </Button>
           <Button
             onClick={() => doQueryC()}
             type="primary"
             className="heading_button"
             color={'#208AEC'}
             icon={<SearchOutlined />}
           >
             QUERY C
           </Button>
           <Button
             onClick={() => clearQueryResults()}
             type="primary"
             className="heading_button"
             color={'#208AEC'}
             icon={<CloseOutlined />}
           >
             CLEAR RESULTS
           </Button>
         </div>
       </div>
       <Divider />
       <div className="flex_between">
         <div className="flex_child">
           {/* Query list */}
           {queryResults !== undefined &&
             queryResults.map((result: Parse.Object, index: number) => (
               <div className="list_item" key={`${index}`}>
                 <p className="list_item_title">{`${result.get('name') !== undefined ? result.get('name') : result.get('title')}`}</p>
               </div>
             ))}
           {queryResults !== undefined &&
           queryResults.length <= 0 ? (
             <p>{'No results here!'}</p>
           ) : null}
         </div>
       </div>
     </div>
   </div>
 );
};
﻿
Juga tambahkan kelas ini ke App.css file Anda untuk sepenuhnya merender tata letak komponen:
App.css
@import '~antd/dist/antd.css';

.App {
 text-align: center;
}

html {
 box-sizing: border-box;
 outline: none;
 overflow: auto;
}

*,
*:before,
*:after {
 margin: 0;
 padding: 0;
 box-sizing: inherit;
}

h1,
h2,
h3,
h4,
h5,
h6 {
 margin: 0;
 font-weight: bold;
}

p {
 margin: 0;
}

body {
 margin: 0;
 background-color: #fff;
}

.container {
 width: 100%;
 max-width: 900px;
 margin: auto;
 padding: 20px 0;
 text-align: left;
}

.header {
 align-items: center;
 padding: 25px 0;
 background-color: #208AEC;
}

.header_logo {
 height: 55px;
 margin-bottom: 20px;
 object-fit: contain;
}

.header_text_bold {
 margin-bottom: 3px;
 color: rgba(255, 255, 255, 0.9);
 font-size: 16px;
 font-weight: bold;
}

.header_text {
 color: rgba(255, 255, 255, 0.9);
 font-size: 15px;
}

.heading {
 font-size: 22px;
}

.flex {
 display: flex;
}

.flex_between {
 display: flex;
 justify-content: space-between;
}

.flex_child {
 flex: 0 0 45%;
}

.heading_button {
 margin-left: 12px;
}

.list_item {
 padding-bottom: 15px;
 margin-bottom: 15px;
 border-bottom: 1px solid rgba(0,0,0,0.06);
 text-align: left;
}

.list_item_title {
 color: rgba(0,0,0,0.87);
 font-size: 17px;
}
@import '~antd/dist/antd.css';

.App {
 text-align: center;
}

html {
 box-sizing: border-box;
 outline: none;
 overflow: auto;
}

*,
*:before,
*:after {
 margin: 0;
 padding: 0;
 box-sizing: inherit;
}

h1,
h2,
h3,
h4,
h5,
h6 {
 margin: 0;
 font-weight: bold;
}

p {
 margin: 0;
}

body {
 margin: 0;
 background-color: #fff;
}

.container {
 width: 100%;
 max-width: 900px;
 margin: auto;
 padding: 20px 0;
 text-align: left;
}

.header {
 align-items: center;
 padding: 25px 0;
 background-color: #208AEC;
}

.header_logo {
 height: 55px;
 margin-bottom: 20px;
 object-fit: contain;
}

.header_text_bold {
 margin-bottom: 3px;
 color: rgba(255, 255, 255, 0.9);
 font-size: 16px;
 font-weight: bold;
}

.header_text {
 color: rgba(255, 255, 255, 0.9);
 font-size: 15px;
}

.heading {
 font-size: 22px;
}

.flex {
 display: flex;
}

.flex_between {
 display: flex;
 justify-content: space-between;
}

.flex_child {
 flex: 0 0 45%;
}

.heading_button {
 margin-left: 12px;
}

.list_item {
 padding-bottom: 15px;
 margin-bottom: 15px;
 border-bottom: 1px solid rgba(0,0,0,0.06);
 text-align: left;
}

.list_item_title {
 color: rgba(0,0,0,0.87);
 font-size: 17px;
}
﻿
Inilah cara komponen seharusnya terlihat setelah dirender dan ditanyakan oleh salah satu fungsi kueri:
﻿
Kesimpulan
Di akhir panduan ini, Anda telah mempelajari cara kerja kueri relasional di Parse dan cara melakukannya di Back4App dari Aplikasi React. Di panduan berikutnya, Anda akan belajar cara bekerja dengan Pengguna di Parse.
SEBELUMNYA
Mengoptimalkan Kueri dengan Parse di Aplikasi React
BERIKUTNYA
Query GeoPoint di Aplikasi React dengan Parse dan Geolokasi
Kueri Relasional Parse di Aplikasi React: Panduan Lengkap

Kueri Relasional di React menggunakan Parse

Pendahuluan

Prasyarat

Tujuan

1 - Memahami kelas Parse.Query

2 - Simpan beberapa data di Back4App

3 - Kuery data

4 - Kueri dari komponen React

Kesimpulan
