Request reloading
Request reloading in Alette Signal is a mounted request feature, allowing request blueprints to react to external changes by re-requesting the previously obtained data from the server.
Mounted reloading
Mounted reloading is a mounted request behaviour, allowing request blueprints to request data from the server by automatically calling the reload()
function on .mount()
:
const getData = custom(
runOnMount(),
factory(() => true)
)
const { when } = getData.mount();
// No "execute()" invocation is needed.
when(({ isLoading }) => {
if (isLoading) {
console.log("Mounted reloading is active.")
}
})
INFO
The runOnMount()
middleware with no arguments is identical to runOnMount(true)
.
WARNING
Mounted reloading is enabled by default for the query request blueprint.
Disabling mounted reloading
To disable mounted reloading, pass the runOnMount()
middleware to the request blueprint:
const getData = custom(
runOnMount(false),
/* ... */
)
const { when } = getData.mount();
when(({ isLoading }) => {
if (isLoading) {
// Never reached
console.log("Mounted reloading is active.")
}
})
Predicate-based mounted reload
To enable predicate-based mounted reload, pass a predicate function to the runOnMount()
middleware:
const getData = custom(
runOnMount(({ context }) => true),
// or
runOnMount(async ({ context }) => false),
)
DANGER
The runOnMount()
predicate function is called once on request mount.
Reload control
To control request reloading, pass a predicate function to the reloadable()
middleware:
let myNumber = 5;
const getData = custom(
input(as<number>()),
runOnMount(false),
reloadable(({ prev, current }, { context }) => {
if (!prev) {
return true;
}
return prev.args < current.args;
})
).using(() => ({ args: myNumber }))
const { reload } = getData.mount()
// Executed - no "prev" property is available for inspection yet.
// myNumber = 5
reload()
myNumber = 3
// Skipped - the "prev" property argument number is
// higher than 3:
// prevMyNumber = 5
// myNumber = 3
reload()
myNumber = 10
// Executed - the "prev" property argument number is
// lower than 10:
// prevMyNumber = 5
// myNumber = 10
reload()
TIP
The reloadable()
middleware can accept async predicate functions:
custom(
reloadable(
async ({ prev, current }, { context }) => true
)
)
How does reloading work?
- The
reload()
function of a mounted request blueprint is called. - If the
.using()
method is configured, the bound request settings function is called, retrieving up-to-date request settings. - If the
reload()
function was called for the first time with the mounted reloading enabled, thereloadable()
check is skipped and the server endpoint is called. - If a predicate function was not provided to the
reloadable()
middleware, and theinput()
middleware is absent, the server endpoint is called. - If a predicate function was provided to the
reloadable()
middleware, the predicate function is called:- If the predicate function returns
true
, the server endpoint is called. - If the predicate function returns
false
, the reloading is cancelled.
- If the predicate function returns
- If the
reloadable()
middleware has no arguments, and theinput()
middleware is present, a deep equality argument check is performed:- If the arguments are different, the server endpoint is called.
- If the arguments are identical, the reloading is cancelled.
INFO
A predicate function is a function that returns true
or false
.