Function useQuest

Returns UseQuestReturn

The returning object contains:

• quest: The current quest object. It is null if the quest has not been fetched or does not exist.
• fetched: Boolean indicating whether the quest has been successfully fetched. Initially false if id is provided to the hook.
• refresh: FetchQuestMethod - Function to refetch the quest. Accepts an optional quiet parameter (default false) and forces a refresh of the quest data.
• push: PushQuestMethod - Function to create or update the quest. Accepts an updated quest object and returns the saved quest.
• delete: DeleteQuestMethod - Function to delete the current quest. Throws an error if no quest is available to delete.
• complete: CompleteQuestMethod Function to mark the quest as complete. Accepts creator-related data required to complete the quest and returns the updated quest.

Implementation Details

• Caching: API responses are cached for 120 seconds (120,000 ms). Clears cache entries for specific API calls after operations like create, update, or delete.
• Effect Trigger: A useEffect hook triggers the fetchQuest method whenever the id parameter changes, ensuring the quest data stays up-to-date.
• Error Handling: Errors encountered during API calls are logged to the console and re-thrown with additional context for debugging purposes.
• Fetch Options: The fetchQuest method:
  • Accepts a quiet flag to suppress unnecessary state updates during the fetch process.
  • Includes a refresh flag to force a refresh by clearing the existing cache.

import { useQuest } from 'react-playmakers';

const QuestComponent = () => {
  const { quest, fetched, refresh, push, delete: deleteQuest, complete } = useQuest('qXXXXXXXX');

  useEffect(() => {
    if (fetched) {
      console.log('Quest fetched:', quest);
    }
  }, [fetched, quest]);

  const handleComplete = async () => {
    try {
      const updatedQuest = await complete({ creatorId:
'XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX', completedAt: new Date() });
      console.log('Quest marked as complete:', updatedQuest);
    } catch (error) {
      console.error('Failed to complete the quest:', error);
    }
  };

  return (
    <div>
      <h1>{quest?.title || 'Loading...'}</h1>
      <button onClick={() => refresh()}>Refresh Quest</button>
      <button onClick={handleComplete}>Complete Quest</button>
      <button onClick={async () => {
        try {
          await deleteQuest();
          console.log('Quest deleted successfully.');
        } catch (error) {
          console.error('Error deleting quest:', error);
        }
      }}>Delete Quest</button>
    </div>
  );
};
Copy