refactor(core): rename resource's request to params (#60919)

As decided in the resource RFC, this commit renames the `request` option of
a resource to `params`, including the subsequent argument passed to the
loader. It also corrects the type in the process to properly allow narrowing
of the `undefined` value.

Fixes #58871

PR Close #60919
This commit is contained in:
Alex Rickabaugh
2025-04-18 14:24:13 -07:00
committed by Miles Malerba
parent d8ca560a15
commit d0c9a6401a
8 changed files with 83 additions and 77 deletions
+2 -2
View File
@@ -55,8 +55,8 @@ export class Search {
private readonly client = inject(ALGOLIA_CLIENT);
searchResults = resource({
request: () => this.searchQuery() || undefined, // coerces empty string to undefined
loader: async ({request: query, abortSignal}) => {
params: () => this.searchQuery() || undefined, // coerces empty string to undefined
loader: async ({params: query, abortSignal}) => {
// Until we have a better alternative we debounce by awaiting for a short delay.
await wait(SEARCH_DELAY, abortSignal);
+15 -15
View File
@@ -14,24 +14,24 @@ import {resource, Signal} from '@angular/core';
const userId: Signal<string> = getUserId();
const userResource = resource({
// Define a reactive request computation.
// The request value recomputes whenever any read signals change.
request: () => ({id: userId()}),
// Define a reactive computation.
// The params value recomputes whenever any read signals change.
params: () => ({id: userId()}),
// Define an async loader that retrieves data.
// The resource calls this function every time the `request` value changes.
loader: ({request}) => fetchUser(request),
// The resource calls this function every time the `params` value changes.
loader: ({params}) => fetchUser(params),
});
// Create a computed signal based on the result of the resource's loader function.
const firstName = computed(() => userResource.value().firstName);
```
The `resource` function accepts a `ResourceOptions` object with two main properties: `request` and `loader`.
The `resource` function accepts a `ResourceOptions` object with two main properties: `params` and `loader`.
The `request` property defines a reactive computation that produce a request value. Whenever signals read in this computation change, the resource produces a new request value, similar to `computed`.
The `params` property defines a reactive computation that produces a parameter value. Whenever signals read in this computation change, the resource produces a new parameter value, similar to `computed`.
The `loader` property defines a `ResourceLoader`— an async function that retrieves some state. The resource calls the loader every time the `request` computation produces a new value, passing that value to the loader. See [Resource loaders](#resource-loaders) below for more details.
The `loader` property defines a `ResourceLoader`— an async function that retrieves some state. The resource calls the loader every time the `params` computation produces a new value, passing that value to the loader. See [Resource loaders](#resource-loaders) below for more details.
`Resource` has a `value` signal that contains the results of the loader.
@@ -39,19 +39,19 @@ The `loader` property defines a `ResourceLoader`— an async function that retri
When creating a resource, you specify a `ResourceLoader`. This loader is an async function that accepts a single parameter— a `ResourceLoaderParams` object— and returns a value.
The `ResourceLoaderParams` object contains three properties: `request`, `previous`, and `abortSignal`.
The `ResourceLoaderParams` object contains three properties: `params`, `previous`, and `abortSignal`.
| Property | Description |
| ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
| `request` | The value of the resource's `request` computation. |
| `params` | The value of the resource's `params` computation. |
| `previous` | An object with a `status` property, containing the previous `ResourceStatus`. |
| `abortSignal` | An [`AbortSignal`](https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal). See [Aborting requests](#aborting-requests) below for details. |
If the `request` computation returns `undefined`, the loader function does not run and the resource status becomes `'idle'`.
If the `params` computation returns `undefined`, the loader function does not run and the resource status becomes `'idle'`.
### Aborting requests
A resource aborts an outstanding request if the `request` computation changes while the resource is loading.
A resource aborts an outstanding loading operation if the `params` computation changes while the resource is loading.
You can use the `abortSignal` in `ResourceLoaderParams` to respond to aborted requests. For example, the native `fetch` function accepts an `AbortSignal`:
@@ -59,7 +59,7 @@ You can use the `abortSignal` in `ResourceLoaderParams` to respond to aborted re
const userId: Signal<string> = getUserId();
const userResource = resource({
request: () => ({id: userId()}),
params: () => ({id: userId()}),
loader: ({request, abortSignal}): Promise<User> => {
// fetch cancels any outstanding HTTP requests when the given `AbortSignal`
// indicates that the request has been aborted.
@@ -78,8 +78,8 @@ You can programmatically trigger a resource's `loader` by calling the `reload` m
const userId: Signal<string> = getUserId();
const userResource = resource({
request: () => ({id: userId()}),
loader: ({request}) => fetchUser(request),
params: () => ({id: userId()}),
loader: ({params}) => fetchUser(params),
});
// ...