https://github.com/lukasjhan/react-query

Checking react query under the hood
https://github.com/lukasjhan/react-query

Last synced: 21 days ago
JSON representation

Checking react query under the hood

• Host: GitHub
• URL: https://github.com/lukasjhan/react-query
• Owner: lukasjhan
• Created: 2024-02-01T15:17:29.000Z (10 months ago)
• Default Branch: master
• Last Pushed: 2024-03-29T17:04:19.000Z (8 months ago)
• Last Synced: 2024-04-12T05:09:12.324Z (7 months ago)
• Language: TypeScript
• Size: 817 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 4
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# 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](https://tanstack.com/query/latest/docs/framework/react/reference/useQuery)

## How to run

### Run the test server

```bash

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

```bash

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?

![demo](./docs/screencast.gif)

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

```tsx

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 
Loading...
;


  return 
Data: {data}
;

}


function App() {

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

  return (

    


       setShowComponent(!showComponent)}>

        Toggle Component

      

      {showComponent && }

    

  );

}


export default App;

```