{"library":"react-query","title":"React Query v3 (Legacy)","description":"react-query is a robust and widely adopted library for managing, caching, and synchronizing asynchronous data within React applications. This registry entry refers to version 3.x.x of the `react-query` package, with 3.39.3 being the latest patch provided. Since late 2021, active development and new major versions (v4, v5) have transitioned to the `@tanstack/react-query` package as part of a broader monorepo rebrand. Consequently, the `react-query` package (v3) is now in a maintenance-only phase, receiving critical bug fixes but no new features. Its key differentiators include declarative data fetching via hooks (`useQuery`, `useMutation`), automatic background refetching, efficient data caching with configurable stale-time and cache-time, optimistic updates, and a powerful devtools extension. It significantly reduces boilerplate for data management compared to traditional state management solutions for remote data.","language":"javascript","status":"renamed","last_verified":"Wed Apr 22","install":{"commands":["npm install react-query"],"cli":null},"imports":["import { useQuery } from 'react-query'","import { useMutation } from 'react-query'","import { QueryClient } from 'react-query'","import { QueryClientProvider } from 'react-query'"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import React from 'react';\nimport { QueryClient, QueryClientProvider, useQuery } from 'react-query';\n\n// Create a client\nconst queryClient = new QueryClient();\n\nfunction Todos() {\n  const { isLoading, error, data } = useQuery('todos', async () => {\n    const response = await fetch('https://jsonplaceholder.typicode.com/todos');\n    if (!response.ok) {\n      throw new Error('Network response was not ok');\n    }\n    return response.json();\n  });\n\n  if (isLoading) return <p>Loading todos...</p>;\n  if (error) return <p>An error occurred: {error.message}</p>;\n\n  return (\n    <div>\n      <h1>Todos</h1>\n      <ul>\n        {data.slice(0, 10).map((todo) => (\n          <li key={todo.id}>{todo.title}</li>\n        ))}\n      </ul>\n    </div>\n  );\n}\n\nexport default function App() {\n  return (\n    <QueryClientProvider client={queryClient}>\n      <Todos />\n    </QueryClientProvider>\n  );\n}","lang":"typescript","description":"This quickstart demonstrates setting up QueryClientProvider and fetching data with useQuery to display a list of todos. It includes basic loading and error states.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}