reactjs - 使用本机反应在 apollo 客户端中调用另一个查询 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)
        }
})