How do i reset createResource() error?

[flixyudh]

I want to implement a refetch function manually when user clicked the button.

currently whenever I got an error from API, i'm showing a toast when the error appear, now i want to add "Retry" button next to a toast message, the problem is toast component always show because of <Show when={data.error}>

current reproduction https://playground.solidjs.com/anonymous/ecd6ac2a-1486-491b-b43b-e52519e559ec

import { render } from "solid-js/web";
import { Show, createResource } from "solid-js";

const fetcher = async () => {
  await new Promise((resolve) => setTimeout(resolve, 3000));
  throw new Error("Something went wrong");
};

function App() {
  const [data] = createResource(fetcher);

  return (
    <div>
      <p>HELLO WORLD</p>
      <Show when={data.error}>
        <p>{data.error.message}| try again</p>
      </Show>
    </div>
  );
}

render(() => <App />, document.getElementById("app")!);

Question: how do i reset the .error value to null manually? because i don't want to show Toast forever until refetch resolve.