Apollo useLazyQuery 监听完成

Question

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

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

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

由于 useLazyQuery 没有 return 承诺，我决定创建自己的类似承诺的侦听器。据我所知，推荐的方法是 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
            }
        });

Answer 1

您可以使用Window中止控制器取消请求

Learn more here: https://evilmartians.com/chronicles/aborting-queries-and-mutations-in-react-apollo

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

Answer 2

我可以通过直接使用 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}`)
            });
    }
    ```

Apollo useLazyQuery 监听完成

Apollo useLazyQuery listen on completion

javascript

reactjs

react-apollo