Remix中如何向异步服务端Loader函数传递复杂参数？

Remix的Loader主要对应GET请求，传递复杂参数（比如对象）可以通过以下两种方式实现：

方案一：将对象序列化为查询参数（GET请求） #

如果参数不敏感且结构不算特别复杂，可以把对象转成查询字符串，通过URL传递给Loader。

前端调用（修改你的FetchGetProductById逻辑） #

把复杂对象转成JSON字符串，或者拆成多个独立的query参数：

export function FetchGetProductWithFilters(filters: { category: string; minPrice: number; inStock: boolean }) {
  const fetcher = useFetcher();

  useEffect(() => {
    // 方式1：将对象转为JSON字符串作为单个query参数
    const queryParams = new URLSearchParams();
    queryParams.set("filters", JSON.stringify(filters));
    fetcher.load(`/query/products?${queryParams.toString()}`);

    // 方式2：拆成多个独立的query参数（适合结构简单的对象）
    // const queryParams = new URLSearchParams({
    //   category: filters.category,
    //   minPrice: filters.minPrice.toString(),
    //   inStock: filters.inStock.toString()
    // });
    // fetcher.load(`/query/products?${queryParams.toString()}`);
  }, [filters]);

  return fetcher.data;
}

后端Loader接收参数 #

在Loader里解析查询参数，还原成对象：

export const loader: LoaderFunction = async ({ request }) => {
  const url = new URL(request.url);
  // 对应方式1：解析JSON字符串
  const filtersStr = url.searchParams.get("filters");
  const filters = filtersStr ? JSON.parse(filtersStr) : {};

  // 对应方式2：逐个获取query参数并转换类型
  // const filters = {
  //   category: url.searchParams.get("category") || "",
  //   minPrice: Number(url.searchParams.get("minPrice")) || 0,
  //   inStock: url.searchParams.get("inStock") === "true"
  // };

  // 调用Shopify接口，传入解析后的参数
  const products = await GetProductsByFilters(filters);
  return json(products);
};

async function GetProductsByFilters(filters: { category: string; minPrice: number; inStock: boolean }) {
  const ops = { /* 你的Shopify请求配置 */ };
  const endpoint = `https://your-shopify-store.myshopify.com/admin/api/2024-07/products.json?${new URLSearchParams({
    product_type: filters.category,
    min_price: filters.minPrice.toString(),
    inventory_quantity_min: filters.inStock ? "1" : "0"
  })}`;
  const response = await fetch(endpoint, ops);
  return response.json();
}

方案二：用Action函数处理POST请求（适合复杂/敏感参数） #

如果参数结构非常复杂，或者包含敏感信息，建议用Remix的Action函数（对应POST请求），避免参数暴露在URL中。

前端调用 #

用fetcher.submit发送POST请求，直接传递复杂对象：

export function FetchProductsWithComplexParams(params: { productIds: string[]; sortBy: string; pagination: { page: number; limit: number } }) {
  const fetcher = useFetcher();

  useEffect(() => {
    fetcher.submit(params, {
      method: "post",
      action: "/query/products"
    });
  }, [params]);

  return fetcher.data;
}

后端Action接收参数 #

在Action里解析请求体的JSON数据：

export const action: ActionFunction = async ({ request }) => {
  // 解析POST请求体的参数
  const params = await request.json();
  
  // 调用业务逻辑（Shopify查询/Redis读写）
  const products = await GetProductsByComplexParams(params);
  return json(products);
};

async function GetProductsByComplexParams(params: { productIds: string[]; sortBy: string; pagination: { page: number; limit: number } }) {
  const ops = { /* 请求配置 */ };
  const endpoint = `https://your-shopify-store.myshopify.com/admin/api/2024-07/products.json?ids=${params.productIds.join(",")}&limit=${params.pagination.limit}&page=${params.pagination.page}`;
  const response = await fetch(endpoint, ops);
  return response.json();
}

注意事项 #

• 用查询参数传递时，JSON.stringify和JSON.parse会自动处理大部分编码问题，但要注意参数长度限制（不同浏览器/服务器对URL长度有上限）。
• Action函数默认对应POST请求，适合处理有状态变更的操作（比如Redis写入），Loader更偏向只读查询，但复杂参数用Action也完全可行。
• 服务端要做好参数校验（比如用Zod），避免非法参数导致的业务错误。

内容的提问来源于stack exchange，提问作者Macheneso R.