LoadableData
Simple framework-agnostic wrapper around loadable data to help encapsulate and use state changes in a UI.
Example: Vue in browser
<body>
...
<div id="app" v-cloak>
<span v-if="repositories.state.loading">Loading data</span>
<span v-if="repositories.state.ready">
Lab5e has {{ myAsyncData.data.length }} public repositories!
</span>
<span v-if="repositories.state.error">{{ myAsyncData.errorMessage }}</span>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script src="https://cdn.jsdelivr.net/npm/@lab5e/loadabledata"></script>
<script>
var app = new Vue({
el: "#app",
data() {
return {
repositories: loadabledata.fromUrl(
"https://api.github.com/users/lab5e/repos",
(error) => `Error trying to fetch data. Error: ${error}`,
),
};
},
});
</script>
</body>
Example: In ts
You must first install the dependency
npm i -S @lab5e/loadabledata
Then you can have a Lab5eRepos.vue-file which details the number of repositories Lab5e has publically available.
<template>
<div>
<span v-if="repositories.state.loading">Loading data</span>
<span v-if="repositories.state.ready">
Lab5e has {{ myAsyncData.data.length }} public repositories!
</span>
<span v-if="repositories.state.error">{{ myAsyncData.errorMessage }}</span>
</div>
</template>
<script lang="ts">
import { fromPromise, LoadableData } from "@lab5e/loadabledata";
import Vue from "vue";
export default Vue.extend({
data(): { repositories: LoadableData<Repositories[]> } {
return {
repositories: fromUrl(
"https://api.github.com/users/lab5e/repos",
(error) => `Failed to list available todos. ${error}`,
[],
),
};
},
});
</script>
Available convenience functions
fromPromise example
We also have fromPromise, which takes a generic Promise with a response value that will follow the Promise lifecycle.
This is perfect when using client libraries or have a more complex task that isn't just fetching a URL.
Example
Given that you have a method that returns a Promise with the signature Promise<Todo[]>:
listTodos(): Promise<Todo[]>() { ... }
You can then use the convenience method fromPromise which can be imported directly from the loadabledata package. A fully working example can be shown underneath:
<template>
<div>
<loader-spinner v-if="todos.loadingState.loading"></loader-spinner>
<span v-if="todos.loadingState.error">
{{ todos.errorMessage }}
</span>
<todo-component
v-if="todos.loadingState.ready"
v-for="todo of todos.data"
:key="todo.id"
:todo="todo"
>
</todo-component>
</div>
</template>
<script lang="ts">
import { fromPromise, LoadableData } from "@lab5e/loadabledata";
import Vue from "vue";
export default Vue.extend({
data(): { todos: LoadableData<Todo[]> } {
return {
todos: fromPromise(listTodos(), (error) => `Failed to list available todos. ${error}`, []),
};
},
});
</script>
Index
Interfaces
Functions
Functions
Const emptyLoadableData
-
Type parameters
-
T
Parameters
-
initialData: T
Returns LoadableData<T>
-
Const emptyStates
-
Convenience method for returning an empty state object for LoadableData
Returns States
A 'none' state object which is the default initial value for LoadableData
Const fromPromise
-
Creates a LoadableData object with the type from a given Promise. It will update the LoadableData according to the Promise lifecycle.
Type parameters
-
T
Parameters
-
promise: Promise<T>
The Promise
to be used in the loadable data -
errorHandler: (error: Error) => string = ...
The error message handler if an error occurs
-
-
Parameters
-
error: Error
Returns string
-
-
-
-
initialData: T = ...
The initial data to load the data field with
Returns LoadableData<T>
-
Const fromUrl
-
Creates a LoadableData object and uses fetch to retrieve data from given URL. The type is given by generics. It will update the LoadableData according to the fetch lifecycle.
Type parameters
-
T
Parameters
-
url: string
-
errorHandler: (error: Error) => string = ...
The error message handler if an error occurs
-
-
Parameters
-
error: Error
Returns string
-
-
-
-
initialData: T = ...
The initial data to load the data field with
Returns LoadableData<T>
-
Generated using TypeDoc
Gives an empty LoadableData for initialization purposes