Skip to content

How to Handle Async Data Fetching Using CreateResource in SolidJS

In this article, you will learn how to handle async data fetching using createResource in SolidJS. The article assumes that you have a basic understanding of SolidJS. If you need a refresher, I recommend looking at the official SolidJS website to get started with SolidJS. You can also visit for a list of SolidJS libraries and resources.

🔗What is createResource?

createResource is a special Signal designed specifically to handle async data fetching.

Signals are the cornerstone of reactivity in SolidJS. They contain values that change over time, but unlike typical values, Signals are also event emitters. When the data kept in the Signal is changed, the Signal emits events in the system so things that depend on the Signal value can be notified.

Signals are similar to “observables'', “streams”, or “subjects” in other reactive programming technologies. For more information on Signals, check out the SolidJS Documentation.

The purpose of createResource is to wrap async values (any value that returns as a promise) in a way that makes them easy to interact with in Solid's execution model. This is useful because it ensures that the async function is non-blocking.

🔗How does createResource work?

For createResource to work, it needs an argument which is a function that returns a promise. It returns a data getter that wraps the value returned from the fetcher function.

Screenshot 2023-02-24 145205

Easy right? The resulting Resource Signal (products) also contains reactive loading and error properties that make it easy to control the view based on the current status.

Screenshot 2023-02-24 145408

Let’s see how all of these are used in an example.

Screenshot 2023-02-24 145631

In this example, we created a fetcher function that makes a call to get a list of products, and this function is passed in as an argument to createResource. createResource returns a Signal which has reactive properties like loading, error, latest, etc. We use the properties to conditionally render JSX based on the current reactive state.

createResources can also take in a source Signal as the first argument and the async fetcher function as the second. The source Signal is provided as the query to the async fetcher function which returns a promise. A change in the source Signal calls an internal fetch method to fetch new data based on the change. If you are familiar with React-query, source Signals are similar to query keys.

Let’s write an example that fetches users’ profiles from GitHub. It takes the username as input and returns the user’s profile details.

Screenshot 2023-02-24 145833

Here we are fetching a GitHub user’s info. We have an input field that receives the username and set it as a Signal. The createResource takes the source Signal as the first argument and the async fetcher function as the second argument. An internal fetch method will be called anytime the Signal value changes. So if we enter a different username into the input field, createResource is aware of that change, and fetches new data based on the new Signal value.

🔗Refetch and Mutate

The second value that comes back from createResource contains a mutate method for directly updating the internal Signal, and a refetch method to reload the current query even if the source hasn't changed.

Mutate is useful for "optimistic mutations" like when you want to automatically update a todo list that is fetched from the server when someone clicks the add button.

Screenshot 2023-02-24 150136

Refetch is useful when you know the data returned from the server changes constantly and you would like to get the latest information. For example, if you are building an application that needs to show the current price of Bitcoin in US dollars, you will need to refetch the data because the prices fluctuate.

Screenshot 2023-02-24 150322

🔗Why is createResources special?

For small examples, createResource can be as simple as just setting a Signal. However, it interacts with the broader Solid framework in different ways:

When your app is server-side rendered, createResource is fetched on the server while effects and Signal setters aren't, so resources work a lot better with solid start.

Any loading resources will put your app in suspense mode which can automatically provide benefits when interacting with the Solid router.


In this article, we saw how to handle async data fetching using createResource. We also explored some use cases, and when and how to use some properties and methods returned by createResource. You can find the live example for this blog post on StackBlitz.

If you would like to learn more about SolidJS, check out for a list of libraries and resources.

This Dot Labs is a JavaScript consulting firm that enables companies to build and improve their digital technologies with confidence. For expert architectural guidance, training, consulting, engineering leadership, and development services in React, Angular, Vue, Web Components, GraphQL, Node, Bazel, Polymer, and more, visit

You might also like