How to apply refetch logic in Solidjs

 In Reactjs libraries such ReactQuery make API fetching so simple and fast. Solidjs also come with powerful tools. 

We have already seen how to fetch API using the Resource feature. 👓 

Sometimes we need to fetch the API again under special circumstances such while network failure,  require to fetch content in a regular intervals etc.

Resource provide us way to re-fetch/ reuse the function. It really do return a re-fetch function and DOM will automatically render the changes after the re-fetch, since it a reactive signal.

const [posts, {refetch}] = createResource(() =>
....
);

How to call the re-fetch and where to call ? 😉

One of the ideal use is combine the call with a createEffetct.

In our example we have a search component and want to re fetch particular content based on the search text as the user type in.

createEffect((prev) => {

if (prev !== searchStore.searchString) {
console.log("Search Text changed");
refetch()
}
});

 That's all you need to know about refetch

 

 

Read More

Create a fallback component in Solidjs

 Solidjs offer interesting features that let you conditionally render component. Vuejs and Reactjs didn't offer such a component as I know.

It will be very help full, 😊 When fetching API data and sometimes the data may not retrieve correctly and you can use the <For> component's fallback with an arrow function to render a loading component instead.

Solidjs also provides Show component which help us conditionally render components. The Show component is more applicable in the above mentioned case.

<Show
when={posts()?.length>0}
fallback={() => ( <GridSkelton /> )}>
<For each={posts()}>{(post) => <PostCard post={post} />}</For>
</Show>

Here the Show will check  posts Resource signal📶 and make sure the data received properly and then proceed to render it. 

We can also use the fallback in a For component too. 

Read More JavaScript Guides on JavaScript Super User

 

Read More