使用Apollo useQuery时，能否通过嵌套变量查询指定客户的项目？

我基于GraphQL开发了一个MERN应用，想通过数据中的嵌套属性作为变量查询项目。现有client（客户）和project（项目）模型，希望在使用useQuery查询项目时，传入客户ID获取该客户的所有项目。客户ID（clientId）可通过URL参数获取，目前变量设置有问题，想确认需求是否可实现及正确做法。

当然可以实现这个需求，需要从后端GraphQL查询Schema、前端GraphQL查询语句和组件变量传递三个部分修改：

1. 修改后端项目查询Schema，支持接收客户ID参数 #

当前的projects查询仅返回所有项目，需修改定义让它能接收clientId参数，并在resolve函数中过滤对应项目：

projects: {
  type: new GraphQLList(ProjectType),
  // 添加参数定义
  args: {
    clientId: { type: GraphQLID }
  },
  resolve(parent, args) {
    // 传入clientId时过滤该客户的项目，否则返回全部
    if (args.clientId) {
      return Project.find({ clientId: args.clientId });
    }
    return Project.find();
  },
},

2. 修改前端GraphQL查询语句，添加变量占位符 #

原查询未接收变量，需修改为带参数的查询，指定接收$clientId变量：

import { gql } from "@apollo/client";

const GET_PROJECTS = gql`
  query getProjects($clientId: ID) {
    projects(clientId: $clientId) {
      id
      title
      client {
        id
        firstName
        lastName
      }
    }
  }
`;

3. 在组件中正确传递变量 #

直接将URL中获取的clientId作为变量传入useQuery即可，无需嵌套结构：

export const ClientProjects = () => {
  const { clientId } = useParams();

  const { loading, error, data } = useQuery(GET_PROJECTS, {
    variables: { clientId },
  });

  if (loading) return <p>Loading...</p>;
  if (error) return <p>There was an error...</p>;

  return (
    <>
      {data.projects.map((project) => (
        <ProjectCard key={project.id} project={project} />
      ))}
    </>
  );
};

补充说明 #

从你的项目Schema可见，Project模型实际存储的是clientId（client字段的resolve函数通过parent.clientId查询客户数据），因此后端过滤时直接匹配clientId字段即可，无需处理嵌套的client.id结构。

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