Skip to main content

​
Fetching Data

​
Using useQuery to fetch data

  • Directly use
// 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>;
}
  • Custom hook (Recommended)
Because react-query will cache data, I don’t know when it will be used multiple times, so I like to manage all of them with custom hooks (Single Source of Truth?) 
// 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>;
}

​
Using react-router’s loader to fetch data

https://reactrouter.com/en/main/route/loader
  • Basic usage
// 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>;
}

​
use react-router + react-query to fetch data

I haven’t used it yet, I’ll write it when I use it
https://github.com/remix-run/react-router/tree/main/examples/query

​
Submitting Data

​
Using useMutation to submit data

// 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>;
}

​
Using react-router’s action to submit data

I haven’t used it yet, I’ll write it when I use it
https://reactrouter.com/en/main/route/action