Apollo Client执行GQL REST查询时忽略参数问题排查

你在使用Apollo Client结合RestLink查询REST接口时，出现路径参数未正确替换的问题：调试确认projectId变量已正确传递，但请求仍发送至api/ProjectCosts/而非预期的api/ProjectCosts/1234，同时浏览器抛出RestLink参数解析警告，最终导致HTTP 404错误。

问题核心：用法错误而非框架bug #

你遇到的问题是RestLink路径参数的语法使用错误，并非Apollo Client的bug。

错误原因 #

在@rest指令的path字段中，你使用了{args.projectId}来引用查询变量，但Apollo Link Rest的查询级变量占位符语法应为{variables.xxx}，而非{args.xxx}。args仅用于字段自身定义的参数（非查询级全局变量），因此当前写法无法正确解析传递的projectId变量，导致路径参数被空值替换，最终请求发送至api/ProjectCosts/。

修正方案 #

将查询中的path字段修改为使用{variables.projectId}：

export const getProjectCosts = gql`
    query GetProjectCosts($projectId: Int) {
        ProjectCostList @rest(type: "ProjectCostList", path: "ProjectCosts/{variables.projectId}") {
            id
            projectId
            cost
            description
            costType
            budgetYear
            createdByUser
            createdDate
        }
    }
`;

修改后，RestLink会正确提取查询变量中的projectId并替换到路径中，请求将发送至api/ProjectCosts/1234，解决404问题。

针对旧版本的临时Workaround（若遇到版本兼容bug） #

如果你使用的Apollo Link Rest版本存在变量解析相关bug，可通过自定义pathBuilder强制处理路径参数：

import { RestLink } from 'apollo-link-rest';

const restLink = new RestLink({
  uri: '/api/',
  // 自定义路径构建逻辑
  pathBuilder: (operation, path) => {
    const { projectId } = operation.variables;
    // 匹配目标路径模板并替换参数
    if (path.includes('ProjectCosts/{variables.projectId}') && projectId) {
      return `ProjectCosts/${projectId}`;
    }
    // 通用变量替换逻辑，适配其他路径
    return path.replace(/{variables\.(\w+)}/g, (_, key) => operation.variables[key] || '');
  },
});

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