调用useEffect挂钩时useQuery数据未定义？

Question

我在这里有点困惑。根据this SO question 和this question，我应该能够在调用useQuery 钩子以填充状态后调用useEffect 钩子，我正在通过useReducer 执行此操作。例如，像这样（假设 foo、bar 和 baz 是对 GraphQL 服务器的单个请求中的命名查询）：

const MyComponent = ( props ) => {

  const [ state, dispatch ] = useReducer( reducer, initialState )

  const query = someCondition ? query1 : query2
  const variables = { variables: someCondition ? query1Vars : query2Vars }

  const { loading, error, data } = useQuery( query, variables )

  useEffect(function() {
    dispatch({
      type: types.INIT,
      payload: {
        foo: data.foo,
        bar: data.bar,
        baz: data.baz
      }
    })
  }, [data])

  return (
    <div>
    {
      (() => {
         if ( loading ) return <Loading />
         if ( error ) return <Error />
         return (
           // components that depend on data
         )
      })()
    }
    </div>
  )
}

由于我无法确定的原因，当我在 useEffect 中引用它时，data 是 undefined。我检查了我的网络响应，并且对我的 GraphQL 端点的调用确实在返回数据。 （基本上，this other SO question about useQuery 中描述的内容。）

除了条件查询/变量赋值之外，此代码用于我们的其他一些组件并且工作正常，所以我不知道为什么它在我的情况下不起作用。

我不确定这里发生了什么，因为我已经确保没有违反钩子规则的有条件地调用任何钩子；我所做的只是有条件地分配变量值之前通过 Apollo 客户端发送查询。 （我还尝试了useQuery 选项的onCompleted 属性，没有useEffect 钩子，但无济于事；data 仍然是undefined。）

Answer 1

除非我没有完全理解您的问题，否则这看起来像是预期的行为。

useEffect 将在挂载时触发，然后任何时候data 更改，data 只会在 API 调用完成后更改。初始的useEffect 调用将在useQuery 得到服务器响应之前发生，因此您不能在useEffect 内部假设data 将被设置。

如果您只想在data 存在时调度，那么您应该保护呼叫，例如

useEffect(() => {
  if (data) {
    dispatch({
      type: types.INIT,
      payload: {
        foo: data.foo,
        bar: data.bar,
        baz: data.baz
      }
    });
  }
}, [data]);