# Renderless Data Components

There are three renderless data provider components: <FeathersVuexFind>, <FeathersVuexGet> and <FeathersVuexCount>. They simplify performing queries against the store and/or the API server. They make the data available inside each component's default slot.

To see why you might want to use these components, below are two example components that are functionally equivalent.

Here's what it looks like to use the new component:

<template>
  <FeathersVuexFind
    v-slot="{ items: categories }"
    service="categories"
    :params="{ query: {} }"
    watch="params"
  >
    <section class="admin-categories">
      {{categories}}
    </section>
  </FeathersVuexFind>
</template>

<script>
export default {
  name: 'admin-categories'
}
</script>

The above example is functionally equivalent to this much longer example which doesn't use the new component:

<template>
  <section class="admin-categories">
    {{categories}}
  </section>
</template>

<script>
import { mapState, mapGetters, mapActions } from 'vuex'

export default {
  name: 'admin-categories',
  computed: {
    ...mapState('categories', { areCategoriesLoading: 'isFindPending' }),
    ...mapGetters('categories', { findCategoriesInStore: 'find' }),
    query () {
      return {}
    },
    categories () {
      return this.findCategoriesInStore({ query: this.query }).data
    }
  },
  methods: {
    ...mapActions('categories', { findCategories: 'find' })
  },
  created () {
    this.findCategories({ query: this.query })
  }
}
</script>

To level up your skills, consider this content by Adam Wathan. He wrote a terrific free article about Renderless Components in Vue.js (opens new window). I highly recommend you read it. He also created the paid/premium Advanced Vue Component Design (opens new window) course. His material influenced the creation of this component.

# FeathersVuexFind

The FeathersVuexFind component retrieves data from the API server, puts it in the Vuex store, then transparently retrieves the live, reactive data from the store and displays it to the user.

# Example

<FeathersVuexFind
  v-slot="{ items: users }"
  service="users"
  :params="{ query: {} }"
  watch="query"
>
  <section>
    {{users}}
  </section>
</FeathersVuexFind>

# Props

service {String} - required the service path. This must match a service that has already been registered with FeathersVuex.
query {Object} deprecated use params instead - the query object. If only the query attribute is provided, the same query will be used for both the find getter and the find action. See the fetchQuery attribute for more information. When using server-side pagination, use the fetchQuery prop and the query prop for querying data from the local store. If the query is null or undefined, the query against both the API and store will be skipped. The find getter will return an empty array.
watch {String|Array} - specify the attributes of the params or fetchParams to watch. Pass 'params' to watch the entire params object. Pass 'params.query.name' to watch the 'name' property of the query. Watch is turned off by default, so the API server will only be queried once, by default. Default: []
fetchQuery {Object} deprecated use fetchParams instead - when provided, the fetchQuery serves as the query for the API server. The query param will be used against the service's local Vuex store. Default: undefined
params {Object} - the params object. If only the params attribute is provided, te same params will be used for both the find getter and the find action. See the fetchParams attribute for more information. 3.12.0+
fetchParams {Object} - when provided, the fetchParams servers as the params for the API server. The params will be used against the service's local Vuex store. 3.12.0+
queryWhen {Boolean|Function} - the query to the server will only be made when this evaluates to true. Default: true
local {Boolean} - when set to true, will only use the query prop to get data from the local Vuex store. It will disable queries to the API server. Default:false
editScope {Function} - a utility function that allows you to modify the scope data, and even add attributes to it, before providing it to the default slot. You can also use it to pull data into the current component's data (though that may be less recommended, it can come in handy). See the "Scope Data" section to learn more about what props are available in the scope object. Default: scope => scope
temps {Boolean} deprecated use params: { query: {}, temps: true } instead - Enable temps to include temporary records (from state.tempsById) in the find getter results. Default: false
qid {String} - The query identifier used for storing pagination data in the Vuex store. See the service module docs to see what you'll find inside. The default value is a random 10-character string. This means that by default, in theory, no two components will share the same pagination data, nor will they overwrite each other's pagination data. You can, of course, force them to use the same pagination data by giving them both the same qid, if there's a use case for that. Default: randomString(10)

# Scope Data

items {Array} - The resulting array of records for find operations.
isFindPending {Boolean} - When there's an active request to the API server, this will be true. This is not the same as the isFindPending from the Vuex state. The value in the Vuex state is true whenever any component is querying data from that same service. This isFindPending attribute is specific to each component instance.
pagination {Object} - pagination data from the Vuex store, keyed by the qid attribute. By default, this will be specific to this component instance. (If you find a use case for sharing pagination between component instances, you can give both components the same qid string as a prop.)
queryInfo {Object} - the queryInfo for the pagination object. Includes the total prop for server side pagination
pageInfo {Object} - the pageInfo includes the queried ids and is necessary for server side pagination

