jsJ
tRPC•2y ago•
1 reply
js

Properly handle unifying interfaces from tRPC call?

I have two types of objects in my database, quests and tasks, which share several common properties, however they are named slightly differently (e.g. quests.startingAssessmentContent and tasks.startingContent), as well as a component which reads the contents of either one of these objects interchangeably.

I want to unify my interfaces for the tRPC procedure outputs for these two objects, so I made a custom hook:

export function useFetchEditorData({ taskId, questId }) {
  if (taskId) {
    const {
      data: task,
      isLoading,
      isError,
    } = api.tasks.getWithUserDetailsByTaskId.useQuery({ taskId });
    return { data: task, isLoading, isError, type: "task" };
  } else if (questId) {
    const {
      data: quest,
      isLoading,
      isError,
    } = api.quests.getWithUserDetailsByQuestId.useQuery({ questId });
    //

    return {
      data: normalizeEditorDataReturn(quest),
      isLoading,
      isError,
      type: "quest",
    };
  }

  // Return a default object if neither taskId nor questId is provided
  return { data: null, isLoading: false, isError: false, type: null };
}


What is the correct way to handle calling a function like normalizeEditorDataReturn? Right now I get an error that quest is undefined, assuming because the data hasn't loaded yet. Not sure what is the best approach to this? Thanks for the help!
Was this page helpful?