Qwik routeAction代码问题：用户账号创建逻辑与数据获取

原始问题及代码 #

基于Appwrite实现了Qwik的routeAction用户账号创建功能，代码如下：

export const useCreateUserAccount = routeAction$(async (user, { fail }) => {        
  try {            
    const result = await account.create(ID.unique(), user.email.toString(), user.password.toString(), user.name.toString())            
    console.log('user account created successfully: ', result)            
    return {                
      status: true,                
      error_message: '',                
      error_code: '',                
      data: result,                
      message: 'user account created successfully'            
    };        
  } catch (error) {            
    console.log('Exception caught: ', error)            
    return fail(500, {                
      status: false,                
      error_message: 'User could not be added',                
      error_code: '',                
      data: error,                
      message: ''            
    });        
  }        
  // return {        
  //     status: true,        
  //     error_message: '',        
  //     error_code: '',        
  //     data: result,        
  //     message: 'user account created successfully'        
  // };    
},    
zod$({        
  name: z.string().min(1),        
  email: z.string().email(),        
  password: z.string().min(8),    
}));

功能可正常运行，但存在两个问题：

• 注释掉try块内的return语句，启用函数末尾的return语句时，会出现can't find name result错误；
• 无法在组件中获取返回数据，尝试用{ !action.value?.status && <p>{action.value?.data}</p> }展示异常数据无效。

优化后的解决代码 #

经过调试，优化代码解决了TypeScript语法问题，代码如下：

import { component$, useStore } from '@builder.io/qwik';
import type { DocumentHead } from '@builder.io/qwik-city';
import { Link, routeAction$, zod$, z, Form } from '@builder.io/qwik-city';
import { account } from '~/appwrite.config';
import { ID } from 'appwrite'

export const useCreateUserAccount = routeAction$(    
  async (user, { fail }) => {
    type SuccessResponse = {            
      status: boolean,            
      data: {                
        id: string,                
        name: string,                
        email: string,                
        phone: string,                
        emailVerification: boolean,                
        phoneVerification: boolean,            
      },            
      message: string        
    }
    type ErrorResponse = {            
      status: boolean,            
      error: {                
        message: string,                
        code: number,                
        type: string,                
        version: string            
      },            
      message: string        
    }
    let result
    try {            
      result = await account.create(                
        ID.unique(),                
        user.email.toString(),                
        user.password.toString(),                
        user.name.toString()            
      )            
      console.log('user account created successfully: ', result)
    } catch (error: any) {            
      console.log('Exception caught: ', error)
      const errorResponse: ErrorResponse = {                
        status: false,                
        error: {                    
          message: error.response.message,                    
          code: error.response.code,                    
          type: error.response.type,                    
          version: error.response.version,                
        },                
        message: 'Exception caught when creating user account'            
      }            
      return fail(500, errorResponse);        
    }
    const response: SuccessResponse = {            
      status: true,            
      data: {                
        id: result['$id'],                
        name: result['name'],                
        email: result['email'],                
        phone: result['phone'],                
        emailVerification: result['emailVerification'],                
        phoneVerification: result['phoneVerification'],            
      },            
      message: 'user account created successfully'        
    };
    return response    
},    
zod$({        
  name: z.string().min(1),        
  email: z.string().email(),        
  password: z.string().min(8),    
}));

问题解决说明 #

1. 解决can't find name result错误：
   原代码中result用const声明在try块内部，作用域仅局限于try块，函数末尾的return无法访问。优化后将result提升到try/catch外部用let声明，确保整个函数范围内都能访问到该变量。

2. 解决组件无法获取返回数据的问题：

   • 定义了明确的SuccessResponse和ErrorResponse类型，规范返回数据的结构，避免类型模糊；
   • 错误处理时直接提取Appwrite返回的错误详情（error.response中的字段），返回的错误结构更清晰，组件可通过action.value?.error.message等路径准确获取异常信息；
   • 成功响应明确映射了返回数据的字段，替代了原始代码中直接返回Appwrite原始对象的方式，让组件能更稳定地读取返回数据。

内容的提问来源于stack exchange，提问作者Suresh