# FeathersVuexGet

The FeathersVuexGet component allows fetching data from directly inside a template. It makes the slot scope available to the child components. Note that in feathers-vuex@3.3.0 the component now includes support for params and fetchParams props. These are meant to replace the query and fetchQuery props. The params allow you, for example, to configure a project to pass custom params to the server. This would require use of custom hooks.

# Example

<template>
  <FeathersVuexGet
    v-slot="{ item: user }"
    service="users"
    :id="id"
    :params="params"
    :watch="[id, params]"
  >
      {{ user }}
  </FeathersVuexGet>
</template>

<script>
export default {
  name: 'UserProfile',
  computed: {
    id() {
      return this.$route.params.id
    },
    params() {
      return {
        $populateParams: {
          name: 'withFollowers'
        }
      }
    }
  }
}
</script>

# Props

service {String} - required the service path. This must match a service that has already been registered with FeathersVuex.
id {Number|String} - when performing a get request, serves as the id for the request. This is automatically watched, so if the id changes, an API request will be made and the data will be updated. Default: undefined
query {Object} deprecated use params instead - the query object. If only the query attribute is provided, the same query will be used for both the get getter and the get action. See the fetchQuery attribute for more information. When using server-side pagination, use the fetchQuery prop and the query prop for querying data from the local store. If the query is null or undefined, the query against both the API and store will be skipped. The find getter will return an empty array.
watch {String|Array} - specify the attributes of the params or fetchParams to watch. Pass 'params' to watch the entire params object. Pass 'params.query.name' to watch the 'name' property of the query. Watch is turned off by default, so the API server will only be queried once, by default. The only exception is for the id prop. The id prop in the FeathersVuexGet component is always watched. Default: []
fetchQuery {Object} deprecated use fetchParams instead - when provided, the fetchQuery serves as the query for the API server. The query param will be used against the service's local Vuex store. Default: undefined
params {Object} - the params object. If only the params attribute is provided, te same params will be used for both the get getter and the get action. See the fetchParams attribute for more information.
fetchParams {Object} - when provided, the fetchParams servers as the params for the API server. The params will be used against the service's local Vuex store.
queryWhen {Boolean|Function} - the query to the server will only be made when this evaluates to true. Default: true
local {Boolean}: when set to true, will only use the params prop to get data from the local Vuex store. It will disable queries to the API server. Default:false
editScope {Function} - a utility function that allows you to modify the scope data, and even add attributes to it, before providing it to the default slot. You can also use it to pull data into the current component's data (though that may be less recommended, it can come in handy). See the "Scope Data" section to learn more about what props are available in the scope object. Default: scope => scope

# Scope Data

item {Object} - The resulting record for the get operation.
isGetPending {Boolean} - When there's an active request to the API server, this will be true. This is not the same as the isGetPending from the Vuex state. The value in the Vuex state is true whenever any component is querying data from that same service. This isGetPending attribute is specific to each component instance.

# FeathersVuexCount 3.12.0+

The FeathersVuexCount component allows displaying a count of records. It makes the slot scope available to the child components. It adds $limit: 0 to the passed params in the background. This will only run a (fast) counting query against the database.

Note: it only works for services with enabled pagination!

<FeathersVuexCount v-slot="{ total }" service="users" :params="{ query: {} }">
  <span>
    {{ total }}
  </span>
</FeathersVuexCount>

# Props

service {String} - The path of the service
params {Object} - The params object passed to the count getter/action.
fetchParams {Object} - A seperate params object for the count action
queryWhen {Boolean|Function(params)} - the query to the server will only be made when this evaluates to true. Default: true
watch {String|Array} - specify the attributes of the params or fetchParams to watch. Pass 'params' to watch the entire params object. Pass 'params.query.name' to watch the 'name' property of the query. Watch is turned off by default, so the API server will only be queried once, by default. Default: []
local {Boolean}: when set to true, will only use the params prop to get data from the local Vuex store. It will disable queries to the API server. Default:false

# Scope Data

total {Number} - The number of found records.
isCountPending {Boolean} - When there's an active request to the API server, this will be true.

# A note about the internal architecture

These components use Vuex getters (to query data from the local store) and actions (to query data from the API server). When a params or id is provided, the components pull data from the API server and put it into the store. That same params or id is then used to pull data from the local Vuex store. Keep this in mind, especially when attempting to use server-side pagination. To use server-side pagination, use the params prop for pulling data from the local vuex store, then use the fetchParams prop to retrieve data from the API server.

# Registering the components

These components are automatically registered globally when using the Feathers-Vuex Vue plugin.

If you prefer to manually register the component, pass { components: false } as options when using the FeathersVuex Vue plugin, then do the following:

