2 - Add Top Questions

Adding Top Questions with Raffle’s API.

The first feature to implement is fetching and displaying Top Questions, which provide a curated list of commonly asked questions. These questions are designed to guide users by showcasing relevant and frequently searched queries. Integrating this feature helps users discover the full potential of your application’s search capabilities.

Adding Top Questions enhances the user experience by:

  • Highlighting the most commonly asked queries to inspire exploration.
  • Providing a starting point for users who are unsure of what to search.
  • Reducing friction for new users by showcasing pre-defined, relevant questions.

In the next steps, you’ll integrate this feature into your React application and make the retrieved questions actionable.

To fetch the top questions, you’ll use the Raffle API’s /top_questions endpoint. This endpoint requires a uid parameter, which corresponds to the unique identifier associated with your API User Interface, created in the Raffle Web app. Here’s an example endpoint: https://api.raffle.ai/v2/top_questions?uid=$YOUR_RAFFLE_UID. Ensure that you replace the $YOUR_RAFFLE_UID in the URL with the appropriate value from your Raffle Web app configuration.

API Call

Here’s the function to fetch the top questions:

export const fetchTopQuestions = async () => {
  const response = await fetch(
    "https://api.raffle.ai/v2/top_questions?uid=$YOUR_RAFFLE_UID"
  );
  const data = await response.json();
  return data.questions;
};

This function performs a GET request to the /top_questions endpoint and returns a list of questions.

Integration with React

To fetch and display the questions, we will use useQuery from React Query:

import { useQuery } from "@tanstack/react-query";
import { fetchTopQuestions } from "./api";

export const Search = () => {
  const { data: topQuestions = [], isLoading } = useQuery({
    queryKey: ["topQuestions"],
    queryFn: fetchTopQuestions,
  });

  return (
    <div>
      <h2>Top Questions</h2>
      {isLoading ? (
        <p>Loading top questions...</p>
      ) : (
        <ul>
          {topQuestions.map(({ question }) => (
            <li key={question} onClick={() => setQuery(question)}>
              {question}
            </li>
          ))}
        </ul>
      )}
    </div>
  );
};

Explanation

  1. fetchTopQuestions: Fetches a list of static questions from the Raffle API.
  2. React Query: useQuery simplifies data fetching and caching, managing loading and error states automatically.
  3. Rendering Questions: Displays questions in a list. Clicking a question sets it as the query value.
  4. Loading State: Shows a loading message while fetching data.

Total Code

At this stage, your full code should look like this:

import { useState } from "react";
import { useQuery } from "@tanstack/react-query";
import { fetchTopQuestions } from "./api";

export const Search = () => {
  const [query, setQuery] = useState("");

  const { data: topQuestions = [], isLoading } = useQuery({
    queryKey: ["topQuestions"],
    queryFn: fetchTopQuestions,
  });

  const handleSearch = () => {
    if (query.trim()) {
      console.log("Search triggered with query:", query.trim());
    }
  };

  return (
    <div>
      <h1>Search API - React Example</h1>
      <div>
        <input
          type="text"
          value={query}
          onChange={(e) => setQuery(e.target.value)}
          placeholder="Enter your query..."
        />
        <button onClick={handleSearch}>Search</button>
      </div>

      <div>
        <h2>Top Questions</h2>
        {isLoading ? (
          <p>Loading top questions...</p>
        ) : (
          <ul>
            {topQuestions.map(({ question }) => (
              <li key={question} onClick={() => setQuery(question)}>
                {question}
              </li>
            ))}
          </ul>
        )}
      </div>

      <div>
        <h2>Suggestions</h2>
        <p>Suggestions will appear here...</p>
      </div>

      <div>
        <h2>Summary</h2>
        <p>Summary will appear here...</p>
      </div>

      <div>
        <h2>Search Results</h2>
        <p>Search results will appear here...</p>
      </div>
    </div>
  );
};

Next Page

3 - Add Autocomplete