After successfully adding a user to my database, I am encountering an issue where the query returns null in my client app even though it shows data in the GraphQL playground. To troubleshoot this problem, I have implemented a useEffect hook that triggers the query after the addPartner mutation is completed and data is received. However, I am puzzled as to why the query result is different between the playground and my application.
The addPartner function
const handleSubmit = async (): Promise<void> => {
...
await addPartner({ variables: { input: { ...form } } })
}
My useEffect hook and query function
const [addPartner, { data, error: addPartnerError }] = useMutation(ADDPARTNER)
const [fetchPartner, { data: partnerData, loading }] = useLazyQuery<IPartner>(GETPARTNER)
useEffect(() => {
checkSuccess()
console.log(partnerData) // null
}, [data, loading])
const checkSuccess = () => {
if (!addPartnerError) {
fetchPartner({ variables: { email: form.email } })
console.log("fetch executed") // "fetch executed"
console.log(partnerData) // null
if (partnerData?.getPartner != null) {
setPartner(partnerData.getPartner)
router.replace('/success')
}
}
}