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

When using tsdx with React, null values can prevent proper usage of hooks

Recently, I attempted to develop a React TypeScript component using tsdx for compilation and encountered a roadblock while debugging. The package appears to be successfully published and installed without any errors. However, when trying to use it, I consi ...

The error code TS2474 (TS) indicates that in 'const' enum declarations, the member initializer must be a constant expression

Error code: export const enum JSDocTagName { Description = "desc", Identifier = "id", Definition = "meaning", } Implementing Angular 6 in conjunction with the .NET framework. ...

Retrieving information from Next.js and Typescript with the help of getStaticProps

I've been working on a personal project with Next.js and TypeScript. I'm attempting to fetch data from an API and then map the items, but I'm running into issues. When I use console.log, it returns undefined. The file is located in the pages ...

In React Router v6, you can now include a custom parameter in createBrowserRouter

Hey there! I'm currently diving into react router v6 and struggling to add custom params in the route object. Unfortunately, I haven't been able to find any examples of how to do it. const AdminRoutes: FunctionComponent = () => { const ...

Issue: Incompatibility between React and TypeScript leading to an error message - "No

When I try to map through an array in my code, I encounter a significant error as shown below: // Home.tsx render() { const { inputs, outputs, expectedOutputs } = this.state; return ( <ContentContainer> {inputs.map((inpu ...

Injecting Dependencies in Angular 2 Without Using the Constructor

Exploring DI in Angular 2 has led me to implement a REST-Client using generic subtypes for concrete Datatypes like this: class RESTClient<T>{ constructor() { var inj = ReflectiveInjector.resolveAndCreate([HTTP_PROVIDERS]); this. ...

Tips for modifying the type definition of a third-party library in a Vue project built with Create-Vue

After updating the Cesium library in my Vue project, I encountered some errors. This is the code snippet: camera.setView({ destination, orientation: { heading, pitch } }) The error message reads: Type '{ heading: number; pitch: number; }' i ...

Typescript's async function failing to execute properly

I'm currently facing an issue with my code and I'm a bit puzzled as to where the problem lies. The console is displaying the correct data for this.allNominations, but it appears that the third for-loop is not being executed at all. As a result, t ...

Perplexed by the implementation of "require(...)" in TypeScript

After reading several blog posts, my understanding of TypeScript modules remains confusing. I have worked with three different modules (all installed via npm) and encountered varying behavior: (1) Importing and using Angular 2 from npm required me to add ...

React Native Material - Implementing a loading indicator upon button press

With React Native Material, I am trying to implement a loading feature when a button is clicked. The goal is to show the "loading" message only when the button is active, and hide it otherwise. Additionally, I would like for the loading message to disappea ...

"Encountering connectivity issues between NestJs and TypeORM when trying to establish a

My current challenge involves connecting to MySQL. I have set the database connection variables in a .env file located in the root directory, and I am initializing the connection in the app.module.ts file. The problem arises when I attempt to create or run ...

Inferring types from synchronous versus asynchronous parameters

My objective is to create an "execute" method that can deliver either a synchronous or an asynchronous result based on certain conditions: type Callback = (...args: Arguments) => Result const result: Result = execute(callback: Callback, args: Arguments) ...

What is the method to retrieve Response Headers in cases of an empty response?

Currently, I am working with Angular2 and dotcms. My goal is to retrieve response headers after making a call to subscribe. const httpOptions = { headers: new HttpHeaders({ 'Content-Type': 'application/json' }) .append('Access ...

Challenges with Type Aliases when Using Typescript with MaterialUI Icons

I am searching for a way to dynamically incorporate Material UI icons into my code based on specific strings found in a configuration file. I have come across an approach that seems promising: https://medium.com/@Carmichaelize/dynamic-tag-names-in-react-a ...

How can we effectively transfer a value from TypeScript/Angular?

I am new to TypeScript and Angular, and I'm struggling with assigning a value to a variable within a function and then using that value outside of the function. In regular JavaScript, I would declare the variable first, define its value in the functio ...

What is the best way to categorize an array based on a specific key, while also compiling distinct property values into a list

Suppose there is an array containing objects of type User[]: type User = { id: string; name: string; role: string; }; There may be several users in this array with the same id but different role (for example, admin or editor). The goal is to conv ...

Waiting for variable to become false using Angular 7 Observable

The observable below highlights the authentication process: import { Injectable } from '@angular/core'; import { HttpClient } from '@angular/common/http'; import { CookieService } from 'ngx-cookie-service'; import { Observabl ...

iterating over a nested map within a map in an Angular application

I wrote a Java service that returns an observable map> and I'm currently struggling to iterate through the outer map using foreach loop. [...] .then( (response: Package) => { response.activityMap.forEach((key: string, value ...

An error occurred as the Serverless Function timed out while attempting to load a dynamic route in Next.js version 13

I have a basic Next.js application with the following route structure: /contentA/ - Static - Initial load: 103 kB /contentA/[paramA]/groups - SSG - Initial load: 120 kB /contentB/[paramA]/[paramB]/[paramC] - SSR (client component) - Initial load: 103 kB ...

I'm currently working on creating an online store using Next.js and TypeScript, but I'm struggling to effectively incorporate my fake product data array into the site

"using client" import Container from "@/components/Container"; import ProductDetails from "./ProductDetails"; import ListRating from "./ListRating"; import { products } from "@/utils/products"; interface I ...