javascript - Error: No QueryClient set, use QueryClientProvider to set one ,But i did - Stack Overflow

admin管理员组

文章数量:1406942

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('')
          .then(res => res.data.results))
    
      return (
        <QueryClientProvider client={queryClient}>
          {queryInfo.data?.map(result => {
            return <div key={result.name}>{result.name}</div>
          })}
        </QueryClientProvider>
      )
    }

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./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>
      )
    }

• javascript
• reactjs
• axios
• react-query

Share Improve this question Follow asked Aug 2, 2021 at 15:13 Fares_EssayehFares_Essayeh 10533 silver badges1111 bronze badges 1

• None of the search results for the error message helped to solve the problem? – Andreas Commented Aug 2, 2021 at 15:20

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

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./api/v2/pokemon')
      .then(res => res.data.results))

  return queryInfo.data?.map(result => {
    return <div key={result.name}>{result.name}</div>
  }) ?? null
}

本文标签：