React Native’de SQLite nasıl kullanılır?

React Native uygulamalarında AsyncStorage kullanımı geniş yer alsa da, nispeten büyük miktarda ilişkisel verileri tutmak için SQLite kaçınılmaz olacaktır. Bu yazımda da SQLite kullanımına değineceğim.

Öncelikle projeminizi oluşturalım:

npx react-native init SampleRNSqlite --template react-native-template-typescript
cd SampleRNSqlite
npx react-native run-ios

Projemize SQLite kütüphanesini ekleyelim ve pod’ları yükleyelim:

yarn add react-native-sqlite-storage
yarn add -D @types/react-native-sqlite-storage
pod install --project-directory=ios/

App.tsx dosyasını açalım ve aşağıdaki gibi veritabanını oluşturalım:

import React, {useEffect} from 'react';
import SQLite, {SQLiteDatabase, ResultSet} from 'react-native-sqlite-storage';
const App = () => {
useEffect(() => {
    SQLite.enablePromise(true);
    SQLite.openDatabase({name: 'rnSqliteSample.db', location: 'Documents'})
      .then(db => console.log('Database opened:', db))
      .catch(e => console.log(e));
  }, []);
  
  return <></>;
};
export default App;

Kodu açıklayacak olursak:

• enablePromise: SQLite işlemlerinde success ve error durumlarını promise’li (then/catch) bir şekilde kullanmak için gereklidir. Parametre olarak false geçtiğinizde veya bu satırı eklemediğinizde success ve error durumlarında işlem yapmak için gereken fonksiyonları parametre olarak geçmeniz gerekecektir.
• openDatabase: Veritabanını açma ve oluşturma işlemleri için kullanılır. name ve location adında iki parametre alır. name parametresine veritabanının adı geçilir. location parametresi ise iOS’te veritabanının nerede tutulacağını belirtir ve 3 farklı değer alabilir:

1. default: Veritabanını 📁Library/LocalDatabase dizininde oluşturur. Oluşturulan veritabanı iTunes uygulamasında görüntülenemez ❌ ve iCloud tarafından yedeklenmez ❌.
2. Library: Veritabanını 📁Library dizininde oluşturur. Oluşturulan veritabanı iTunes uygulamasında görüntülenemez ❌ fakat iCloud tarafından yedeklenir ✅.
3. Documents: Veritabanını 📁Documents dizininde oluşturur. Oluşturulan veritabanı iTunes uygulamasında görüntülenir ✅ ve iCloud tarafından yedeklenir ✅.

Kodu çalıştırdığınızda terminalde aşağıdaki şekilde veritabanını oluşturduğunu gösterecektir:

Tablo oluşturma, kayıt ekleme, kayıt silme gibi işlemler için aşağıdaki gibi değişiklik yapabilirsiniz:

import React, {useEffect} from 'react';
import SQLite, {SQLiteDatabase, ResultSet} from 'react-native-sqlite-storage';
const App = () => {
  let db: SQLiteDatabase;
useEffect(() => {
    SQLite.enablePromise(true);
    SQLite.openDatabase({name: 'rnSqliteSample.db', location: 'Documents'})
      .then(dbRes => {db = dbRes; dbOpened();})
      .catch(e => genericError(e));
  }, []);
const genericError = (e: any) => {
    console.warn('Error: ' + JSON.stringify(e));
  };
const dbOpened = () => {
    console.log('Creating table...');
    db.executeSql(
      `CREATE TABLE EMPLOYEE(
        ID INT PRIMARY KEY     NOT NULL,
        NAME           TEXT    NOT NULL,
        AGE            INT     NOT NULL,
        COUNTRY        CHAR(50),
        SALARY         REAL
      );`,
    )
      .then(result => tableCreated(result))
      .catch(e => {
        genericError(e);
        dropTable(db);
      });
  };
const tableCreated = (result?: [ResultSet]) => {
    console.log('Inserting records...');
    db.executeSql(
      `INSERT INTO EMPLOYEE VALUES
        (1, '👩🏻', 32, '🇹🇷 ', 20000.00 ),
        (2, '🧑🏼', 25, '🇺🇸 ', 15000.00 ),
        (3, '👩🏻‍🦰', 23, '🇬🇧 ', 20000.00 ),
        (4, '👨🏻', 25, '🇫🇷 ', 65000.00 ),
        (5, '👩🏼‍🦱', 27, '🇩🇪 ', 85000.00 ),
        (6, '🧔🏻', 22, '🇮🇹 ', 45000.00 )
      ;`,
    )
      .then(result => recordsInserted(result))
      .catch(e => {
        genericError(e);
      });
  };
const dropTable = (db: SQLiteDatabase) => {
    console.log('Dropping table...');
    db.executeSql(`DROP TABLE EMPLOYEE;`)
      .then(result => dbOpened())
      .catch(e => {
        genericError(e);
      });
  };
const recordsInserted = (result?: [ResultSet]) => {
    console.log('Selecting records...');
    db.executeSql(`SELECT * FROM EMPLOYEE;`)
      .then(result => recordsSelected(result))
      .catch(e => {
        genericError(e);
      });
  };
const recordsSelected = (result?: [ResultSet]) => {
    console.log('Displaying records...');
    result?.[0].rows.raw().forEach((v, i) => console.info(v));
    const index = 1;
    const recordAtIndex = result?.[0].rows.item(index);
    console.info(`Record at Index ${index}: ${JSON.stringify(recordAtIndex)}`);
    deleteRecord(recordAtIndex.ID);
  };
const deleteRecord = (id: number) => {
    console.log(`Deleting record ID: ${id}...`);
    db.executeSql(`DELETE FROM EMPLOYEE WHERE ID=${id};`)
      .then(result => recordDeleted(result))
      .catch(e => {
        genericError(e);
      });
  };
const recordDeleted = (result?: [ResultSet]) => {
    console.log('Selecting records...');
    db.executeSql(`SELECT * FROM EMPLOYEE;`)
      .then(result => receordsSelectedAfterDeletion(result))
      .catch(e => {
        genericError(e);
      });
  };
const receordsSelectedAfterDeletion = (
    result?: [ResultSet],
  ) => {
    console.log('Displaying records...');
    result?.[0].rows.raw().forEach((v, i) => console.info(v));
  };
return <></>;
};
export default App;

Terminalde çıktısı aşağıdaki gibi olacaktır:

Sonuç olarak

Bu yazıda React Native ile veritabanı oluşturma, tablo ekleme, kayıt ekleme/silme işlemlerini gerçekleştirdik.

Projenin bitmiş halini react-native-sqlite-sample reposunda bulabilirsiniz. Bu yazı hakkında soru ve görüşlerinizi aşağıdaki yorumlar kısmından yazabilirsiniz. Bana destek vermek için alkış simgesine tıklayabilirsiniz. Sonraki yazımda görüşmek üzere…