vue-query

import { createApp, defineComponent } from 'vue'; import { QueryClient, QueryClientProvider, useQuery } from 'vue-query'; const queryClient = new QueryClient(); const fetchTodos = async () => { const response = await fetch('https://jsonplaceholder.typicode.com/todos/1'); if (!response.ok) { throw new Error('Network response was not ok'); } return response.json(); }; const App = defineComponent({ name: 'App', setup() { const { data, isLoading, isError, error } = useQuery('todo', fetchTodos); return { data, isLoading, isError, error, }; }, template: ` <div> <h1>My Todo</h1> <p v-if="isLoading">Loading todo...</p> <p v-else-if="isError">Error: {{ error.message }}</p> <div v-else> <p>ID: {{ data.id }}</p> <p>Title: {{ data.title }}</p> <p>Completed: {{ data.completed ? 'Yes' : 'No' }}</p> </div> </div> `, }); const app = createApp({ render() { return [ h(QueryClientProvider, { client: queryClient }, { default: () => h(App) }) ]; } }); app.mount('#app');