SQLocal

https://sqlocal.dev/guide/
Admin
SQLocal is a local-first database that runs SQLite3 in the browser, persisting data to the origin...
Tokens:1,287
Snippets:9
Trust Score:6.2
Update:1 year ago
Show doc for...
Tokens:
Raw
### Install SQLocal using npm, yarn, or pnpm

Source: https://sqlocal.dev/guide/setup

Install the SQLocal package in your application using your preferred package manager. These commands will add the SQLocal library to your project's dependencies.

```npm
npm install sqlocal
```

```yarn
yarn add sqlocal
```

```pnpm
pnpm install sqlocal
```

--------------------------------

### Initialize SQLocal Client with Options

Source: https://sqlocal.dev/guide/setup

Initialize the SQLocal client by passing an options object to the constructor for advanced configuration. Options include setting the database path, read-only mode, verbose logging, and defining initialization and connection callbacks.

```javascript
export const db = new SQLocal({
	databasePath: 'database.sqlite3',
	readOnly: true,
	verbose: true,
	onInit: (sql) => {},
	onConnect: (reason) => {},
});
```

--------------------------------

### Initialize SQLocal Client in JavaScript

Source: https://sqlocal.dev/guide/setup

Import the `SQLocal` class and instantiate it to create a client for interacting with a local SQLite database. The constructor takes the database file name, creating it if it doesn't exist. The client can be exported for application-wide use.

```javascript
import { SQLocal } from 'sqlocal';

export const db = new SQLocal('database.sqlite3');
```

--------------------------------

### Optimize Vite Dependencies for SqLocal

Source: https://sqlocal.dev/guide/setup

Excludes 'sqlocal' from Vite's dependency optimization to prevent loading issues with web workers. This configuration change is specifically for the development environment and does not affect production performance.

```javascript
optimizeDeps: {
  exclude: ['sqlocal'],
}
```

--------------------------------

### Configure Cross-Origin Isolation Headers

Source: https://sqlocal.dev/guide/setup

To enable SQLocal's persistence to the origin private file system, your web server must serve pages with specific HTTP headers. These headers are essential for browser security policies that protect file system access.

```http
Cross-Origin-Embedder-Policy: require-corp
Cross-Origin-Opener-Policy: same-origin
```

--------------------------------

### Enable Cross-Origin Isolation in Vite Dev Server

Source: https://sqlocal.dev/guide/setup

Configures the Vite development server to send specific HTTP headers ('Cross-Origin-Embedder-Policy' and 'Cross-Origin-Opener-Policy') required for origin private file system persistence. Ensure production servers are also configured with these headers.

```javascript
plugins: [
  {
    name: 'configure-response-headers',
    configureServer: (server) => {
      server.middlewares.use((_req, res, next) => {
        res.setHeader('Cross-Origin-Embedder-Policy', 'require-corp');
        res.setHeader('Cross-Origin-Opener-Policy', 'same-origin');
        next();
      });
    },
  },
]
```

--------------------------------

### SQLocal with Drizzle ORM: Type-Safe Queries

Source: https://sqlocal.dev/guide/introduction

Illustrates the integration of SQLocal with Drizzle ORM to achieve type-safe database operations. This example initializes SQLocalDrizzle, passes the driver to Drizzle, and defines the database schema using Drizzle's core functions.

```typescript
import { SQLocalDrizzle } from 'sqlocal/drizzle';
import { drizzle } from 'drizzle-orm/sqlite-proxy';
import { sqliteTable, int, text } from 'drizzle-orm/sqlite-core';

// Initialize SQLocalDrizzle and pass the driver to Drizzle
const { driver } = new SQLocalDrizzle('database.sqlite3');
const db = drizzle(driver);

// Define your schema
const groceries = sqliteTable('groceries', {
	id: int('id').primaryKey({ autoIncrement: true }),
	name: text('name').notNull(),
});

// Make type-safe queries
const data = await db
	.select({ name: groceries.name })
	.from(groceries)
	.orderBy(groceries.name)
	.all();
console.log(data);
```

--------------------------------

### Basic SQLocal Usage: Create, Insert, Select SQLite Data

Source: https://sqlocal.dev/guide/introduction

Demonstrates the fundamental usage of SQLocal to create a table, insert data, and select records from an SQLite database running in the browser. It utilizes the tagged template literal `sql` for executing SQL statements.

```javascript
import { SQLocal } from 'sqlocal';

// Create a client with a name for the SQLite file to save in
// the origin private file system
const { sql } = new SQLocal('database.sqlite3');

// Use the "sql" tagged template to execute a SQL statement
// against the SQLite database
await sql`CREATE TABLE groceries (id INTEGER PRIMARY KEY AUTOINCREMENT, name TEXT)`;

// Execute a parameterized statement just by inserting
// parameters in the SQL string
const items = ['bread', 'milk', 'rice'];
for (let item of items) {
	await sql`INSERT INTO groceries (name) VALUES (${item})`;
}

// SELECT queries and queries with the RETURNING clause will
// return the matched records as an array of objects
const data = await sql`SELECT * FROM groceries`;
console.log(data);
```

--------------------------------

### SQLocal with Kysely ORM: Type-Safe Queries

Source: https://sqlocal.dev/guide/introduction

Shows how to integrate SQLocal with Kysely ORM for performing type-safe database queries. It initializes SQLocalKysely, passes the dialect to Kysely, and defines a database schema for type checking.

```typescript
import { SQLocalKysely } from 'sqlocal/kysely';
import { Kysely, Generated } from 'kysely';

// Initialize SQLocalKysely and pass the dialect to Kysely
const { dialect } = new SQLocalKysely('database.sqlite3');
const db = new Kysely<DB>({ dialect });

// Define your schema
// (passed to the Kysely generic above)
type DB = {
	groceries: {
		id: Generated<number>;
		name: string;
	};
};

// Make type-safe queries
const data = await db
	.selectFrom('groceries')
	.select('name')
	.orderBy('name', 'asc')
	.execute();
console.log(data);
```
Tokens:
Raw