如何在Apollo React中复用GraphQL查询获取多个用户？

两种方案都可行，各有优劣，具体如下：

如果暂时无法修改服务端，可以通过以下方式在客户端批量获取用户：

• 用Promise.all批量发起单个查询
  借助Apollo Client的client.query方法，循环每个用户ID发起请求，最后合并结果。示例代码：

  import { useApolloClient, useEffect, useState } from '@apollo/client';
  import { USER_QUERY } from './your-queries-file';
  
  const UserList = ({ userIds }) => {
    const client = useApolloClient();
    const [users, setUsers] = useState([]);
  
    const fetchUsers = async () => {
      try {
        const queryPromises = userIds.map(id => 
          client.query({
            query: USER_QUERY,
            variables: { id }
          })
        );
        const results = await Promise.all(queryPromises);
        const fetchedUsers = results.map(res => res.data.getUser);
        setUsers(fetchedUsers);
      } catch (err) {
        console.error('获取用户失败:', err);
      }
    };
  
    useEffect(() => {
      if (userIds.length > 0) fetchUsers();
    }, [userIds]);
  
    return (
      <div>
        {users.map(user => (
          <div key={user.id}>{user.name}</div>
        ))}
      </div>
    );
  };
  

  注意：这种方式会为每个ID发送单独的HTTP请求，当用户ID数量较多时，会导致请求泛滥，影响性能，还可能触发服务端限流。

• 启用Apollo批量请求链接
  配置Apollo Client时使用BatchHttpLink，它会自动把多个查询打包成一个HTTP请求发送，减少请求次数。配置示例：

  import { ApolloClient, InMemoryCache } from '@apollo/client';
  import { BatchHttpLink } from '@apollo/client/link/batch-http';
  
  const client = new ApolloClient({
    link: new BatchHttpLink({ uri: '/your-graphql-endpoint' }),
    cache: new InMemoryCache(),
  });
  

  之后再用上面的Promise.all方式发起查询，Apollo会自动批量处理请求，降低HTTP开销。

这是更推荐的长期解决方案，性能和效率都更优。

在服务端GraphQL schema中新增批量查询字段：

type Query {
  getUser(id: Int!): User
  # 新增批量获取用户的Query
  getUsers(ids: [Int!]!): [User!]!
}

实现对应的 resolver 逻辑（比如用数据库IN语句批量查询，减少数据库查询次数）。

客户端对应的查询语句：

query GetUsers($ids: [Int!]!) {
  getUsers(ids: $ids) {
    id
    name
  }
}

然后在React组件中用useQuery直接获取：

import { useQuery } from '@apollo/client';
import { GET_USERS_QUERY } from './your-queries-file';

const UserList = ({ userIds }) => {
  const { loading, error, data } = useQuery(GET_USERS_QUERY, {
    variables: { ids: userIds },
  });

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

  return (
    <ul>
      {data.getUsers.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
};

这种方式只需要一次HTTP请求就能获取所有用户，服务端还可以做数据库层面的优化，整体性能和维护性都更好。

总结：如果是临时需求或无法修改服务端，用客户端批量方案；如果是长期使用，优先选择服务端新增Query的方式。

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