Hello, I am using httpResource with version 20 of Angular but it returns undefined, why?
#bug httpResource
opaque kite
get registerError() {
const error = this.registerResource.error() as HttpErrorResponse | null;
console.log(error);
return this.registerResource.error() as HttpErrorResponse | null;
}
registerResource = httpResource(() => {
const requestData = this.registerRequest();
if (!requestData) return undefined;
return {
url: `${environment.strapiUrl}/api/auth/local/register`,
method: "POST",
body: requestData,
};
});
{
"data": null,
"error": {
"status": 400,
"name": "ApplicationError",
"message": "Email or Username are already taken",
"details": {}
}
}
lyric urchin
What returns undefined? The error is not telling you that something returns undefined. It's telling you that you're trying to access the value of the resource, but you can't because it's in error. Check that you can access the value before accessing it.
opaque kite
it turns me around undefined that
I'm trying to display the errors that the backend sends me to display them
lyric urchin
Well, it returns undefined because, at the beginning, when the server has not returned any response yet, there is no error. Then later, the server returns its response, and the resource now has an error, but the template evaluation crashes with an error because you're trying to access the resource value. You need to check that there is a value before trying to access it.
Post a minimal version of your template that exhibits the same behavior.
opaque kite
first
second
auth.service.ts
private readonly registerRequest = signal<RegisterData | null>(null);
registerResource = httpResource(() => {
const requestData = this.registerRequest();
if (!requestData) return undefined;
return {
url: `${environment.strapiUrl}/api/auth/local/register`,
method: "POST",
body: requestData,
};
});
get registerError() {
return this.registerResource.error() as HttpErrorResponse | null;
}
register.component
constructor() {
this.registerForm = this.fb.group({
username: ["", Validators.required],
email: ["", [Validators.required, Validators.email]],
password: ["", Validators.required],
});
this.setupEffects();
}
effect(() => {
const error = this.authService.registerError;
if (error) {
const errorMessage = this.getErrorMessage(error);
toast.error("Erreur d'inscription", {
description: errorMessage,
});
}
});
private getErrorMessage(error: Error): string {
console.log(error);
return "Une erreur inattendue s'est produite";
}
This is what I do
lyric urchin
The problem is in your template. That's why I asked you to post it. See https://stackblitz.com/edit/stackblitz-starters-qvgss9ak?file=src%2Fmain.ts. If you remove the @if from the template and directly try to display the value without checking that there is one, you'll have the same error as yours.
Also, resources are used to get data whenever a signal changes. To register, you shouldn't use a resource. That's not what it's designed to do.
opaque kite
Also, resources are used to **get** data whenever a signal changes. To register,...
Do I have to go through httpClient directly?
lyric urchin
Yes.
opaque kite
So I see httpResource is used for example for a pagination system, search etc?
lyric urchin
Yes. Or just to get data, without even having to search or paginate. For mutations, resources are not the right tool.
But to be clear, even if you use it to search, paginate, get, etc., you'll have the same problem you're having here if you try to read the value without checking if there is one.
opaque kite
and where can you find all these answers? I'm having a bit of trouble with the Angular docs
lyric urchin
I read the RFCs about resources, read the changelogs of the various releases, etc. Being a trainer about Angular, it's part of my job to learn about those things.
But the documentation is telling you about this: https://angular.dev/api/core/Resource
value
Signal<T>The current value of the Resource, or throws an error if the resource is in an error state.
(emphasis mine)
