Smart Ember Data queries that are re-run whenever they may have changed


266110.14.38-patch.0a year ago4 years agoMinified + gzip package size for @cardstack/live-queries in KB



This addon integrates with the cardstack hub to give you "live" queries ā€“ ones which automatically refresh when records have updated on the server.


yarn add @cardstack/live-queries


// some component.js
import Component from "@ember/component";
import { liveQuery } from "@cardstack/live-queries";

export default Component.extend({
  sortField: 'updatedAt',
  sortOrder: 'desc',
  items: liveQuery('sortField', 'sortOrder', function(sortField, sortOrder) {
    let sort = (sortOrder === 'desc') ? `-${sortField}` : sortField;
    return {
      type: "item",
      query: { sort }

items is now a computed property for an Ember Data query ā€“ it returns a Promise for an AdapterPopulatedRecordArray, just like Store#query. When events come in that require refreshing the query, we simply call update on it. If the dependent keys change, we create a whole new query.

At the moment, you can only use this on Components, because we use the lifecycle hooks to manage update subscriptions to the backend.


By default, this plugin starts a socket.io server on port 3100. If you'd like, you can change this to another port by specifying socket-port in a plugin-config in your seed models:

// cardstack/seeds/development/config.js
module.exports = {
  type: 'plugin-configs',
  id: '@cardstack/live-queries',
  attributes: {
    'socket-port': 3200


  • Improve refresh granularity
  • Add passing only an object for simple, non-computed queries
  • Add support for proper lifecycle on routes, maybe controllers, maybe services?
  • Document using subscriptions directly, when you want to do something more custom than just keeping a RecordArray up to date.
  • Document event-only (doesn't query for you - for when you want to do something besides just update the record array)
  • Extract @cardstack/socket

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.