feat: TanStack Query (#22)

* feat: TanStack Query

* feat: TanStack Query

Author: b-Rogers

package-lock.json

@@ -4,14 +4,15 @@
   "private": true,
   "type": "module",
   "dependencies": {
+    "@tanstack/react-query": "^5.62.15",
+    "@tanstack/react-router": "^1.95.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   },
   "devDependencies": {
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
     "@semantic-release/npm": "^12.0.1",
-    "@tanstack/react-router": "^1.95.0",
     "@tanstack/router-devtools": "^1.95.0",
     "@tanstack/router-plugin": "^1.95.0",
     "@testing-library/jest-dom": "^6.6.3",
@@ -23,8 +24,8 @@
     "autoprefixer": "^10.4.20",
     "esbuild": "0.24.0",
     "eslint": "^9.17.0",
-    "eslint-plugin-prettier": "^5.2.1",
     "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-prettier": "^5.2.1",
     "eslint-plugin-react-hooks": "^5.1.0",
     "eslint-plugin-react-refresh": "^0.4.16",
     "globals": "^15.14.0",

package.json

@@ -2,7 +2,7 @@
   text-align: center;
 
   .app-header {
-    min-height: 100vh;
+    min-height: 80vh;
     display: flex;
     flex-direction: column;
     align-items: center;

src/components/App/App.css

@@ -1,6 +1,14 @@
 import { render, screen } from '@testing-library/react';
 import App from '.';
 
+vi.mock('@tanstack/react-query', () => ({
+  useQuery: vi.fn().mockReturnValue({
+    data: {},
+    isPending: true,
+    error: {},
+  }),
+}));
+
 test('renders Header', () => {
   render(<App />);
   const headerElement = screen.getByText(/Hello World/i);

src/components/App/App.test.tsx

@@ -1,11 +1,14 @@
+import { QueryExample } from '../QueryExample';
+
 import './App.css';
 
 export default function App() {
   return (
-    <div className="app">
+    <main className="app">
       <header className="app-header">
         <h1>Hello World</h1>
       </header>
-    </div>
+      <QueryExample />
+    </main>
   );
 }

src/components/App/index.tsx

@@ -0,0 +1,75 @@
+import { render, screen } from '@testing-library/react';
+import { useQuery } from '@tanstack/react-query';
+import { QueryExample } from '.';
+
+vi.mock('@tanstack/react-query');
+
+describe('QueryExample', () => {
+  test('renders data when data is provided', () => {
+    vi.mocked(useQuery, { partial: true }).mockReturnValue({
+      data: { name: 'Query Example' },
+      isPending: false,
+      error: null,
+    });
+
+    render(<QueryExample />);
+    const headerElement = screen.getByText(/Query Example/i);
+
+    expect(headerElement).toBeInTheDocument();
+  });
+
+  test('renders error message when error is provided', () => {
+    vi.mocked(useQuery, { partial: true }).mockReturnValue({
+      data: {},
+      isPending: false,
+      error: { message: 'oops' },
+    });
+
+    render(<QueryExample />);
+    const errorElement = screen.getByText(/An error has occurred: oops/i);
+
+    expect(errorElement).toBeInTheDocument();
+  });
+
+  test('renders loading when isPending is provided', () => {
+    // @ts-ignore - isPending type is false and not boolean...
+    vi.mocked(useQuery, { partial: true }).mockReturnValue({
+      data: {},
+      isPending: true,
+      error: null,
+    });
+
+    render(<QueryExample />);
+    const loadingElement = screen.getByText(/Loading.../i);
+
+    expect(loadingElement).toBeInTheDocument();
+  });
+
+  test('renders error as 1st priority', () => {
+    // @ts-ignore - isPending type is false and not boolean...
+    vi.mocked(useQuery, { partial: true }).mockReturnValue({
+      data: { name: 'Query Example' },
+      isPending: true,
+      error: { message: 'oops' },
+    });
+
+    render(<QueryExample />);
+    const loadingElement = screen.getByText(/An error has occurred: oops/i);
+
+    expect(loadingElement).toBeInTheDocument();
+  });
+
+  test('renders loading as 2nd priority', () => {
+    // @ts-ignore - isPending type is false and not boolean...
+    vi.mocked(useQuery, { partial: true }).mockReturnValue({
+      data: { name: 'Query Example' },
+      isPending: true,
+      error: null,
+    });
+
+    render(<QueryExample />);
+    const loadingElement = screen.getByText(/Loading.../i);
+
+    expect(loadingElement).toBeInTheDocument();
+  });
+});

src/components/QueryExample/QueryExample.test.tsx

@@ -0,0 +1,23 @@
+import { useQuery } from '@tanstack/react-query';
+import { queryFetch } from '../../utils/queryFetch';
+
+export function QueryExample() {
+  const { isPending, error, data } = useQuery({
+    queryKey: ['queryExample'],
+    queryFn: queryFetch('https://api.github.com/repos/TanStack/query'),
+  });
+
+  if (error) return <p>An error has occurred: {error.message}</p>;
+
+  if (isPending) return <p>Loading...</p>;
+
+  return (
+    <div className="query-example">
+      <h1>{data.name}</h1>
+      <p>{data.description}</p>
+      <strong>👀 {data.subscribers_count}</strong>{' '}
+      <strong>✨ {data.stargazers_count}</strong>{' '}
+      <strong>🍴 {data.forks_count}</strong>
+    </div>
+  );
+}

src/components/QueryExample/index.tsx

@@ -1,12 +1,17 @@
 import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import App from './components/App';
 
 const rootElement = document.getElementById('root');
+const queryClient = new QueryClient();
+
 if (rootElement) {
   createRoot(rootElement).render(
     <StrictMode>
-      <App />
+      <QueryClientProvider client={queryClient}>
+        <App />
+      </QueryClientProvider>
     </StrictMode>
   );
 }

src/index.tsx

@@ -0,0 +1,20 @@
+import { queryFetch } from '../queryFetch';
+
+const fetchMock = vi.fn(() =>
+  Promise.resolve({ json: () => Promise.resolve({ data: 'stick' }) })
+);
+
+vi.stubGlobal('fetch', fetchMock);
+
+describe('queryFetch', () => {
+  test('calls fetch', () => {
+    vi.spyOn(globalThis, 'fetch');
+    queryFetch('test')();
+    expect(fetch).toBeCalled();
+  });
+
+  test('returns data', async () => {
+    const fetchRequest = await queryFetch('test')();
+    expect(fetchRequest).toEqual({ data: 'stick' });
+  });
+});

src/utils/__tests/queryFetch.test.ts

@@ -0,0 +1,2 @@
+export const queryFetch = (url: string) => () =>
+  fetch(url).then((res) => res?.json());