Apollo GraphQL Client(ReactJS)：如何基于Redux数据动态构建GraphQL查询

没问题，我来帮你搞定这个动态适配多种实体类型的需求！核心思路是利用Apollo的graphql高阶组件支持动态生成查询的特性，结合Redux传递过来的props来动态构建对应的GraphQL查询。

步骤1：创建动态查询生成函数 #

首先，我们写一个函数，根据传入的实体类型（比如manager、client、vendor）生成对应的GraphQL查询：

const generateEntityUsersQuery = (entityType) => gql`
  query ${entityType}($id: Int!) {
    ${entityType}(id: $id) {
      users {
        id
        firstName
        lastName
        email
        username
      }
    }
  }
`;

这个函数用模板字面量把实体类型动态插入到查询名称和根字段中，确保生成的查询符合你需要的结构。

步骤2：修改graphql高阶组件，动态生成查询 #

Apollo的graphql高阶组件允许第一个参数是接收组件props的函数，我们可以利用这一点，从Redux传递过来的props中获取当前的实体类型，然后生成对应的查询：

// 先确保你的mapStateToProps已经把实体类型映射到props里
const mapStateToProps = (state) => ({
  currentEntityType: state.yourReducer.currentEntityType, // 替换成你Store中存储实体类型的实际路径
  currentOrg: state.org.currentOrg
});

export const UsersContainer = compose(
  connect(mapStateToProps, mapDispatchToProps),
  graphql((props) => {
    // 从props中拿到当前要查询的实体类型
    const { currentEntityType } = props;
    // 动态生成对应的查询
    return generateEntityUsersQuery(currentEntityType);
  }, {
    options: (props) => ({
      variables: { id: props.currentOrg.org.id }
    }),
    // 可选：统一查询结果的键名，避免组件中需要区分manager/client等字段
    name: 'entityData'
  })
)(Users);

关键说明 #

1. 确保Redux数据已映射到props：mapStateToProps里必须把存储实体类型的字段（比如currentEntityType）传递给组件，这样graphql的函数才能拿到这个值。
2. 统一查询结果键名（可选但推荐）：如果不设置name选项，查询结果会放在props.manager、props.client这类对应实体类型的字段里。设置name: 'entityData'后，所有实体类型的查询结果都会统一放在props.entityData里，组件里直接访问props.entityData.users即可，不用区分实体类型。
3. 安全性注意：因为实体类型是从你自己的Redux Store中获取的，而非用户输入，所以不用担心GraphQL注入的问题。

组件内使用查询结果 #

如果设置了name: 'entityData'，组件内可以这样访问用户列表：

const Users = ({ entityData }) => {
  if (entityData.loading) return <div>Loading...</div>;
  if (entityData.error) return <div>Error: {entityData.error.message}</div>;
  
  return (
    <div>
      {entityData.users.map(user => (
        <div key={user.id}>{user.firstName} {user.lastName}</div>
      ))}
    </div>
  );
};

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