Apollo useLazyQuery 在完成时监听答案

【问题标题】：Apollo useLazyQuery listen on completionApollo useLazyQuery 在完成时监听
【发布时间】：2021-07-15 02:55:56
【问题描述】：

我将 graphql 与 Apollo 一起用于注册页面。 onSubmit我要发送查询确认用户名是否唯一（目前统计用户，我知道我应该检查是否存在，但不是这个问题的范围）

我这样做有几个问题。使用useQuery 会立即发送查询 - 我不能选择在提交时发送查询。使用useLazyQuery 发送查询延迟调用user_count。 -> 问题：它既不是promise，也不是onComplete 工作（存在于useQuery 并在查询完成后执行的函数）

useLazyQuery 是如何工作的？它执行查询。这些值可以通过data_user 访问，一旦查询完成，它就会更新。 data_user 最初是 undefined。

由于useLazyQuery 没有返回承诺，我决定创建自己的类似承诺的监听器。据我所知，推荐的方法是Proxy。问题在于：试图设置target= data_user throws

Cannot create proxy with a non-object as target or handler

我可以使用 setCallback 函数来解决这个问题，该函数会查看每对 MS 的变化，但感觉很脏。


export default function Signup() {
    const [state, setState] = useState([])
    const [user_count, {loading, data: data_user}] = useLazyQuery(USER_COUNT);

    const handleSubmit = event => {
        event.preventDefault();

        const proxy = new Proxy(data_user, {
            set: function (target, prop, value) {
                if (prop === 'userCount') {
                    console.log("Query finished")
                    const user_exists = data_user.userCount !== 0;
                    console.log(`User exists: ${user_exists}`)
                }
            }
        })

        user_count({
            variables: {
                name: state.value
            }
        });

【问题讨论】：

标签： javascript reactjs react-apollo

【解决方案1】：

我可以通过直接使用useApolloClient 来解决这个问题：

const client = useApolloClient();

const handleSubmit = event => {
        event.preventDefault();

        client
            .query({
                query: USER_COUNT,
                variables: {
                    name: state.value
                }
            })
            .then(response => {
                const user_exists = response.data.userCount !== 0;
                console.log(`User already exists: ${user_exists}`)
            });
    }
    ```

【讨论】：

【解决方案2】：

您可以使用 Window Abort 控制器来取消请求

在此处了解更多信息： https://evilmartians.com/chronicles/aborting-queries-and-mutations-in-react-apollo

在文章末尾查看完整示例，希望对您有所帮助

【讨论】：

我不想取消请求，我希望在请求完成后发生一些事情（创建帐户或显示错误）。现在找到了解决方法。