What is the best practice for using initial data from another query before the query was settled

export const useTodoItemQuery = ({
  id,
  projectId,
  enabled = true,
}: Props) => {
  const [isTodoItemQueryEnabled, setIsTodoItemQueryEnabled] = useState(false)

  const queryClient = useQueryClient()
  // Fetch all todos
  const { data: todoListData, isSuccess: isSuccessTodoList } = useTodoListQuery({
    projectId,
    enabled: enabled,
  })

  // Initialize Query cache with data from all todos to prevent fetching for each todo item.
  useEffect(() => {
    if (isSuccessTodoList && !queryClient.getQueryData(queryKeys.todoList())) {
      const todoItem = todoListData?.find((todoItem) => todoItem.id === id)

      // We don't want to initialize the cache with undefined data.
      if (todoItem) {
        queryClient.setQueryData(queryKeys.todoItem({ id: id }), todoItem)
      }

      setIsTodoItemQueryEnabled(true)
    }
  }, [isSuccessTodoList, projectId, queryClient, id, todoListData])

  return useQuery({
    queryKey: queryKeys.todoItem({ id: id }),
    queryFn: () => fetchTodoItem({ id: id }),
    enabled: isTodoItemQueryEnabled,
  })
}