如何通过承诺包装 useQuery 钩子

Question

我有一个 graphql 查询和 useQuery 钩子，它们返回大量数据。 我通过单击按钮开始加载并显示数据加载何时完成。 是否可以使用 Promise 等待加载数据？ 你能写出来吗？

const GET_NAME= gql`
    query  {
        employee {
            id
            name
        }
    }
`;

...

function Form () {
...
    const { data } = useQuery(
        GET_NAME
    );

    const onClick = () => {

    ....
    return textInput.current!.value=data.employee.name;

Answer 1

使用来自 getQuery 的解构值

您不需要添加承诺，这是在内部处理的。

文档中的一个例子

  const { loading, error, data } = useQuery(GET_DOGS);

  if (loading) return 'Loading...';  // whilst its loading this will retun
  if (error) return `Error! ${error.message}`; // if there's an error this will return

  return <pre>{data}</pre> // if the other 2 are not true you must have data, this will return

如您所见，加载状态已经在返回中。 以及一个错误。 您可以在等待数据返回时对这些值做出响应。