React Query Crash Post
Tags: react, javascript, webdev, programming
Published: 2024-07-04 09:28:47


React Query is a library that provides a way to fetch, cache and update data in your React applications. It is a great library that can help you manage your data fetching in a more efficient way. In this post, we will take a look at how to use React Query to fetch data from an API and display it in a React component.

## Installation

To get started with React Query, you need to install it in your project. You can do this by running the following command:

```bash
npm install react-query
```

or

```bash
yarn add react-query
```

After installing React Query, you should provide the `QueryClientProvider` at the root of your application. This will allow you to use the `useQuery` hook in your components. Here is an example of how you can set up the `QueryClientProvider` in your application:

```jsx
import { QueryClient, QueryClientProvider } from "react-query";

const queryClient = new QueryClient();

const App = () => (
  <QueryClientProvider client={queryClient}>
    <div>{/* Your application components */}</div>
  </QueryClientProvider>
);

export default App;
```

## GET Data

Once you have installed React Query, you can start fetching data from an API. To do this, you need to create a query using the `useQuery` hook. Here is an example of how you can fetch data from an API using React Query:

```jsx
import { useQuery } from "react-query";

const fetchPosts = async () => {
  const response = await fetch("https://jsonplaceholder.typicode.com/posts");
  const data = await response.json();
  return data;
};

const Posts = () => {
  const { data, isLoading, error } = useQuery("posts", fetchPosts);

  if (isLoading) {
    return <div>Loading...</div>;
  }

  if (error) {
    return <div>Error: {error.message}</div>;
  }

  return (
    <div>
      {data.map((post) => (
        <div key={post.id}>{post.title}</div>
      ))}
    </div>
  );
};

export default Posts;
```

## POST Data

React Query also provides a way to update data in your application. You can use the `useMutation` hook to send a POST request to an API. Here is an example of how you can update data using React Query:

```jsx
import { useMutation } from "react-query";

const createPost = async (newPost) => {
  const response = await fetch("https://jsonplaceholder.typicode.com/posts", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify(newPost),
  });
  const data = await response.json();
  return data;
};

const NewPost = () => {
  const { mutate, isLoading, error } = useMutation(createPost);

  const handleSubmit = (event) => {
    event.preventDefault();
    const newPost = {
      title: event.target.title.value,
      body: event.target.body.value,
    };
    mutate(newPost);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" name="title" placeholder="Title" />
      <textarea name="body" placeholder="Body" />
      <button type="submit" disabled={isLoading}>
        {isLoading ? "Loading..." : "Submit"}
      </button>
      {error && <div>Error: {error.message}</div>}
    </form>
  );
};

export default NewPost;
```

## React Query vs useEffect

React Query is a great library that can help you manage your data fetching in a more efficient way. It provides a way to fetch, cache and update data in your React applications. With React Query, you can easily fetch data from an API and display it in your components. It also provides a way to update data in your application using the `useMutation` hook. If you are using `useEffect` to fetch data in your React application, you should consider using React Query instead. It can help you manage your data fetching in a more efficient way and provide a better user experience.

## Same Example with useEffect

Here is an example of how you can fetch data from an API using `useEffect`:

```jsx
import { useEffect, useState } from "react";

const Posts = () => {
  const [posts, setPosts] = useState([]);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchPosts = async () => {
      try {
        const response = await fetch(
          "https://jsonplaceholder.typicode.com/posts"
        );
        const data = await response.json();
        setPosts(data);
        setIsLoading(false);
      } catch (error) {
        setError(error);
        setIsLoading(false);
      }
    };

    fetchPosts();
  }, []);

  if (isLoading) {
    return <div>Loading...</div>;
  }

  if (error) {
    return <div>Error: {error.message}</div>;
  }

  return (
    <div>
      {posts.map((post) => (
        <div key={post.id}>{post.title}</div>
      ))}
    </div>
  );
};

export default Posts;
```

## Summary

- `useQuery` hook is used to fetch data from an API.
- `useMutation` hook is used to update data in your application.
- `enable` option in `useQuery` hook is used to control when the query should be fetched.

## Thank You

Thank you for reading this post. I hope you found it helpful. If you have any questions or feedback, please feel free to leave a comment below.

## Follow me

- [GitHub](https://github.com/burakboduroglu)
- [YouTube](https://www.youtube.com/@burakboduroglu)
- [Reddit](https://www.reddit.com/user/bodurogluburak/)