Apollo中使用useQuery实现查询筛选的问题排查

问题场景 #

在Apollo Explorer中可通过指定字段筛选查询目标用户，但使用useQuery Hook实现时筛选逻辑失效，返回所有用户数据。

Explorer中可行的查询语句 #

query ListUsersByType($filter: TableUsersFilterInput) {
  listUsers(filter: $filter) {
    items {
      email
      id
      type
    }
  }
}

对应的变量参数：

{
  "filter": {
    "type": {
      "eq": "ADMIN"
    }
  }
}

失效的useQuery代码示例 #

const ListUsersByType = gql`
  query ListUsersByType($type: TableUsersFilterInput) {
    listUsers(filter: $type) {
      items {
        email
        id
        type
      }
    }
  }
`

const { data, loading, error } = useQuery(ListUsersByType, {
  variables: {
    filter: {
      type: {
        eq: 'ADMIN',
      },
    },
  },
})

问题原因 #

• 变量名不匹配：GraphQL查询中定义的变量是$type，但useQuery的variables传入的键是filter，导致筛选条件根本没传递到查询中，listUsers因未收到过滤参数返回全量数据。
• 变量命名逻辑错误：未保持和Apollo Explorer中一致的变量命名，应该用$filter对应listUsers的filter参数。

修正后的代码 #

修正GraphQL查询定义 #

const ListUsersByType = gql`
  query ListUsersByType($filter: TableUsersFilterInput) {
    listUsers(filter: $filter) {
      items {
        email
        id
        type
      }
    }
  }
`

useQuery调用（无需修改） #

const { data, loading, error } = useQuery(ListUsersByType, {
  variables: {
    filter: {
      type: {
        eq: 'ADMIN',
      },
    },
  },
})

修正后即可正确传递筛选条件，仅返回类型为ADMIN的用户数据。

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