Data Fetching

// src/pages/post.tsx
// define fetcher
const fetcher = (url: string) => ofetch(url, { method: 'GET' });

// use `useQuery` to fetch data
const { data, isLoading, isError, error } = useQuery({ queryKey: ['posts'], queryFn: fetcher });

// usage
// pages/post.tsx
export function Component() {
  const { data, isLoading, isError, error } = usePosts();

  return <div>{data.title}</div>;
}

// hooks/query/use-posts.ts
// define fetcher
const fetcher = (url: string) => ofetch(url, { method: 'GET' });

// use `useQuery` to fetch data
export function usePosts() {
  const { data, isLoading, isError, error } = useQuery({ queryKey: ['posts'], queryFn: fetcher });

  return { data, isLoading, isError, error };
}

// usage
// pages/post.tsx
export function Component() {
  const { data, isLoading, isError, error } = usePosts();

  return <div>{data.title}</div>;
}

// src/pages/post.tsx

const loader = async () => {
  const data = await fetcher('/api/posts');
  return data;
};

// use it
// pages/post.tsx
export function Component() {
  const data = useLoaderData();

  return <div>{data.title}</div>;
}

// src/pages/post.tsx

const mutation = useMutation({ mutationFn: fetcher });

// usage
// pages/post.tsx
export function Component() {
  const { mutate, isPending, isError, error } = mutation;

  return <button onClick={mutate}>Submit</button>;
}