Version: 3.0.0

Providers

Defining providers#

A Provider defines a specific resource in a data origin.

When we instantiate a Provider, we'll get a provider instance that will be alive during the whole life of our application, as it is going to be at charge of the cache, avoiding unnecessary resource consumptions while the data origin has not changed.

Remember that providers are queryable, so you don't need to create a provider for each specific model, the approach is defining a provider for each different resource in the data origin. In the case of an API example, you should define a provider for each different API url.

Using the Axios addon#

Remember that Data Provider is not concerned about specific data origins. For this example, as we are going to retrieve todos from a REST API, we are going to use the @data-provider/axios addon.

First of all, install it:

npm i @data-provider/axios
info

Keep in mind that this guide will talk only about the REST Api origin provided by @data-provider/axios, but the concepts can be applied to any type of origin, as Data Provider is origin agnostic.

Fetch todos from the API#

Now we are going to define a provider for the todos collection and another one for the todo models.

  • todos - Will fetch data from /todos
  • todo - will fetch data from /todos/:id

Why to add two different providers, one for the collection an one for the model? Well, even when the "todos" and the "todo" could seem to be the same "entity", the type of data returned by the API differs in both cases, and the queries that both origins will accept will be different too. So, for simplicity, we'll keep them as separated providers, and later we will define a relation between them in order to bind their caches lifecycle.

Arguments accepted by the Axios Class are:

  • options - An options object is provided as first argument. Options will differ depending of the type of origin. In this case, we will define the url of the API. We do not define now the baseUrl, this configuration is delegated to the main file of the application, avoiding coupling the providers to it, which improves its reusability. There are options that are common to all origin addons, as the id one.
import { Axios } from "@data-provider/axios";
export const todos = new Axios({
id: "todos",
url: "/todos"
});

Now define another provider for retrieving specific todos. In this case, the url includes a parameter. The value of the parameter will be defined by the query value that we will pass to the provider when using it:

export const todo = new Axios({
id: "todo",
url: "/todos/:id"
});

Maybe you have noticed that using only the "todos" origin could be enough, as retrieving each todo from the server separately could not be necessary. We are doing it for better comprehension of the examples. Performance of the resultant application is not the target of this guide.

Source code#

We will maintain our data sources separated from the views, this is why this file is located under the data folder. This is not a requisite, you could organize the code of your application in any way, but it is strongly recommended.

data/todos.js#

import { Axios } from "@data-provider/axios";
export const todos = new Axios({
id: "todos",
url: "/todos"
});
export const todo = new Axios({
id: "todo",
url: "/todos/:id"
});