[Day 61] React Query

       I looked at the React-Query materials before starting the internship a week ago as it stated in the company Notion page that we would be using it. Started looking at it again yesterday. Here is what I brought from the website that I sourced below.

"React Query is a library that gives ReactJS the state management ability for any kind of asynchronous data."

"React Query is often described as the missing data-fetching library for React, but in more technical terms, it makes fetching, caching, synchronizing and updating server state in your React applications a breeze." (React)

So in a nutshell, React Query is used for fetching data.

I've been studying using the YouTube video that I linked below. In the video, we are fetching data of Rick and Morty characters.

Instead of fetching data using UseEffect(), use useQuery. I am attaching the code from the video here.

import React, { useEffect, useState } from 'react';

export default function Characters() {
  const [characters, setCharacters] = useState([]);

  const fetchCharacters = async () => {
    const response = await fetch('https://rickandmortyapi.com/api/character');
    const data = await response.json();
    console.log(data);
    setCharacters(data.results);
  };

  useEffect(() => {
    fetchCharacters();
  }, []);

  console.log(characters);

  return (
    <div>
      {characters.map((character) => (
        <div>{character.name}</div>
      ))}
    </div>
  );
}

Notice how it's fetching the data with the URL API.

---

source:
https://medium.com/swlh/getting-started-with-usequery-react-query-9ea181c3dd47
https://www.youtube.com/watch?v=NQULKpW6hK4&t=555s