TanStack Query

Ref - https://tanstack.com/query/v5/docs/framework/react/overview

• Initialise a react project

  npm create vite@latest 
  

• Install TanStack Query

npm i @tanstack/react-query

• Create a fetch function that gets some data

async function getter() {
  const data = await fetch("<https://jsonplaceholder.typicode.com/posts/>");
  const response = await data.json();
  return response;
}

• Initialise a new queryClient

const queryClient = new QueryClient()

• Wrap your app inside a QueryClientProvider

function App() {
  return (
    // Provide the client to your App
    <QueryClientProvider client={queryClient}>
      <Todos />
    </QueryClientProvider>
  )
}

• Define the Todo component

function Todos() {
  // Access the client
  const queryClient = useQueryClient()

  // Queries
  const query = useQuery({ queryKey: ['todos'], queryFn: getTodos })

  return (
    <div>
      <ul>{query.data?.map((todo) => <li key={todo.id}>{todo.title}</li>)}</ul>
    </div>
  )
}

Why TanStack?

1. Caching
2. Automatic refreshes
3. Invalidating old states

Try adding a refreshInterval to the query

const query = useQuery({ queryKey: ['todos'], queryFn: getter , refetchInterval: 10 * 1000 })