### Local Development Setup for Nuxt Arpix DB Connect (Bash)

Source: https://github.com/arpixnet/nuxt-arpix-db-connect/blob/main/README.md

This snippet provides a series of `npm` commands for setting up and managing the `nuxt-arpix-db-connect` project during local development. It covers installation, type stub generation, starting the development server, building the playground, running lint checks, executing tests, and releasing new versions.

```bash
# Install dependencies
npm install

# Generate type stubs
npm run dev:prepare

# Develop with the playground
npm run dev

# Build the playground
npm run dev:build

# Run ESLint
npm run lint

# Run Vitest
npm run test
npm run test:watch

# Release new version
npm run release
```

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

### Installing Nuxt Arpix DB Connect Module (Bash)

Source: https://github.com/arpixnet/nuxt-arpix-db-connect/blob/main/README.md

This snippet demonstrates how to install the `nuxt-arpix-db-connect` module using either the Nuxt CLI or standard npm/yarn package managers. It's the first step to integrate the module into a Nuxt 3 application.

```bash
npx nuxi module add nuxt-arpix-db-connect

# Or using npm/yarn
npm install nuxt-arpix-db-connect
# or
yarn add nuxt-arpix-db-connect
```

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

### Fetching Data with High-Level Get Operation in Nuxt Arpix DB Connect (Vue/JavaScript)

Source: https://github.com/arpixnet/nuxt-arpix-db-connect/blob/main/README.md

This snippet shows how to use the high-level `$dbConnect.get` method to retrieve data from the `users` table. It includes examples of selecting specific fields, applying complex `where` conditions with `_or`, ordering results, and implementing pagination with `limit` and `offset`.

```vue
<script setup>
import { useNuxtApp } from '#app'

const { $dbConnect } = useNuxtApp()

// Get users with filtering, ordering, and pagination
const { users } = await $dbConnect.get('users', {
  select: ['id', 'name', 'email', 'created_at'],
  where: {
    role: { _eq: 'admin' },
    _or: [
      { status: { _eq: 'active' } },
      { status: { _eq: 'pending' } }
    ]
  },
  orderBy: { created_at: 'desc' },
  limit: 10,
  offset: 0
})
</script>
```

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

### Configuring Nuxt Arpix DB Connect Module in nuxt.config.ts (TypeScript)

Source: https://github.com/arpixnet/nuxt-arpix-db-connect/blob/main/README.md

This configuration snippet shows how to add the `nuxt-arpix-db-connect` module to `nuxt.config.ts` and set up its options. It specifies the `dataOrigin` as 'hasura', provides Hasura endpoint URLs, and includes an example of setting custom headers and enabling debug mode.

```typescript
export default defineNuxtConfig({
  modules: ['nuxt-arpix-db-connect'],
  dbConnect: {
    dataOrigin: 'hasura',
    hasura: {
      url: 'https://your-hasura-endpoint.com/v1/graphql',
      wsUrl: 'wss://your-hasura-endpoint.com/v1/graphql', // Optional, for subscriptions
      headers: {
        'x-hasura-admin-secret': 'your-admin-secret',
        // Add any other headers you need
      }
    },
    dataDebug: false // Set to true for debugging
  }
})
```

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

### Inserting Data with High-Level Insert Operation in Nuxt Arpix DB Connect (Vue/JavaScript)

Source: https://github.com/arpixnet/nuxt-arpix-db-connect/blob/main/README.md

This snippet demonstrates two ways to insert data using `$dbConnect.insert`. The first example inserts a single record and returns specific fields. The second example shows how to insert multiple records with `on-conflict` handling, useful for upsert operations.

```vue
<script setup>
import { useNuxtApp } from '#app'

const { $dbConnect } = useNuxtApp()

// Insert a single record
const { insert_users_one } = await $dbConnect.insert(
  'users',
  { name: 'John Doe', email: 'john@example.com', role: 'user' },
  null,
  ['id', 'created_at']
)

// Insert multiple records with on-conflict handling
const { affected_rows } = await $dbConnect.insert(
  'users',
  [
    { id: 1, name: 'John Doe', email: 'john@example.com' },
    { id: 2, name: 'Jane Smith', email: 'jane@example.com' }
  ],
  {
    constraint: 'users_pkey',
    update_columns: ['name', 'email']
  }
)
</script>
```

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

### Updating Data with High-Level Update Operations in Nuxt Arpix DB Connect (Vue/JavaScript)

Source: https://github.com/arpixnet/nuxt-arpix-db-connect/blob/main/README.md

This snippet illustrates how to update records using `$dbConnect.update` and `$dbConnect.updateMany`. The first example updates records based on a `last_login` condition. The second example shows how to update multiple records with different values using `updateMany`.

```vue
<script setup>
import { useNuxtApp } from '#app'

const { $dbConnect } = useNuxtApp()

// Update records
const { affected_rows } = await $dbConnect.update(
  'users',
  { status: 'inactive', updated_at: new Date().toISOString() },
  { last_login: { _lt: '2023-01-01' } }
)

// Update multiple records with different values
const result = await $dbConnect.updateMany(
  'products',
  [
    { data: { price: 19.99 }, where: { id: { _eq: 1 } } },
    { data: { price: 29.99 }, where: { id: { _eq: 2 } } }
  ]
)
</script>
```

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

