Create a search bar function to filter Graphql data

I have been working on a project using Nextjs that fetches data from Graphql api I have defined categories and posts models that work well when filtering by Category. I want to implement an input search bar function but i do not know how to associate it with the Graphql api I have searched on how to do it using Apollo client but it seems there is not much info on this specific subject. Here is my search component so far

export function Search(){

    const { loading, error, data } = useQuery(CATEGORIES_QUERY);

    if (loading) return <p>Loading...</p>;
    if (error) return <p>Error: {error.message}</p>;
  
    const categories = data.categories;
  
    const [searchText, setSearchText] = useState('');
  
    const handleSearch = (e) => {
      e.preventDefault();
      onSearch(searchText); // Notify the parent component about the search
    };


    return (
        <div className="flex items-center"> 
        <form className='flex space-x-1'>
         <input 
                     type="text"
                     className="block w-full px-4 py-2 text-purple-700 bg-white border rounded-full focus:border-purple-400 focus:ring-purple-300 focus:outline-none focus:ring focus:ring-opacity-40"
                     placeholder="Search..."  
                    onChange={(e) => setSearchText(e.target.value)}
                     />
         <button 
         className="px-4 text-white bg-purple-600 rounded-full"
         onClick={handleSearch}
         >
                     <svg
                         xmlns="https://www.w3.org/2000/svg"
                         className="w-5 h-5"
                         fill="none"
                         viewBox="0 0 24 24"
                         stroke="currentColor"
                         strokeWidth={2}
                     >
                         <path
                             strokeLinecap="round"
                             strokeLinejoin="round"
                             d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
                         />
                     </svg>
                 </button>
 
        </form>
        </div>
    )
}

I do not know if i am in the right track, I am a little lost here. Any ideas on how to do it or any other technologies that I should use?