Studying React Query under the hood

This is a simple project to study the React Query library under the hood.

check the official documentation here

How to run

Run the test server

cd server

pnpm install
pnpm run start

The server will be running on http://localhost:3000.

GET http://localhost:3000 will return a a number that increases(+1) by every requests.

Run the front-end

npm install
npm run start

The front-end will be running on http://localhost:3001. or other port if 3001 is already in use.

You can check the logic by using Toggle button.

How to test?

check the src/App.tsx file and modify the useQuery hook to see the behavior of the React Query.

import React from 'react';
import { QueryClient, useQuery } from '@tanstack/react-query';

const queryClient = new QueryClient();

function fetchData() {
  return fetch('http://localhost:3000').then((res) => res.text());
}

function TestComponent() {
  const { data, isFetching } = useQuery(
    {
      queryKey: ['number'],
      queryFn: fetchData,
      //refetchInterval: 1000,
      staleTime: 5000, // 5 seconds stale time
      gcTime: 10000, // 30 seconds cache time
    },
    queryClient
  );

  if (isFetching) return <div>Loading...</div>;

  return <div>Data: {data}</div>;
}

function App() {
  const [showComponent, setShowComponent] = React.useState(true);

  return (
    <div>
      <button onClick={() => setShowComponent(!showComponent)}>
        Toggle Component
      </button>
      {showComponent && <TestComponent />}
    </div>
  );
}

export default App;