init

api/endpoints/getPosts.ts

@@ -0,0 +1,7 @@
+import { httpClient } from '../httpClient'
+
+export const getPosts = (search: string) =>
+  httpClient<Posts>('/api/posts', {
+    method: 'GET',
+    query: { search },
+  })

api/endpoints/getUsers.ts

@@ -0,0 +1,4 @@
+import { httpClient } from '../httpClient'
+
+export const getUsers = () =>
+  httpClient<Users>('/api/users')

api/endpoints/index.ts

@@ -0,0 +1,2 @@
+export * from './getPosts'
+export * from './getUsers'

api/httpClient.ts

@@ -0,0 +1,21 @@
+import { useToast } from '#imports'
+
+const showToast = (description: string) => {
+  if (!import.meta.client)
+    return
+
+  const toast = useToast()
+
+  toast.add({
+    title: 'Uh oh! Something went wrong.',
+    description,
+  })
+}
+
+export const httpClient = $fetch.create({
+  onResponseError({ request, response }) {
+    const message = response?._data?.statusMessage ?? 'Something went wrong'
+
+    showToast(message)
+  },
+})

api/queries/index.ts

@@ -0,0 +1,2 @@
+export * from './useGetPosts'
+export * from './useGetUsers'

api/queries/useGetPosts.ts

@@ -0,0 +1,10 @@
+import { useQuery } from '@tanstack/vue-query'
+import { getPosts } from '~/api/endpoints'
+
+export const useGetPosts = (search: MaybeRef<string>) => {
+  return useQuery<Posts>({
+    queryKey: ['get-posts', search],
+    queryFn: () => getPosts(unref(search)),
+    staleTime: Infinity,
+  })
+}

api/queries/useGetUsers.ts

@@ -0,0 +1,10 @@
+import { useQuery } from '@tanstack/vue-query'
+import { getUsers } from '~/api/endpoints'
+
+export const useGetUsers = () => {
+  return useQuery<Users>({
+    queryKey: ['get-users'],
+    queryFn: getUsers,
+    staleTime: Infinity,
+  })
+}