import { FeathersVuexFind, FeathersVuexGet, FeathersVuexCount } from 'feathers-vuex'

// in your component
components: {
  FeathersVuexFind,
  FeathersVuexGet,
  FeathersVuexCount
}

// or globally registered
Vue.component('FeathersVuexFind', FeathersVuexFind)
Vue.component('FeathersVuexGet', FeathersVuexGet)
Vue.component('FeathersVuexCount', FeathersVuexCount)

# Scope Data

When using these components, the scope data will become available to the FeathersVuexFind, FeathersVuexGet and FeathersVuexCount tags. It's accessible using the v-slot="props" attribute:

<FeathersVuexFind v-slot="props" service="categories" :params="{ query: {} }">
  <div>
    {{props.items}}
  </div>
</FeathersVuexFind>

It's also possible to modify the scope data by passing a function as the edit-scope prop. See the example for modifying scope data

# Destructuring props

Use the object destructuring syntax to pull specific variables out of the v-slot object. In the following example, instead of using v-slot="props", it directly accesses the items prop through destructuring:

<FeathersVuexFind v-slot="{ items }" service="categories" :params="{ query: {} }">
  <div>
    {{items}}
  </div>
</FeathersVuexFind>

# Renaming props with destructuring

You can also rename scope props through the Object destructuring syntax. The v-slot in the next example shows how to give the items a more-descriptive name:

<FeathersVuexFind
  v-slot="{ items: categories }"
  service="categories"
  :params="{ query: {} }"
>
  <div>
    {{categories}}
  </div>
</FeathersVuexFind>

# Usage Examples

# A basic find all

In this example, only the service attribute is provided. There is no query nor id provided, so no queries are made. So props.items in this example returns an empty array.

<FeathersVuexFind v-slot="props" service="todos">
  <div>
    {{props.items}}
  </div>
</FeathersVuexFind>

# Fetch data from the API and the same data from the Vuex store

This example fetches data from the API server because a query was provided. Internally, this same query is used for both the find action and the find getter. Read other examples to see how to use distinct queries. Be aware that if you use pagination directives like $skip or $limit, you must use two queries to get the records you desire.

<FeathersVuexFind v-slot="props" service="todos" :params="{ query: {} }">
  <div>
    {{props.items}}
  </div>
</FeathersVuexFind>

# Only get data from the local Vuex store

If you've already pulled a bunch of data from the server, you can use the local prop to only query the local data:

<FeathersVuexFind v-slot="props" service="todos" :params="{ query: {} }" local>
  <div>
    {{props.items}}
  </div>
</FeathersVuexFind>

# Watch the query and re-fetch from the API

Sometimes you want to query new data from the server whenever the query changes. Pass an array of attribute names to the watch attribute re-query whenever upon change. This example watches the entire query object:

<FeathersVuexFind
  v-slot="props"
  service="todos"
  :params="{ query: { isComplete: true } }"
  watch="params"
>
  <div>
    {{props.items}}
  </div>
</FeathersVuexFind>

This next example watches a single prop from the query:

<FeathersVuexFind
  v-slot="props"
  service="todos"
  :params="{ query: { isComplete: true, dueDate: 'today' } }"
  watch="params.query.dueDate"
>
  <div>
    {{props.items}}
  </div>
</FeathersVuexFind>

You can also provide an array of strings to watch multiple properties:

<FeathersVuexFind
  v-slot="props"
  service="dogs"
  :params="{ query: { breed: 'mixed', bites: true, hasWorms: false }}"
  :watch="['params.query.breed', 'params.query.bites']"
>
  <div>
    {{props.items}}
  </div>
</FeathersVuexFind>

# Use a distinct `params` and `fetchParams`

In this scenario, the fetchParams is be used to grab a larger dataset from the API server (all todos with a matching userId). The params is used by the find getter to display a subset of this data from the store. If the isComplete attribute gets set to true, only completed todos will be displayed. Since a fetchParams is provided, the watch strings will be modified internally to watch the fetchParams object. This means if you are watching params.query.userId and you add a fetchParams, the component is smart enough to know you meant fetchParams.query.userId. You don't have to rewrite your watch attribute after adding a fetchParams prop.

<template>
  <FeathersVuexFind
    v-slot="{ items: todos }"
    service="todos"
    :params="{ query: { isComplete } }"
    :fetch-params="{ query: { userId } }"
    watch="params.query.userId"
  >
    <div>
      {{todos}}
    </div>
  </FeathersVuexFind>
</template>

<script>
export default {
  data: () => ({
    isComplete: false,
    userId: 1
  })
}
</script>

# Modify the scope data

The edit-scope function allows you to modify the scope before passing it down to the default slot. This feature can be super useful for preparing the data for the template. The prepareCategories method in this next example adds two properties to the scope data, which are used to create a nested category structure:

