tanstack_query_axios_zod_typesafe_fetcher_quickstart.ts

1import { useQuery } from '@tanstack/react-query';
2import axios from 'axios';
3import { z } from 'zod';
4import { createQuery } from '@dwidge/query-axios-zod';
5
6// 1. Define your response schema
7const UserSchema = z.object({
8  id: z.number(),
9  name: z.string(),
10  email: z.string().email(),
11});
12
13// 2. Create the query function
14const fetchUser = createQuery({
15  schema: UserSchema,
16  fn: (userId: number) =>
17    axios.get(`https://jsonplaceholder.typicode.com/users/${userId}`),
18});
19
20// 3. Use it in a component
21export const UserComponent = ({ userId }: { userId: number }) => {
22  const { data, isLoading, error } = useQuery({
23    queryKey: ['user', userId],
24    queryFn: () => fetchUser(userId),
25  });
26
27  if (isLoading) return <div>Loading...</div>;
28  if (error) return <div>Error: {error.message}</div>;
29
30  return (
31    <div>
32      <h1>{data.name}</h1>
33      <p>{data.email}</p>
34    </div>
35  );
36};