Variable ID! remains undefined in graphql mutation

Question

I have mutations -

`export const setTimeLineOnUser = gql 
    mutation ($tID: ID!, $uID: ID! ){
        setTimeLineOnUser(userTimeLineId: $tID, timeLineUserId: $uID){
            userTimeLine {
                id
                updatedAt
                posts{
                    id
                    postType
                    updatedAt
                }
            }
            timeLineUser {
                id
                name
                email
            }
        }
    };`

and a function which looks like this -

`this.props.createTimeLine().then((response) => {
            console.log(response.data.createTimeLine.id);
            this.addTimeLineToUser(response.data.createTimeLine.id, this.props.userQuery.user.id);
        });`

user has a one -to one relations like this -

`setTimeLineOnUser(userTimeLineId: ID!, timeLineUserId: ID!): SetTimeLineOnUserPayload`

now on running i get this error -

Error: GraphQL error: Variable '$tID' expected value of type 'ID!' but value is undefined. Reason: Expected non-null value, found null. (line 1, column 11): mutation ($tID: ID!, $uID: ID!) { ^ GraphQL error: Variable '$uID' expected value of type 'ID!' but value is undefined. Reason: Expected non-null value, found null. (line 1, column 22): mutation ($tID: ID!, $uID: ID!) { ^ at new ApolloError (apollo.umd.js:1959) at apollo.umd.js:2670 at tryCallOne (core.js:37) at core.js:123 at JSTimers.js:117 at Object.callTimer (JSTimersExecution.js:95) at Object.callImmediatesPass (JSTimersExecution.js:199) at Object.callImmediates (JSTimersExecution.js:214) at MessageQueue.js:228 at MessageQueue.__guard (MessageQueue.js:218)

although console.log(this.props.userQuery.user.id); is returning valid ID! I even tried to make the mutation assigning the ids to states so that they may not be null but still no use!!! what I am doing wrong?

if you want to see the files go here - Gist

Answer 1

The problem is when you call the addTimelineToUser you give an object but you need both parameters.

  componentDidMount(){ this.props.createTimeLine().then((response) => { // this.addTimeLineToUser({ tID: response.data.createTimeLine.id, uID: this.props.userQuery.user.id }) wrong this.addTimeLineToUser(response.data.createTimeLine.id, this.props.userQuery.user.id) }); } addTimeLineToUser = (tId, uId) => { this.props.setTimeLineOnUser({variables: {tId, uId}}) .then((response) => { console.log(response); }).catch((err) => { console.log(err); }); }; 

And it might be that this does not work because im not sure if the query is loaded inside the component did mount function.