Skip to Content
ReferenceClient APISyncClient

SyncClient

Create and configure a Gluonic sync client.

Import

import { SyncClient } from '@gluonic/client'

Signature

function SyncClient(config: SyncClientConfig): { store: Store, GraphProvider: React.FC }

Parameters

config: SyncClientConfig

PropertyTypeRequiredDescription
serverstring | { http, websocket }YesServer URL or endpoints
storageStorageAdapterYesStorage adapter instance (Drizzle)
modelsArray<ModelClass>YesModel classes to register
auth{ getToken, onUnauthenticated }NoAuthentication configuration
performance{ applyChunkSize, debug }NoPerformance options

Returns

PropertyTypeDescription
storeStoreStore instance for mutations and sync
GraphProviderReact.FCProvider component (deprecated - use SyncProvider)

Note: GraphProvider is deprecated. Use SyncProvider instead which combines GraphProvider with token management.

Examples

Basic Setup

import { SyncClient } from '@gluonic/client'
import { DrizzleAdapter } from '@gluonic/client-drizzle'
import { db } from './db'
import { Task, User } from './models'
 
const storage = DrizzleAdapter({ db })
 
export const client = SyncClient({
  server: 'https://api.example.com/sync/v1',
  storage,
  models: [Task, User]
})
 
export const { store } = client

With Authentication

export const client = SyncClient({
  server: 'https://api.example.com/sync/v1',
  storage,
  models,
  auth: {
    getToken: async () => await getStoredToken(),
    onUnauthenticated: () => router.push('/login')
  }
})

With Custom Endpoints

export const client = SyncClient({
  server: {
    http: 'https://api.example.com/sync/v1',
    websocket: 'wss://ws.example.com/sync/v1/ws'
  },
  storage,
  models
})

With Performance Options

export const client = SyncClient({
  server,
  storage,
  models,
  performance: {
    applyChunkSize: 500,  // Process frames in chunks of 500
    debug: true  // Enable debug logging
  }
})

Usage

Initialize and use the store:

import { client } from './sync'
 
// Initialize on app start
await client.store.init()
 
// Access in components via hooks
import { useStore } from '@gluonic/client'
 
const MyComponent = () => {
  const store = useStore()
  // ...
}

See Also

Last updated on
OverviewSyncProvider