React-Apollo中如何在组件每次调用时重发GraphQL查询

嘿，我明白你的需求啦——就是每次进入好友详情页面（哪怕是从另一个好友页面跳转过来），组件都能自动重新发GraphQL查询拿最新的好友信息对吧？这里给你几个适配不同组件类型的解决方案：

针对你现有类组件的方案 #

因为你给出的onClickFriend是类组件写法，那咱们先对应类组件的生命周期来实现：

用componentDidMount + componentDidUpdate钩子组合 #

这个组合能覆盖首次加载和**路由参数变化（切换好友）**两种场景：

class FriendDetail extends React.Component {
  // 首次挂载组件时发起查询
  componentDidMount() {
    this.fetchFriendData();
  }

  // 组件更新时（比如路由里的userId变了），对比参数后重新查询
  componentDidUpdate(prevProps) {
    // 从路由参数里获取当前和之前的userId
    const currentUserId = this.props.match.params.userId;
    const prevUserId = prevProps.match.params.userId;

    // 如果userId发生变化，重新发起查询
    if (currentUserId !== prevUserId) {
      this.fetchFriendData();
    }
  }

  // 封装GraphQL查询逻辑
  fetchFriendData = () => {
    const targetUserId = this.props.match.params.userId;
    
    // 这里替换成你的GraphQL查询代码
    this.props.client.query({
      query: YOUR_FRIEND_DETAILS_QUERY, // 你的详情查询语句
      variables: { userId: targetUserId }
    })
    .then(res => {
      // 把结果存到组件状态或者redux里
      this.setState({ friendInfo: res.data.friend });
    })
    .catch(err => {
      console.error('获取好友详情失败:', err);
    });
  }

  // 你的其他组件逻辑（渲染等）...
}

更现代的函数组件方案（推荐） #

如果后续组件重构为函数式写法，用React Hooks会更简洁，这里分两种情况：

手动用useEffect监听参数 #

通过把userId放到useEffect的依赖数组里，只要参数变化就自动触发查询：

import { useEffect, useState } from 'react';
import { useParams } from 'react-router-dom'; // react-router v6版本

function FriendDetail({ client }) {
  const { userId } = useParams(); // 从路由获取userId参数
  const [friendInfo, setFriendInfo] = useState(null);
  const [fetchError, setFetchError] = useState(null);

  useEffect(() => {
    // 封装异步查询函数
    const getFriendDetails = async () => {
      try {
        const res = await client.query({
          query: YOUR_FRIEND_DETAILS_QUERY,
          variables: { userId }
        });
        setFriendInfo(res.data.friend);
        setFetchError(null);
      } catch (err) {
        setFetchError('加载好友详情失败');
        console.error(err);
      }
    };

    getFriendDetails();
  }, [userId, client]); // 依赖项：userId变化时重新执行effect

  // 渲染逻辑...
  if (fetchError) return <div>{fetchError}</div>;
  if (!friendInfo) return <div>加载中...</div>;
  return <div>{friendInfo.username}的详情页</div>;
}

用GraphQL客户端的自动查询（比如Apollo Client） #

如果你用的是Apollo这类成熟的GraphQL客户端，useQuery钩子会自动监听变量变化，不用手动写effect：

import { useQuery } from '@apollo/client';
import { useParams } from 'react-router-dom';

function FriendDetail() {
  const { userId } = useParams();
  // useQuery会自动检测variables里的userId变化，自动重新查询
  const { loading, error, data } = useQuery(YOUR_FRIEND_DETAILS_QUERY, {
    variables: { userId }
  });

  if (loading) return <p>加载中...</p>;
  if (error) return <p>出错了：{error.message}</p>;

  return (
    <div className="friend-detail">
      <h2>{data.friend.username}</h2>
      {/* 渲染其他好友详情 */}
    </div>
  );
}

注意事项 #

• 确保你能正确从路由中获取userId：react-router v5用props.match.params.userId，v6用useParams()；
• 如果用自定义的GraphQL请求工具，记得在组件卸载时取消未完成的请求，避免内存泄漏。

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