What causes the createResource error to become undefined when it is refetched before being properly set?

How can I access and display the error property for a createResource?

In this scenario, why is the error initially set to undefined before it is thrown?

The logging shows that it first displays undefined for the error before eventually getting to line error.

import { render } from "solid-js/web";
import { For, createSignal, createResource, createEffect } from "solid-js";

const p_tau = async () => {
   throw 'line error'
}

function Counter() {
  
  let [s, setS] = createSignal()
  let _r = createResource(s, _ => p_tau())

  setInterval(() => {
     setS(s() + 'h')
  }, 1000)

  createEffect(() => {
     console.log(_r[0].error)
  })

  return (<>
    </>)
}

render(() => <Counter />, document.getElementById("app"));

Answer â„–1

The reason why createResource returns a resource with an initial value of undefined is because the promise from the fetcher function needs to settle with a value before it can be updated:

import { createEffect, createResource, createSignal } from "solid-js";
import { render } from "solid-js/web";

const fetcher = async () => {
  throw 'line error'
}

function Counter() {

  let [s, setS] = createSignal(1);
  
  let [data] = createResource(s, fetcher)

  setInterval(() => {
    setS(s => s + 1);
  }, 1000)

  createEffect(() => {
    console.log(data(), data.error);
  })

  return (<></>)
}

render(() => <Counter />, document.getElementById("app"));

Even if you provide a non-null sourceSignal, the behavior remains the same.

The promise resolves in the next tick of the event loop, which means any immediate errors thrown will not be immediately caught. Solid's runtime operates synchronously, so data.error receives the error only after the next tick.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

retrieving class instances from a Firebase database

I have a new group called GroupA group A { value1: string; value2: string; total(): number { return value1 + value2; } } I want to store instances of GroupA in my database, but when I retrieve them, they are in Object format which does not a ...

Navigating in Angular is made easy with the Angular routing feature, which allows you to redirect

I have been working through the Angular Tour of Heroes Guide and encountered the section on the "default route". I decided to experiment by removing the pathMatch attribute from the Route associated with an empty string. Below is the code snippet in quest ...

In TypeScript, the error "Property does not exist on type 'any[]'" indicates that a specific property is not recognized on

Working on my project using Textscript in Next Js has been mostly smooth sailing, but I keep encountering warnings in my script that say 'Property does not exist on type any[ ]'. The red line under the name, image, and price properties is a sourc ...

TypeScript's type assertions do not result in errors when provided with an incorrect value

We are currently using the msal library and are in the process of converting our javaScript code to TypeScript. In the screenshot below, TypeScript correctly identifies the expected type for cacheLocation, which can be either the string localStorage, the ...

Currently attempting to ensure the type safety of my bespoke event system within UnityTiny

Currently, I am developing an event system within Unity Tiny as the built-in framework's functionality is quite limited. While I have managed to get it up and running, I now aim to enhance its user-friendliness for my team members. In this endeavor, I ...

Is it possible for Angular's `HttpClient` to use complex property types in the `.get()` generics aside from just `string` or `number`?

After spending an entire day researching the topic, I've hit a dead end. All my efforts have only led me to discover one thing—omission. None of the information I've come across mentions whether you can utilize non-simple types (such as string ...

Having difficulty leveraging npm modules in TypeScript

I recently switched from Babel to Typescript and am facing difficulties with importing a module from node_modules. The generated .js build does not include the code from the module I'm trying to import, specifically browser-cookies. I used yarn to in ...

The TypeScript error "Issue with Type Assertion: 'This expression is not callable Type'...' has no call signatures" occurs when there is a missing semicolon

Here's a simplified version of our original code: const start: number = 10 const end: number = 20 (someElement as HTMLInputElement).setSelectionRange(start, end) We encountered an error with the 20, where a red squiggly line appeared indicating ...

Dealing with Endless Loops in React TypeScript: What Happens When State is Set in Multiple Instances of the Same

I'm currently facing an issue where I have two instances of the same component being rendered: <div><Modal title='Login'/></div> <div><Modal title='Join'/></div> Within the component, based on ...

By constantly subscribing to a Behavior Subject, updating the data, and then resetting the value, an endless loop is created

We have implemented a wizard functionality with lazy loading, consisting of a parent component and multiple child components. const routes: Routes = [ { path : '', component : WizardHomeComponent, canActivate: [HomeGuard], chil ...

Enhancing the efficiency of a TypeScript-written file content parsing class

Seeking advice on optimizing a typescript module used by a VSCode extension. This module accepts a directory and parses the content within the files, which can be time-consuming for directories with a large number of files. To avoid copying the entire cla ...

Sorting the material table based on the column IDs, which usually correspond to the column names, may not align with the properties of the data

.ts this.displayedColumns = [ { key: 'id', header: '#' }, { key: 'fullname', header: 'Full name' }, { key: 'email', header: 'email' }, { key: 'roleName', header: ...

What advantages does utilizing Jasmine Spy Object provide in Angular Unit Testing?

I have a question regarding unit testing in Angular using Jasmin/Karma. Currently, I am working with three services: EmployeeService, SalaryService, and TaxationService. The EmployeeService depends on the SalaryService, which is injected into its constru ...

What is causing the duplication of leaves when using this DFS implementation?

I created an algorithm to compare if two trees have the same leaves. Both trees display matching leaf numbers in the exact order, resulting in a true outcome. Below is the code that I formulated: function leafSimilar(root1: TreeNode | null, root2: TreeNo ...

Creating a parameterized default route in Angular 2

These are the routes I've set up: import {RouteDefinition} from '@angular/router-deprecated'; import {HomeComponent} from './home/home.component'; import {TodolistComponent} from './todolist/todolist.component'; import { ...

Implementing a video pause event trigger from a function in Angular2

Here is the content of my player.component.html: <video width="320" height="240" autoplay autobuffer [src]="videoSrc" (ended)="videoEnd()"> Your browser does not support the video tag. </video> <button (click)="pauseOrPlay()">pause/play ...

Angular: extracting value from forkJoin nested within another observable's pipe

Here is the scenario that needs to be implemented: An API call is made which returns a response containing an array of objects. The objects are then mapped to another array of objects. For each item in this new array, another API call needs to be made. Th ...

Restangular: The use of await causes execution to halt when requests fail

I encountered an error interceptor that looks like this: RestangularProvider.addErrorInterceptor((response) => { const error = EnumerableFromObject(response.error.Errors) .Select(i => i.Value.Message) .FirstOrDefault(); toastr.e ...

Canceling a promise in a Vuex action

I am looking to implement the ability to cancel a running promise in my Vue component, specifically a promise returned by a Vuex action. In my scenario, the Vuex action is continuously polling an endpoint for status updates, and I need the capability to s ...

The element type 'x' in JSX does not offer any construct or call signatures

I have recently imported an image and I am trying to use it within a function. The imported image is as follows: import Edit from 'src/assets/setting/advertising/edit.png'; This is the function in question: function getOptions(row) { ...