React中如何将URL查询字符串变量动态传入组合GraphQL查询？

我来帮你搞定这个问题，核心思路是把URL参数的解析逻辑移到GraphQL高阶组件的options配置里，而不是等到组件render阶段再处理。这样GraphQL查询在组件挂载时就能拿到正确的变量，不用再硬编码了。

具体步骤和代码修改： #

首先，确保你的组件能拿到路由相关的props（比如location）——如果用的是react-router，只要你的AuthRoute正确传递了路由props给子组件，这一步就没问题（后面会说怎么检查）。

然后修改你的compose配置：

// 如果你还没装，可以用query-string库来解析URL参数，比自己写更可靠
// npm install query-string
import queryString from 'query-string';

class UsageComponent extends Component {
  render() {
    // 现在不用在这里解析参数了，查询已经自动用正确的imageId发起了
    const { imageByImageId, loading, error } = this.props.getImageDetails;
    
    if (loading) return <div>加载中...</div>;
    if (error) return <div>获取图片详情失败：{error.message}</div>;
    
    return (
      <div>
        <h2>{imageByImageId.originalFilename}</h2>
        <p>尺寸：{imageByImageId.width}x{imageByImageId.height}</p>
        {/* 其他渲染内容 */}
      </div>
    );
  }
}

const GET_IMAGE_DETAILS_QUERY = gql`
  query getImageDetails($imageId: Int!){
    imageByImageId(imageId:$imageId) {
      filename
      originalFilename
      width
      height
      description
      // 你的其他字段
    }
  }
`;

export default compose(
  graphql(GET_IMAGE_DETAILS_QUERY, {
    name: "getImageDetails",
    options: props => {
      // 在这里解析URL的query参数
      const params = queryString.parse(props.location.search);
      // 把字符串转成Int类型，匹配GraphQL查询的类型要求
      const imageId = params.id ? parseInt(params.id, 10) : null;
      
      return {
        variables: { imageId },
        // 可选：如果没有有效imageId，跳过查询避免报错
        skip: !imageId
      };
    }
  }),
  graphql(GET_PUBLICATIONS_QUERY, {name: "getPublications"})
)(ImageBrowser);

关键注意点： #

1. 路由props的传递：
   确保你的AuthRoute组件在渲染子组件时，把路由相关的props（比如location、match）传递过去。如果你的AuthRoute是自己写的，应该像这样：

   const AuthRoute = ({ component: Component, token, ...rest }) => (
     <Route
       {...rest}
       render={routeProps =>
         isAuthenticated(token) ? (
           // 这里要把routeProps传给子组件！
           <Component {...routeProps} token={token} />
         ) : (
           <Redirect to="/login" />
         )
       }
     />
   );
   

   如果没传的话，props.location会是undefined，就没法解析参数了。

2. 参数类型校验：
   因为GraphQL查询要求imageId是Int!（非空整数），所以一定要把从URL拿到的字符串转成整数，并且处理id不存在的情况（比如加skip选项），避免发起无效查询导致报错。

3. 替代方案（不用第三方库）：
   如果你不想用query-string，也可以复用你自己的queryStringParse方法，只要把它移到options里：

   options: props => {
     const params = queryStringParse(props.location.href);
     const imageId = params.id ? parseInt(params.id, 10) : null;
     return { variables: { imageId }, skip: !imageId };
   }
   

这样修改后，你的组件就能自动从URL的?id=xxx参数里拿到imageId，动态传给GraphQL查询，不用再硬编码啦！

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