♻️ refactor using React Query

zetaraku · Jul 12, 2024 · 1b8a069 · 1b8a069
1 parent f1a3087
commit 1b8a069
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 12 deletions.
diff --git a/src/modules/user/hooks/useUser.test.tsx b/src/modules/user/hooks/useUser.test.tsx
@@ -1,5 +1,6 @@
 import { vi, describe, it, expect, afterEach } from 'vitest';
 import { renderHook, waitFor, cleanup } from '@testing-library/preact';
+import { TestQueryClientProvider } from '@/modules/test';
 import { useUser } from './useUser';
 
 vi.mock('../api', () => ({
@@ -14,7 +15,13 @@ afterEach(() => {
 
 describe('useUser()', () => {
 	it('should be able to fetch user', async () => {
-		const r = renderHook(() => useUser('dummy'));
+		const r = renderHook(() => useUser('dummy'), {
+			wrapper: ({ children }) => (
+				<TestQueryClientProvider>
+					{children}
+				</TestQueryClientProvider>
+			),
+		});
 
 		await waitFor(() => {
 			expect(r.result.current.user).not.toBe(null);

diff --git a/src/modules/user/hooks/useUser.ts b/src/modules/user/hooks/useUser.ts
@@ -1,11 +1,16 @@
-import { useAsyncData } from '@/modules/util';
+import * as ReactQuery from '@tanstack/react-query';
 import { getUser } from '../api';
-import { User } from '../shared';
 
 export function useUser(username: string) {
-	const { data: user } = useAsyncData<User>(
-		async () => await getUser(username),
-		[username],
+	const userQuery = ReactQuery.useQuery({
+		queryKey: ['user', username],
+		queryFn: async () => await getUser(username),
+	});
+
+	const user = (
+		userQuery.isError ? undefined
+		: userQuery.isLoading ? null
+		: userQuery.data
 	);
 
 	return {

diff --git a/src/modules/user/hooks/useUsers.test.tsx b/src/modules/user/hooks/useUsers.test.tsx
@@ -1,5 +1,6 @@
 import { vi, describe, it, expect, afterEach } from 'vitest';
 import { renderHook, waitFor, cleanup } from '@testing-library/preact';
+import { TestQueryClientProvider } from '@/modules/test';
 import { useUsers } from './useUsers';
 
 vi.mock('../api', () => ({
@@ -16,7 +17,13 @@ afterEach(() => {
 
 describe('useUsers()', () => {
 	it('should be able to fetch users', async () => {
-		const r = renderHook(() => useUsers());
+		const r = renderHook(() => useUsers(), {
+			wrapper: ({ children }) => (
+				<TestQueryClientProvider>
+					{children}
+				</TestQueryClientProvider>
+			),
+		});
 
 		await waitFor(() => {
 			expect(r.result.current.users).not.toBe(null);

diff --git a/src/modules/user/hooks/useUsers.ts b/src/modules/user/hooks/useUsers.ts
@@ -1,11 +1,16 @@
-import { useAsyncData } from '@/modules/util';
+import * as ReactQuery from '@tanstack/react-query';
 import { getUsers } from '../api';
-import { User } from '../shared';
 
 export function useUsers() {
-	const { data: users } = useAsyncData<User[]>(
-		async () => await getUsers(),
-		[],
+	const usersQuery = ReactQuery.useQuery({
+		queryKey: ['users'],
+		queryFn: async () => await getUsers(),
+	});
+
+	const users = (
+		usersQuery.isError ? undefined
+		: usersQuery.isLoading ? null
+		: usersQuery.data
 	);
 
 	return {