TypeScript中向GraphQL查询传动态变量时遇参数错误

咱们先拆解下你遇到的问题：这个错误大概率和TypeScript类型校验以及graphql高阶组件（HOC）的参数配置有关，结合你给出的代码，我整理了几个针对性的修复方向：

1. 先规范GraphQL查询的结构（可选但能避免潜在问题） #

你的查询里同时包含了allFile和faqsJson两个顶级字段，语法上没问题，但可以给查询起个明确的名字，同时让变量$slug的作用域更清晰：

export const queryFragment = graphql`
  query FqlQuery1($slug: String!) {
    allFile {
      edges {
        node {
          childFaqsJson {
            title
            questions {
              title
              content
            }
          }
        }
      }
    }
    faqsResult: faqsJson(fields: { slug: { eq: $slug } }) {
      title
      questions {
        title
        content
      }
    }
  }
`;

2. 给graphql HOC配置符合TypeScript要求的参数 #

在TypeScript环境下，graphql HOC（比如Gatsby中的实现）对类型校验很严格，你需要明确定义组件props和查询结果的类型，同时正确配置变量的获取逻辑：

步骤1：定义类型结构 #

// 定义查询返回的数据结构
interface FqlQueryData {
  allFile: {
    edges: Array<{
      node: {
        childFaqsJson?: {
          title: string;
          questions: Array<{ title: string; content: string }>;
        };
      };
    }>;
  };
  faqsResult: {
    title: string;
    questions: Array<{ title: string; content: string }>;
  };
}

// 定义组件接收的props，包含查询数据和需要传入的slug
interface ComponentProps {
  data: FqlQueryData;
  slug: string;
}

步骤2：正确配置graphql HOC的参数 #

错误提示说"expected two arguments but got one"，本质是TypeScript没识别到第二个参数的合法类型，你需要明确指定类型参数，并在配置里告诉HOC如何获取$slug变量：

// 假设你的组件是函数组件
const YourComponent = ({ data }: ComponentProps) => {
  // 组件渲染逻辑
  return (
    <div>
      <h1>{data.faqsResult.title}</h1>
      {/* 渲染其他内容 */}
    </div>
  );
};

// 明确指定类型参数，同时配置变量来源
export default graphql<ComponentProps, { slug: string }>(
  queryFragment,
  {
    options: (props) => ({
      variables: {
        slug: props.slug, // 从组件props中获取动态slug
      },
    }),
  }
)(YourComponent);

3. 检查依赖的类型定义版本 #

如果上述方法还是报错，可能是你的@types/gatsby（或对应GraphQL HOC的类型包）版本不匹配，导致TypeScript对graphql函数的参数推断错误。尝试更新相关类型依赖：

npm install @types/gatsby --save-dev
# 或者用yarn
yarn add @types/gatsby --dev

总结一下：核心问题是TypeScript对graphql HOC的参数类型校验严格，你需要明确指定类型，并正确配置动态变量的获取逻辑，同时确保查询本身的语法规范。

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