Apollo Client执行GraphQL查询报400 Bad Request错误如何解决

从接口返回的错误响应可以直接定位问题，和嵌套传参语法没有关系：
两个报错的核心逻辑完全一致：你在代码中定义的GraphQL变量为可空类型，但服务端Schema要求对应位置传入非空类型（类型名后带!标识）

• 变量$id在查询中被定义为可空类型String，但服务端getUser接口的_id入参要求为非空类型String!
• 变量$ratingHistoryFilter在查询中被定义为可空类型userRatingHistoryFilterInput，但服务端ratingHistory字段的ratingHistoryFilter入参要求为非空类型userRatingHistoryFilterInput!

Apollo Studio能跑通是因为你在Studio中编写查询时，变量定义是和服务端Schema匹配的（带非空标记），复制到代码时遗漏了类型后的!，导致两边执行的查询实际并不一致。

相关参考截图：

直接修改gql查询语句中的变量类型定义，给两个必填变量加上非空标识!即可，修改后的核心代码如下：

const { result, loading, error } = useQuery(
      gql`
        query GetUser(
          $id: String!
          $ratingHistoryFilter: userRatingHistoryFilterInput!
        ) {
          getUser(_id: $id) {
            _id
            ratingHistory(ratingHistoryFilter: $ratingHistoryFilter) {
              rating
              date
            }
          }
        }
      `,
      {
        id: props.uid,
        ratingHistoryFilter: {
          dateFrom: '1994-06-24',
          verified: 'false',
          dateTo: '2022-07-06',
          userID: {
            condition: 'EQUAL',
            value: '62c2d4100892074470ca374e'
          }
        }
      }
    )

    console.log(result)
    const userData = computed(() => result.value?.getUser ?? {})
    console.log(userData.value)

排查提示：后续遇到GraphQL返回400错误时，优先查看响应体中的errors数组，里面会明确标注类型不匹配、字段不存在、参数缺失等具体错误原因，不需要优先怀疑复杂嵌套逻辑的语法问题。

内容的提问来源于stack exchange，提问作者Tomas Gil Amoedo