SolidJS: how to use async methods in createEffect?

In SolidJS, createEffect is used to run side effects, and it does not support async functions or await directly. However, you can still work with asynchronous tasks inside createEffect by using then or catch on Promises.

You can use then and catch on any function that returns a Promise.

Here's an example of how to handle async methods inside createEffect:

Javascript:

import { createEffect, createSignal } from 'solid-js';

const [data, setData] = createSignal(null);
const [error, setError] = createSignal(null);

createEffect(() => {
  // Fetch data from an API
  fetch('https://api.example.com/data')
    .then((response) => {
      if (!response.ok) {
        throw new Error('Network response was not ok');
      }
      return response.json();
    })
    .then((data) => {
      setData(data);
      setError(null);
    })
    .catch((error) => {
      setError(error.message);
      setData(null);
    });
});

Typescript:

import { createEffect, createSignal, Signal } from 'solid-js';

interface Data {
  // Define your data structure here, e.g.,
  id: number;
  name: string;
}

const [data, setData] = createSignal<Data | null>(null);
const [error, setError] = createSignal<string | null>(null);

createEffect(() => {
  // Fetch data from an API
  fetch('https://api.example.com/data')
    .then((response) => {
      if (!response.ok) {
        throw new Error('Network response was not ok');
      }
      return response.json();
    })
    .then((data: Data) => {
      setData(data);
      setError(null);
    })
    .catch((error: Error) => {
      setError(error.message);
      setData(null);
    });
});