Apollo GraphQL查询传入ID参数时无法返回数据问题求助

你代码里有3个直接导致拿不到数据的错误，按下面改完即可正常获取返回值：

• 最核心的错误：useQuery 钩子默认返回的响应字段是固定的loading/error/data，你直接解构自定义名字productLoading/productError/productData，拿到的只会是undefined，根本没有取到Apollo返回的真实响应。
  两种改法都可以：

  // 写法1：直接用默认字段名接收
  const { loading, error, data } = useQuery(PRODUCT, {
    variables: { itemID: myID },
  });
  
  // 写法2：解构时做重命名
  const { loading: productLoading, error: productError, data: productData } = useQuery(PRODUCT, {
    variables: { itemID: myID },
  });
  

• 第二个错误：useEffect 传了空依赖数组，只会在组件首次挂载时执行1次。首次挂载时GraphQL请求还在请求中，data本身就是undefined，等后续请求完成、组件重渲染时，空依赖的effect不会重新触发，自然打不出日志。把你要监听的数据字段加到依赖数组里即可：

  useEffect(() => {
    if (productData) {
      console.log("data: ", productData)
    }
  }, [productData])
  

• 第三个错误：日志打印写法有问题，你用"data: " + productData的写法，JS会自动把对象转成字符串，就算拿到数据也只会打印data: [object Object]，看不到实际返回结构，改成逗号分隔传参打印对象即可。

附加排查项：如果改完上述问题还是拿不到数据，直接打印error字段看报错信息，确认后端schema中product查询的参数名、参数类型和你传的匹配，没有鉴权拦截即可。不带参数的列表查询能正常返回，说明Apollo Client的基础配置没有问题，99%的概率是上面三个写法问题。

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