<template>
  <FeathersVuexFind
    v-slot="{ parentCategories, categoriesByParent }"
    service="categories"
    :params="{ query: {} }"
    :edit-scope="prepareCategories"
  >
    <ul>
      <li v-for="parent in parentCategories" :key="parent._id">
        <p>{{parent.name}}</p>
        <ul>
          <li v-for="child in categoriesByParent[parent.path]" :key="child._id">
            {{child.name}}
          </li>
        </ul>
      </li>
    </ul>
  </FeathersVuexFind>
</template>

<script>
export default {
  methods: {
    prepareCategories (scope) {
      scope.parentCategories = scope.items.filter(cat => !cat.path.includes('/'))
      scope.categoriesByParent = scope.parentCategories.reduce((acc, parentCat) => {
        acc[parentCat.path] = scope.items.filter(cat => {
          return cat.path.includes(parentCat.path) && cat.path !== parentCat.path
        })
        return acc
      }, {})
    }
  }
}
</script>

# server-side pagination

When you want to use server-side pagination you need to pass the ids from the server to vuex. It can be done by a combination of params, fetchParams and editScope as described below. The fetchParams-prop is only computed after items from the server arrived. The ids for the find getter as well as the total amount of available values total are extracted by the edit-scope function and stored in data:

<template>
  <FeathersVuexFind
    v-slot="{ items: todos }"
    :service="service"
    :params="internalParams"
    :fetch-params="fetchParams"
    :edit-scope="getPaginationInfo"
  >
    <div>
      {{todos}}
    </div>
  </FeathersVuexFind>
</template>

<script>
export default {
  data() {
    return {
      service: 'users',
      ids: [],
      params: {
        query: {
          isComplete: true
        },
      },
      total: 0,
      limit: 10,
      skip: 0
    };
  },
  computed: {
    internalParams() {
      const { idField } = this.$store.state[this.service];
      return {
        query: {
          [idField]: {
            $in: this.ids
          }
        }
      };
    },
    fetchParams() {
      const query = Object.assign({}, this.params.query, { $limit: this.limit, $skip: this.skip });

      return Object.assign({}, this.params, { query });
    }
  },
  methods: {
    getPaginationInfo (scope) {
      const { queryInfo, pageInfo } = scope;

      this.total = queryInfo.total;
      if (pageInfo && pageInfo.ids) {
        this.ids = pageInfo.ids;
      }
    }
  }
}
</script>

# Query when certain conditions are met

Sometimes you only want to query the API server when certain conditions are met. This example shows how to query the API server when the userSearch has as least three characters. This property does not affect the internal find getter, so the items will still update when the userSearch property has fewer than three characters, just no API request will be made. The isFindPending attribute is used to indicate when data is being loaded from the server.

<template>
  <div>
    <input type="text" v-model="userSearch"/>

    <FeathersVuexFind
      v-slot="{ items: users, isFindPending: areUsersLoading }"
      service="users"
      :params="usersParams"
      watch="params"
      :queryWhen="userSearch.length > 2"
    >
      <ul :class="[ areUsersLoading && 'is-loading' ]">
        <li v-for="user in users" :key="user._id">
          {{user.email}}
        </li>
      </ul>
    </FeathersVuexFind>
  </div>
</template>

<script>
export default {
  data: () => ({
    userSearch: ''
  }),
  computed: {
    usersParams () {
      return {
        query: {
          email: { $regex: this.userSearch, $options: 'igm' },
          $sort: { email: 1 }
        }
      }
    }
  }
}
</script>

# Use a get request

You can perform get requests with the FeathersVuexGet component and its id property. In the next example, when the selectedUserId changes, a get request will automatically fetch and display the matching user record. It also shows how to use the isGetPending prop to update the UI

<FeathersVuexGet
  v-slot="{ item: currentUser, isGetPending }"
  service="todos"
  :id="selectedUserId"
>
  <div>
    <div v-if="isGetPending" class="loading"> loading... </div>
    {{currentUser}}
  </div>
</FeathersVuexGet>

← Mixins Working with Forms →

# Renderless Data Components

# FeathersVuexFind

# Example

# Props

# Scope Data

# FeathersVuexGet

# Example

# Props

# Scope Data

# FeathersVuexCount 3.12.0+

# Props

# Scope Data

# A note about the internal architecture

# Registering the components

# Scope Data

# Destructuring props

# Renaming props with destructuring

# Usage Examples

# A basic find all

# Fetch data from the API and the same data from the Vuex store

# Only get data from the local Vuex store

# Watch the query and re-fetch from the API

# Use a distinct params and fetchParams

# Modify the scope data

# server-side pagination

# Query when certain conditions are met

# Use a get request

# Use a distinct `params` and `fetchParams`