How can I use React Query with hooks?

How can I use React Query with hooks?

You can use React Query by installing it and then using the useQuery and useMutation hooks to fetch and manage data.

Can you show me a simple example of using useQuery?

Sure! Here's a basic 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 will fetch data from the API and handle loading and error states.

What about using useMutation for posting data?

For posting data, 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 = async () => {
    const newData = { name: 'New Item' };
    await mutation.mutateAsync(newData);
  };

  return <button onClick={handleSubmit}>Add Data</button>;
};

This will allow you to post new data to the API.