如何使用 apollo graphql 查询初始化 useState

Question

如何使用useState 并在组件呈现之前将其设置为从graphql 接收到的值？

我试过了：

  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  

  const [me] = useQuery(gql`
    query Me {
      me {
        id
        name
        email
      }
    }
  `);

  useEffect(() => {
    (async () => {
      const { data } = await me();

      if (data) {
        setName(data.me.name);
        setEmail(data.me.email);
      }
    })();
  }, []);

并收到此错误：

TypeError: Object is not a function
Profile
src/pages/Profile.js:51
  48 | const [currentPasswordValid, setCurrentPasswordValid] = useState(false);
  49 | const [open, setOpen] = useState(false);
  50 | 
> 51 | const [me] = useQuery(gql`
     | ^  52 |   query Me {
  53 |     me {
  54 |       id

我尝试这样做的原因是将表单输入的值设置为当前用户值：

<TextField value={name} onChange={(e) => setName(e.target.value)} />

Answer 1

您似乎使用了错误的钩子。 useQuery 会在组件挂载后自动执行。它将返回您可以使用的 data、loading 和 error 属性（如果您查看文档，还有更多属性，但这些是基本属性）。

如果您想手动触发查询，您可以使用useLazyQuery 挂钩，该挂钩将返回上述属性和可用于执行查询的回调。

使用useQuery，您的代码可以如下所示：

const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  

  const { data, loading } = useQuery(gql`
    query Me {
      me {
        id
        name
        email
      }
    }
  `);

  if(loading) {
    return <div>loading...</div>;
  }

  return <TextField value={data.me.name} onChange={(e) => setName(e.target.value)} />;

如果您更喜欢使用惰性查询，您的代码可以如下所示：

  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  

  const [me, { data }] = useLazyQuery(gql`
    query Me {
      me {
        id
        name
        email
      }
    }
  `);

  useEffect(() => {
    (async () => {
      await me();
    })();
  }, []);

  useEffect(() => {
    if (data) {
      setName(data.me.name);
      setEmail(data.me.email);
    }
  }, [data])

我个人更喜欢在不必要的时候避免使用惰性查询。