如何用Github GraphQL API查询指定Topic的relatedTopics？求示例

你之前的查询是用来搜索关联指定话题的仓库，要获取Topic的relatedTopics，需要直接查询Topic对象，而不是通过search接口。以下是具体实现示例：

1. 编写GraphQL查询 #

可以创建一个专门的查询函数，直接请求目标Topic及其相关话题：

const getTopicWithRelatedQuery = (topicName, relatedCount = 10) => gql`
  query FetchTopicAndRelated($topicName: String!) {
    topic(name: $topicName) {
      # 基础话题信息，按需选择
      name
      displayName
      description
      stargazerCount
      # 获取相关话题，支持分页参数first控制数量
      relatedTopics(first: ${relatedCount}) {
        nodes {
          name
          displayName
          description
          stargazerCount
          url
        }
      }
    }
  }
`;

2. 在React组件中使用查询 #

结合Apollo Client（假设你用的是这个主流的GraphQL客户端），可以这样调用查询并渲染结果：

import { useQuery } from '@apollo/client';
import { getTopicWithRelatedQuery } from './path-to-your-queries';

export default function TopicDetails({ targetTopic }) {
  const { loading, error, data } = useQuery(
    getTopicWithRelatedQuery(targetTopic),
    { variables: { topicName: targetTopic } }
  );

  if (loading) return <div>加载中...</div>;
  if (error) return <div>查询失败: {error.message}</div>;

  const { topic } = data;
  return (
    <div className="topic-container">
      <h1>{topic.displayName}</h1>
      <p className="topic-desc">{topic.description}</p>
      <p>星标数: {topic.stargazerCount}</p>

      <h2>相关话题</h2>
      <ul className="related-topics-list">
        {topic.relatedTopics.nodes.map(related => (
          <li key={related.name}>
            <a href={related.url} target="_blank" rel="noopener noreferrer">
              <strong>{related.displayName}</strong>
            </a>
            <p>{related.description || '无描述'}</p>
            <span>星标数: {related.stargazerCount}</span>
          </li>
        ))}
      </ul>
    </div>
  );
}

关键说明 #

• 直接通过topic(name: $topicName)定位目标话题，这是获取relatedTopics的核心，因为relatedTopics是Topic对象的内置关联字段
• 可以通过first参数控制返回的相关话题数量，最多支持100条（GitHub API限制）
• 推荐使用GraphQL变量（如$topicName）替代模板字符串拼接，避免语法错误和注入风险

内容的提问来源于stack exchange，提问作者Gonzalo Medina Galdames