How to fetching data from REST API in Solidjs

 

REST API fetching is essential in modern web application. React and Vuejs has different approach for this. Solidjs provides a special featured for async data fetching call Resource.

Resource

First we have to create a Resource which is a special signal.

import { createResource, For } from "solid-js";
export async function Fetch(){
return (await fetch("https://jsonplaceholder.typicode.com/posts")).json();
}

const [posts] = createResource(Fetch);

We created a fetcher function to read data from the API. Using the createResource method and the fetcher method, we can create a reactive object.

In our example the reactive signal returns a set of objects. We can render the signal using the For component as follows.

<For each={posts()}>{(post) => <div>{post.title} </div>}</For>