如何等待所有变量加载完成后再执行GraphQL查询

问题原因 #

你定义的GraphQL查询对$id添加了String!非空约束，路由参数id初始化阶段为undefined时，请求会被服务端参数校验拦截，返回400错误。此外原代码直接在useQuery配置项内调用useRouter，违反了React Hook必须在组件顶层调用的规则。

解决方案 #

最通用的方案是利用GraphQL客户端的查询跳过配置，仅在参数准备完成后发起请求：

1. Apollo Client 场景

使用skip配置项控制查询时机，修正后代码如下：

const patternsQuery = gql`
  query PatternQuery($id: String!) {
    pattern(id: $id) {
      id
      name
    }
  }
`
const Component = () => {
  // 组件顶层调用useRouter，符合Hook规则
  const router = useRouter();
  const id = router.query.id;

  const { data, loading } = useQuery(patternsQuery, {
    variables: { id },
    // id不存在时跳过查询，避免发送无效请求
    skip: !id
  })

  // 增加加载态处理，避免渲染报错
  if (loading || !data) return <div>加载中</div>
  return <div>{data.pattern.name}</div>
}

2. urql 场景

对应配置为pause: !id，逻辑和上述方案完全一致。

3. Next.js 13+ App Router 场景

可以直接用useParams()替代useRouter()获取路由参数，该方法会等路由参数完全初始化后再返回，天然避免undefined问题：

const Component = () => {
  // useParams返回的id始终为有效值
  const { id } = useParams();
  const { data, loading } = useQuery(patternsQuery, {
    variables: { id }
  })
  // 后续逻辑同上
}

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