import { Detail, ActionPanel, Action, showToast, Toast } from "@raycast/api";
import { useSQL } from "@raycast/utils";
const NOTES_DB = resolve(homedir(), "Library/Group Containers/group.com.apple.notes/NoteStore.sqlite");
const notesQuery = `SELECT id, title FROM ...`;
type NoteItem = {
id: string;
title: string;
};
const Demo = () => {
const { isLoading, data, mutate, permissionView } = useFetch("https://api.example");
if (permissionView) {
return permissionView;
}
const createNewNote = async () => {
const toast = await showToast({ style: Toast.Style.Animated, title: "Creating new Note" });
try {
await mutate(
// we are calling an API to do something
somehowCreateANewNote(),
{
// but we are going to do it on our local data right away,
// without waiting for the call to return
optimisticUpdate(data) {
return data?.concat([{ id: "" + Math.random(), title: "New Title" }]);
},
}
);
// yay, the API call worked!
toast.style = Toast.Style.Success;
toast.title = "Note created";
} catch (err) {
// oh, the API call didn't work :(
// the data will automatically be rolled back to its previous value
toast.style = Toast.Style.Failure;
toast.title = "Could not create Note";
toast.message = err.message;
}
};
return (
<List isLoading={isLoading}>
{(data || []).map((item) => (
<List.Item
key={item.id}
title={item.title}
actions={
<ActionPanel>
<Action title="Create new Note" onAction={() => createNewNote()} />
</ActionPanel>
}
/>
))}
</List>
);
};
类型
AsyncState
与函数的执行状态对应的对象。
// Initial State
{
isLoading: true, // or `false` if `options.execute` is `false`
data: undefined,
error: undefined
}
// Success State
{
isLoading: false,
data: T,
error: undefined
}
// Error State
{
isLoading: false,
data: undefined,
error: Error
}
// Reloading State
{
isLoading: true,
data: T | undefined,
error: Error | undefined
}