在apollo客户端使用react native调用另一个查询onComplete。

Question

我在嵌套查询中得到无效的钩子调用。

const fetchNotifications = useNotificationsQuery({
        variables: {
            skip: SKIP,
            take: TAKE,
        },
        async onCompleted(data){
            let ids:Array<string>=[]
            data?.notifications?.forEach((e)=>{
                ids.push(e?.id+"")
            })
            setIds(ids)
            readNotifications()
        }
    });

    const readNotifications =()=> usereadNotifications({
        variables: { notificationIds: ids},
            async onCompleted(data){
                console.log("res"+data)
            }
    })

和usereadNotifications来自于

export const readNotifications = gql` mutation readNotifications($notificationIds: [String]!) {
       readNotifications(notificationIds: $notificationIds) 
} `; 
export const usereadNotifications = (options?: QueryHookOptions) => ( 
     useMutation(readNotifications, options) 
); 

Answer 1

自 usereadNotifications 钩 useMutation你不能把它包装成一个函数并尝试有条件地执行它，因为它破坏了钩子的规则。

然而useMutation返回给你一个函数，它允许你调用该函数来触发突变。

所以要用它

const fetchNotifications = useNotificationsQuery({
    variables: {
        skip: SKIP,
        take: TAKE,
    },
    async onCompleted(data){
        let ids:Array<string>=[]
        data?.notifications?.forEach((e)=>{
            ids.push(e?.id+"")
        })
        setIds(ids)
        readNotifications()
    }
});

const [readNotifications] = usereadNotifications({
    variables: { notificationIds: ids},
        async onCompleted(data){
            console.log("res"+data)
        }
})