How can I use React Query for making API calls?

How can I use React Query for making API calls?

You can use React Query to simplify data fetching in your React applications. It provides hooks like useQuery and useMutation.

Can you show me a basic example of using useQuery?

Sure! Here's a simple example:

import { useQuery } from 'react-query';

const fetchData = async () => {
  const response = await fetch('https://api.example.com/data');
  return response.json();
};

const MyComponent = () => {
  const { data, error, isLoading } = useQuery('dataKey', fetchData);

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

  return <div>Data: {JSON.stringify(data)}</div>;
};

This fetches data from an API and handles loading and error states.

What about using useMutation for POST requests?

For POST requests, you can use useMutation like this:

import { useMutation } from 'react-query';

const postData = async (newData) => {
  const response = await fetch('https://api.example.com/data', {
    method: 'POST',
    headers: {'Content-Type': 'application/json'},
    body: JSON.stringify(newData),
  });
  return response.json();
};

const MyComponent = () => {
  const mutation = useMutation(postData);

  const handleSubmit = (data) => {
    mutation.mutate(data);
  };

  return <button onClick={() => handleSubmit({ key: 'value' })}>Submit</button>;
};

This allows you to send data to the API.