menu

Apollo

A community of developers, designers and others who love Apollo and GraphQL. 🚀

Channels
# All channels
view-forward
# General
view-forward
# Apollo Angular
view-forward
# Announcements
view-forward
# Apollo Android
view-forward
# Apollo Client
view-forward
# Apollo iOS
view-forward
# Apollo Link
view-forward
# Apollo Link Rest
view-forward
# Local State
view-forward
# Apollo Studio
view-forward
# Apollo Server
view-forward
# Apollo Tooling
view-forward
# Contributing
view-forward
# Docs
view-forward
# Events
view-forward
# GraphQL Tools
view-forward
# Jobs
view-forward
# Random
view-forward
# React Apollo
view-forward
# Showcase
view-forward
# Subscriptions
view-forward
# Testing
view-forward
# Vue Apollo
view-forward
Team

useMutation always returns undefined ...

October 2, 2019 at 9:25am

useMutation always returns undefined ...

October 2, 2019 at 9:25am (Edited 1 year ago)
I want to create a user which has an adress using GraphQL mutations. When I try to log the data from the useMutation hook, the adress data is always undefined
I am trying to create a user for my app. Each user has an adress. I am able to create an adress in my database. However, when I try to access the created adress with the useMutation hook, I always have "newAdress:undefined"
Here are my mutations :
to add a user :
const ADD_USER = gql`
mutation addIntervenant ($firstName:String!, $lastName:String!, $email:String!) {
addInter (
firstName:$firstName
lastName:$lastName
mail : $email,
)
{
firstName
lastName
mail
}
}`
to add an adress
const ADD_ADRESS = gql`
mutation addAdress ($street:String!, $city:String!, $zip:String!){
adress:addAdress (
street:$street
city:$city
zip:$zip
){
street
city
zip
id
}
}`
I then have used the useMutation hook to create an adress and a user
const [addInter, {inter}]=useMutation(ADD\_USER)
const [addAdress, {newAdress}]=useMutation(ADD\_ADRESS)
And when I submit the form :
onSubmit = {async (e)=>{
e.preventDefault();
await addAdress({
variables : {
street,
city,
zip
}
}).then(console.log('newAdress',newAdress))
await addInter({
variables : {
firstName ,
lastName ,
email
}
});
props.history.push('/step2')
}}
I would like to access data from the created adress (in the newAdress object) in order to add its id to the related user. How can I access the data from the created adress ?
Any help would be really saving ! It has been a few days that I am trying :/ Thanks a lot !

October 2, 2019 at 10:16am
‘const [addAdress, {newAdress}]=useMutation(ADD_ADRESS)’ should be something like ‘const [addAdress, {data}]=useMutation(ADD_ADRESS)’. The Results section of the docs https://www.apollographql.com/docs/react/data/mutations/
Also, it looks like there is a bug with the .then. There should be a callback function there, but the code is immediately invoked. Try .then(data => console.log(data)). I hope this was resolved by now.
Edited
  • reply
  • like
Hi ! Thanks for your tip : however if I try 'const [addAdress, {data}]=useMutation(ADD_ADRESS)' and then console.log(data), data is undefined. it seems to be the same issue :/
  • reply
  • like

October 4, 2019 at 6:03am
Hi Jonas. I can help you with this over direct message. There’s a few things that are quirky about the code above that I’m not quite understanding.
  • reply
  • like

November 16, 2019 at 9:43pm
Hi . I am having same issue. From the docs it seems ignoreResults defaults to true. (i'm not sure about this).
  • reply
  • like
Where you able to solve it ?
  • reply
  • like

November 19, 2019 at 6:21am
no one knows how to solve this problem. I'm in shock.
  • reply
  • like

December 4, 2019 at 2:36pm
since you're using async/await the body of your onSUbmit function could just be:
async (e) => {
e.preventDefault();
const addAddressResult = await addAdress({
variables : {
street,
city,
zip
}
})
const newAddress = addAddressResult.data.addAdress
console.log(newAddress)
const addInterResult = await addInter({
variables: {
firstName,
lastName,
email
}
})
props.history.push('/step2')
}
like-fill
1
  • reply
  • like

December 12, 2019 at 9:00pm
I think you need to use hooks not promises. Use a useEffect hook with an array of dependencies that contains the data property of the mutation
  • reply
  • like

January 2, 2020 at 11:32pm
The data from the useMutation is always undefined because it resolves asynchronously. I'd suggest you use the onComplete callback from the useMutation hooks.
  • reply
  • like
const [addAdress]=useMutation(ADD_ADRESS, onCompleted: (newAddress) { console.log(newAddress)})
Edited
like-fill
1
  • reply
  • like
This would return the data when mutation is completed.
  • reply
  • like
Plus:+1 to what said, just use the onCompleted callback that comes with the useMutation hooks.
in your case, it will be something like this; const [addAdress, {newAdress}]=useMutation(ADD_ADRESS, { async onCompleted() { console.log(newAddress); // perform all success actions here props.history.push('/step2') } })
Like Charles rightly pointed out, Apollo hooks resolve asynchronously hence why I'm using async for the onCompleted callback.
Edited
  • reply
  • like

August 1, 2020 at 9:37pm
I had the same issue. and cleared like below
const ADD_JOB = gqlmutation CreateJob($companyName: String, $title: String, $description: String) { createJob(companyName: $companyName, title: $title, description: $description) { _id } } ........ ........
const [createJob, { data }] = useMutation(ADD_JOB, { onCompleted(createJob) { history.push(/jobs/${createJob.createJob._id}) } })
Oops! backtick(`) is not shown here. Guys you need to add it
Edited
  • reply
  • like

August 16, 2020 at 10:59pm
since you're using async/await the body of your onSUbmit function could just be:
async (e) => {
e.preventDefault();
const addAddressResult = await addAdress({
variables : {
street,
city,
zip
}
})
const newAddress = addAddressResult.data.addAdress
console.log(newAddress)
const addInterResult = await addInter({
variables: {
firstName,
lastName,
email
}
})
props.history.push('/step2')
}
Perfect! Thanks, this worked for me.
  • reply
  • like