执行带参数的GraphQL查询报错，请求协助排查解决

我帮你排查了代码里的几个关键问题，这些应该就是导致参数化查询失败的原因，一步步来修正：

1. 修正GraphQL查询的字段结构 #

对比你硬编码能正常运行的查询，参数化查询里的字段结构出现了错误：你把node下的name和backgroundImage写成了嵌套关系，但实际上它们是同级字段。同时，渲染时用到的node.id也没有在查询中请求，这会导致React渲染出错。

修正后的查询如下：

const subcategoryQuery = gql`
  query Subcategories($id: ID!) {
    category(id: $id) {
      name
      children(first: 10) {
        edges {
          node {
            id # 渲染时需要用这个作为key，必须请求该字段
            name
            backgroundImage {
              url
            }
          }
        }
      }
    }
  }
`;

2. 变量传递的验证 #

确保props.match.params.id的格式和后端要求一致（比如你硬编码的是Base64格式的Q2F0ZWdvcnk6Nw==）。如果传递的是原始数字ID（比如7），后端会无法识别。可以在查询选项里加个日志确认变量值：

const queryOptions = {
  options: props => {
    console.log('当前传递的ID变量:', props.match.params.id); // 检查变量是否符合要求
    return {
      variables: {
        id: props.match.params.id,
      }
    }
  }
}

3. 渲染逻辑的容错处理 #

为了避免某个分类节点没有backgroundImage导致报错，在访问url时添加可选链操作符做容错：

style={sectionStyle(elem.node.backgroundImage?.url || '')}

完整修正后的组件代码 #

import React, { Component } from "react";
import gql from "graphql-tag";
import { graphql } from "react-apollo";

const subcategoryQuery = gql`
  query Subcategories($id: ID!) {
    category(id: $id) {
      name
      children(first: 10) {
        edges {
          node {
            id
            name
            backgroundImage {
              url
            }
          }
        }
      }
    }
  }
`;

class Subcategories extends Component {
  state = {};

  displayCategories() {
    let sectionStyle = (bckg) => {
      return {
        margin: "0",
        backgroundImage: `url(${bckg})`,
        backgroundSize: "cover"
      };
    };

    const { data } = this.props;
    if (data.loading) return <div>Loading categories....</div>;
    
    return (
      <div key={data.category.id} className="categories">
        <p className="heading">{data.category.name}</p>
        {data.category.children.edges.map((elem) => (
          <div
            key={elem.node.id}
            className="subcategories"
            style={sectionStyle(elem.node.backgroundImage?.url || "")}
          >
            <p className="category-name">{elem.node.name}</p>
            <div className="shop">SHOP NOW</div>
          </div>
        ))}
      </div>
    );
  }

  render() {
    console.log(this.props);
    return this.displayCategories();
  }
}

const queryOptions = {
  options: (props) => {
    console.log('传递的ID变量:', props.match.params.id);
    return {
      variables: {
        id: props.match.params.id,
      }
    }
  }
};

export default graphql(subcategoryQuery, queryOptions)(Subcategories);

内容的提问来源于stack exchange，提问作者Nawaz Moin yaakuza