### Setting up a GraphQL Subscription with Nuxt Arpix DB Connect (Vue/JavaScript)

Source: https://github.com/arpixnet/nuxt-arpix-db-connect/blob/main/README.md

This snippet demonstrates how to establish a real-time GraphQL subscription to watch for changes in the `users` table. It updates a `users` ref with incoming data and includes cleanup logic to unsubscribe when the component unmounts.

```vue
<script setup>
import { ref, onUnmounted } from 'vue'
import { useNuxtApp } from '#app'

const { $dbConnect } = useNuxtApp()
const users = ref([])

// Create a subscription
const subscription = $dbConnect.subscribe(
  `
  subscription WatchUsers {
    users {
      id
      name
      email
      updated_at
    }
  }
`,
  {
    onData: (data) => {
      users.value = data.users
    },
    onError: (error) => {
      console.error('Subscription error:', error)
    }
  }
)

// Clean up subscription when component is unmounted
onUnmounted(() => {
  subscription.unsubscribe()
})
</script>
```

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

### Executing a GraphQL Mutation with Nuxt Arpix DB Connect (Vue/JavaScript)

Source: https://github.com/arpixnet/nuxt-arpix-db-connect/blob/main/README.md

This snippet illustrates how to perform a GraphQL mutation to insert a new user into the database. It uses variables to pass `name` and `email` and returns the `id`, `name`, and `email` of the newly created user.

```vue
<script setup>
import { useNuxtApp } from '#app'

const { $dbConnect } = useNuxtApp()

// Execute a GraphQL mutation
const { data } = await $dbConnect.mutate(
  `
  mutation CreateUser($name: String!, $email: String!) {
    insert_users_one(object: {name: $name, email: $email}) {
      id
      name
      email
    }
  }
`,
  {
    variables: {
      name: 'John Doe',
      email: 'john@example.com'
    }
  }
)
</script>
```

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

### Performing Batch Database Operations with Nuxt Arpix DB Connect (Vue)

Source: https://github.com/arpixnet/nuxt-arpix-db-connect/blob/main/README.md

This snippet illustrates how to execute multiple database operations (insert, update, delete) in a single request using the `$dbConnect.batch` method. Results for each operation can be accessed by their defined `alias`.

```JavaScript
import { useNuxtApp } from '#app'

const { $dbConnect } = useNuxtApp()

// Execute multiple operations in a single request
const result = await $dbConnect.batch([
  {
    type: 'insert',
    table: 'categories',
    data: { name: 'New Category' },
    returning: 'id',
    alias: 'insert_category'
  },
  {
    type: 'update',
    table: 'products',
    data: { category_id: null },
    where: { category_id: { _eq: 5 } },
    alias: 'update_products'
  },
  {
    type: 'delete',
    table: 'categories',
    where: { id: { _eq: 5 } },
    alias: 'delete_category'
  }
])

// Access results by alias
const newCategoryId = result.insert_category.id
const updatedProducts = result.update_products.affected_rows
const deletedCategories = result.delete_category.affected_rows
```

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

### Setting Request Headers with Nuxt Arpix DB Connect (Vue)

Source: https://github.com/arpixnet/nuxt-arpix-db-connect/blob/main/README.md

This snippet demonstrates how to set global headers for all subsequent requests using `$dbConnect.setHeaders` or `$dbConnect.setHeader`. It also shows how to override or add headers for individual requests directly within the query options.

```JavaScript
import { useNuxtApp } from '#app'

const { $dbConnect } = useNuxtApp()

// Set headers for all subsequent requests
$dbConnect.setHeaders({
  'Authorization': `Bearer ${token}`,
  'x-hasura-role': 'admin'
})

// Or set a single header
$dbConnect.setHeader('x-hasura-user-id', userId)

// Headers can also be set for individual requests
const { data } = await $dbConnect.query(
  `query { ... }`,
  { headers: { 'x-hasura-role': 'user' } }
)
```

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

### Executing a GraphQL Query with Nuxt Arpix DB Connect (Vue/JavaScript)

Source: https://github.com/arpixnet/nuxt-arpix-db-connect/blob/main/README.md

This snippet demonstrates how to perform a basic GraphQL query using the `$dbConnect` instance in a Nuxt 3 Vue component. It fetches a list of users with their `id`, `name`, and `email` fields.

```vue
<script setup>
import { useNuxtApp } from '#app'

const { $dbConnect } = useNuxtApp()

// Execute a GraphQL query
const { data } = await $dbConnect.query(`
  query GetUsers {
    users {
      id
      name
      email
    }
  }
`)
</script>
```

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

### Deleting Data with Nuxt Arpix DB Connect (Vue)

Source: https://github.com/arpixnet/nuxt-arpix-db-connect/blob/main/README.md

This snippet demonstrates how to delete records from a specified table using the `$dbConnect.delete` method. It targets records matching a given `where` clause and returns the number of `affected_rows`.

```JavaScript
import { useNuxtApp } from '#app'

const { $dbConnect } = useNuxtApp()

// Delete records
const { affected_rows } = await $dbConnect.delete(
  'users',
  { status: { _eq: 'inactive' } }
)
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.