i'm new to react querys followed the documentation and i get the problem that i implemented correctly help is appreciated
error:
Error: No QueryClient set, use QueryClientProvider to set one
import { QueryClient, QueryClientProvider, useQuery } from 'react-query'
import axios from 'axios';
const queryClient = new QueryClient()
export default function App() {
const queryInfo =
useQuery('pokemon', () => axios
.get('https://pokeapi.com/api/v2/pokemon')
.then(res => res.data.results))
return (
<QueryClientProvider client={queryClient}>
{queryInfo.data?.map(result => {
return <div key={result.name}>{result.name}</div>
})}
</QueryClientProvider>
)
}
you have created a queryClient, but you are still using useQuery outside of the <QueryClientProvider>. Every call to useQuery must be inside the Provider:
const queryClient = new QueryClient()
export default function App() {
return (
<QueryClientProvider client={queryClient}>
<Something />
</QueryClientProvider>
}
function Something() {
const queryInfo =
useQuery('pokemon', () => axios
.get('https://pokeapi.com/api/v2/pokemon')
.then(res => res.data.results))
return queryInfo.data?.map(result => {
return <div key={result.name}>{result.name}</div>
}) ?? null
}