Basic useQuery Hook with Filter Implementation

Demonstrate how to use the useQuery hook to fetch data with a basic text filter, including how to pass filter parameters to the query function and dynamically refetch data based on filter changes.
import React, { useState, useEffect } from 'react';
import { useQuery } from 'react-query';
import axios from 'axios';
First, import React hooks, react-query's useQuery hook, and axios for making API calls.
const fetchData = async (filter) => {
  const { data } = await axios.get(`${filter}`);
  return data;
Define an asynchronous fetchData function to retrieve data from an API endpoint, applying a filter parameter to the URL.
const FilteredDataComponent = () => {
  const [filter, setFilter] = useState('');
  const { data, isLoading, isError, refetch } = useQuery(['dataKey', filter], () => fetchData(filter), { enabled: false });
In your component, initialize state for the filter. Use useQuery to fetch data with that filter, but disable automatic fetching by setting 'enabled' to false.
  useEffect(() => {
  }, [filter, refetch]);
Use the useEffect hook to refetch data whenever the filter state changes.
  if (isLoading) return <div>Loading...</div>;
  if (isError) return <div>Error fetching data</div>;
Render a loading state and error handling before displaying actual data.
  return (
      <input type="text" value={filter} onChange={(e) => setFilter(} placeholder="Filter data..." />
      <ul>{data && => <li key={}>{}</li>)}</ul>
Render a text input for the filter and list the fetched data. Update the filter state on input change to trigger refetching.
export default FilteredDataComponent;
Finally, export the component for use in your application.