如何使用 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 会在组件挂载后自动执行。它将 return 一个 data 一个 loading 和一个 error 您可以使用的属性（如果您查看文档，它们会更多，但这些是基本的).

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

使用 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])

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

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

how to initialize useState with apollo graphql query

reactjs

graphql

apollo

react-apollo