Auf dieser Seite
Stable Query Client
Der QueryClient enthält den QueryCache. Sie sollten daher nur eine einzige Instanz des QueryClient für die Lebensdauer Ihrer Anwendung erstellen – *nicht* eine neue Instanz bei jedem Rendering.
Ausnahme: Es ist erlaubt, einen neuen QueryClient innerhalb einer asynchronen Server-Komponente zu erstellen, da die asynchrone Funktion nur einmal auf dem Server aufgerufen wird.
Regeldetails
Beispiele fĂĽr falschen Code fĂĽr diese Regel
tsx
/* eslint "@tanstack/query/stable-query-client": "error" */
function App() {
const queryClient = new QueryClient()
return (
<QueryClientProvider client={queryClient}>
<Home />
</QueryClientProvider>
)
}
/* eslint "@tanstack/query/stable-query-client": "error" */
function App() {
const queryClient = new QueryClient()
return (
<QueryClientProvider client={queryClient}>
<Home />
</QueryClientProvider>
)
}
Beispiele fĂĽr korrekten Code fĂĽr diese Regel
tsx
function App() {
const [queryClient] = useState(() => new QueryClient())
return (
<QueryClientProvider client={queryClient}>
<Home />
</QueryClientProvider>
)
}
function App() {
const [queryClient] = useState(() => new QueryClient())
return (
<QueryClientProvider client={queryClient}>
<Home />
</QueryClientProvider>
)
}
tsx
const queryClient = new QueryClient()
function App() {
return (
<QueryClientProvider client={queryClient}>
<Home />
</QueryClientProvider>
)
}
const queryClient = new QueryClient()
function App() {
return (
<QueryClientProvider client={queryClient}>
<Home />
</QueryClientProvider>
)
}
tsx
async function App() {
const queryClient = new QueryClient()
await queryClient.prefetchQuery(options)
}
async function App() {
const queryClient = new QueryClient()
await queryClient.prefetchQuery(options)
}
Attribute
- âś… Empfohlen
- 🔧 Behebbar
