如何在Qwik中向Prisma Loader传递数据以添加数据库记录？

一、先纠正核心误区：数据写入不该用routeLoader$ #

routeLoader$的设计定位是路由加载时读取数据，属于只读操作，不支持接收自定义提交数据。处理数据库写入（比如新增/修改记录）这类操作，应该用Qwik专门提供的routeAction$，它专门用来处理表单提交、数据修改等有状态变更的场景，并且天然支持接收参数。

正确实现代码示例： #

1. 在组件外部定义routeAction$：

export const useAddProduct = routeAction$(async (data) => {
  // data就是你传入的自定义参数对象
  try {
    const newProduct = await prisma.products.create({
      data: {
        name: data.name,
        description: data.description
      }
    });
    return { success: true, product: newProduct };
  } catch (error) {
    return { success: false, error: '创建产品失败' };
  }
});

2. 在组件内调用并传入参数：

const addProductAction = useAddProduct();

const handleSubmit = $(() => {
  // 直接通过submit方法传入你需要的data对象
  addProductAction.submit({
    name: 'Steel Table',
    description: 'A steel table added to DB'
  });

  // 可监听action的执行状态
  addProductAction.value.subscribe((result) => {
    if (result?.success) {
      console.log('产品创建成功:', result.product);
    } else {
      console.error('创建失败:', result?.error);
    }
  });
});

二、routeLoader$的可用上下文参数 #

除了你提到的url、method、params，routeLoader$的上下文对象还包含以下常用属性：

• request: 原始的浏览器Request对象，可用于获取请求头、Cookie等信息
• env: 项目配置的环境变量，比如在qwik.config.ts中定义的环境变量
• platform: 部署平台相关的API对象，比如在Vercel/Netlify等平台上运行时的专属方法
• locale: 当前应用的语言环境（如果配置了Qwik的国际化支持）
• cache: 缓存控制工具，可设置Loader的缓存策略，比如cache({ staleWhileRevalidate: 60 })

示例：用url.searchParams获取查询参数 #

如果需要在Loader中通过URL查询字符串接收参数，可以这样写：

export const useProductByName = routeLoader$(async ({ url }) => {
  const productName = url.searchParams.get('name');
  if (!productName) return null;
  
  return await prisma.products.findFirst({
    where: { name: productName }
  });
});

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