Configuration

This documentation still in development.
If you are using Nuxt or Vue , please follow their configuration steps instead of this one.

You can configure @eloqjs/collection with the Collection.config property in src/main.js.

src/main.js
import { Collection } from '@eloqjs/collection'

Collection.config = {
  // My custom configuration
}

Frameworks

Nuxt

You can configure @eloqjs/nuxt-collection with the collection property in your nuxt.config.js.

nuxt.config.js
export default {
  collection: {
    // My custom configuration
  }
}

Vue

You can configure @eloqjs/vue-collection by passing the options to Vue.use in src/main.js.

src/main.js
import vue from 'vue'
import Collection from '@eloqjs/vue-collection'

Vue.use(Collection, {
  // My custom configuration
})

Properties

primaryKey

  • Type: () => string
  • Arguments: ({ collection })
  • Default: id

The primary key of the items.

{
  primaryKey: ({ collection }) => {
    const item = collection.first()

    if (item.type === 'article') {
      return 'slug'
    }
    
    return 'id'
  }
}
import { Collection, ItemData } from '@eloqjs/collection'

{
  primaryKey: <T extends ItemData>({
    collection
  }: {
    collection: Collection<T>
  }): string => {
    const item = collection.first()

    if (item.type === 'article') {
      return 'slug'
    }
    
    return 'id'
  }
}

toQuery

  • Type: () => Class
  • Arguments: ({ collection, item })

If our items are Model classes with Query Builder, we can configure this option to convert the collection into a Query Builder.

This example is from vue-api-query integration.

{
  toQuery: ({ collection, item }) => {
    return item.newModelQuery().whereIn(
      collection.primaryKey(), collection.modelKeys()
    )
  }
}
import { Collection, ItemData } from '@eloqjs/collection'

{
  toQuery: <T extends ItemData>({
    collection,
    item
  }: {
    collection: Collection<T>
    item: T
  }): T => {
    const model = item.newModelQuery().whereIn(
      collection.primaryKey(), collection.modelKeys()
    )
    
    return (model as unknown) as T
  }
}

fresh

  • Type: () => Promise
  • Arguments: ({ collection, include })

If our items are Model classes with Query Builder, we can configure this option to reload a fresh item instance from the database for all the items.

This example is from vue-api-query integration.

{
  fresh: async ({ collection, include }) => {
    return await collection.toQuery().include(...include).$get()
  }
}
import { Collection, ItemData } from '@eloqjs/collection'

{
  fresh: async <T extends ItemData>({
    collection,
    include
  }: {
    collection: Collection<T>,
    include: string[]
  }): Promise<Collection<T>> => {
    const _collection = await collection.toQuery()
      .include(...include).$get()
    return (_collection as unknown) as Promise<Collection<T>>
  }
}