DEV Community

loading...

Easier way to fetch data with React using ReactQuery

artydev profile image artydev Updated on ・1 min read

This time i will not say that fetching data in React is overcomplicated.

I read this article How and Why You Should Use React Query,
and I must say he conviced me :-)

You can test it here ReactQuery


function App({peopleid}) {
  const { isLoading, error, data } = 
    useQuery('fetchLuke', () =>
      axios(`https://swapi.dev/api/people/${peopleid}/`))  
  return (
    <div className = "App">
      <h1> React Query example with star wars API </h1>
      { error && <div>Something went wrong ...</div> }
      { isLoading 
          ? <div> Retrieving Luke Skywalker Information ... </div>
          : <pre> {JSON.stringify(data, null, 4)} </pre>
      }
    </div>
  );
}

ReactDOM.render(<App peopleid = "1" />, document.getElementById("app"))  

Enter fullscreen mode Exit fullscreen mode

Discussion (0)

pic
Editor guide