React, Apollo - Update & Remove Mutation Issues - reactjs

Question

I am currently working and study on "CRUD" mutation with GraphQL. Using Apollo Client and React to control mutation at front-end. Using Express/mongoose as back-end to run server and fetch/store data from local database.
Working/Test with GraphQL (Middle/Back-end). I am able to fetch and mutate (create, update, and remove) data from local server (mongodb) through localhost:4000/graphiql tool.
Here's mutation schema...
const Mutation = new GraphQLObjectType({
name: 'Mutation',
fields: {
addUser: {
...
},
updateUser: {
type: UserType,
args: {
id: { type: new GraphQLNonNull(GraphQLString) },
name: { type: new GraphQLNonNull(GraphQLString) },
age: { type: new GraphQLNonNull(GraphQLInt) }
},
resolve(parent, args) {
let updateIser = User.findByIdAndUpdate(
args.id,
{
$set: { name: args.name, age: args.age }
},
{ new: true }
).catch(err => new Error(err));
return updateUser;
}
},
deleteUser: {
type: UserType,
args: { id: { type: new GraphQLNonNull(GraphQLString) } },
resolve(parent, args) {
let removeUser = User.findByIdAndRemove(args.id).exec();
if (!removeUser) {
throw new Error('Error, Cannot Delete!');
}
return removeUser;
}
}
}
});
Now on the the Front-End part using React and Apollo Client, fetching data and rendering iteration map was a success!
I also use react-router for page transition, When clicking on Add button from user list, it will bring me to form page to fill in user name and age. After complete, it will Submit and redirect (react-router redirect method) back to list page with a newly created user into list (refetch). This process was also a success for me!
On the Update (Edit) or Remove (Delete) part, It was unfortunate. I am facing several issues...Unable to update (Edit) user
I am guessing... It appear having something to do with not be able to fetch specific ID after clicking on Edit Button, or could it be some conflicting issue between fetching and react-router? As much as I have tried to find solutions, I ran out of ideas. So I was hoping I could use some help from you to solve on what I am facing.
If this helps... Here's React-Apollo syntax called List.js - This display the list of users including Edit and Remove button (unsuccessful attempts)
import React, { Component } from 'react';
import { graphql } from 'react-apollo';
import { Link } from 'react-router-dom';
import { getUsersQuery } from '../queries/queries';
class UserList extends Component {
state = { selected: null };
displayUser = () => {
let data = this.props.data;
if (data.loading) {
return <div>Loading...</div>;
} else {
return data.examples.map(user => (
<li
key={user.id}
onClick={e => { this.setState({ selected: user.id });}}
>
{user.name} {user.age}
<div className="choices">
<Link
to="/updateuser"
onClick={e => {
this.setState({ selected: user.id });
}}
>
<button>Edit</button>
</Link>
<Link to="/removeuser">
<button>Remove</button>
</Link>
</div>
</li>
));
}
};
render() {
console.log(this.state.selected);
return (
<div id="listContent">
<h3>List</h3>
<ul id="userList"> {this.displayUser()}</ul>
<Link to="/adduser">
<button>+</button>
</Link>
<div>{this.state.selected}</div>
</div>
);
}
}
export default graphql(getUsersQuery)(UserList);
The UpdateForm.js - A syntax that render update form. But couldn't succeed mutate it. possibility fetching issues?
import React, { Component } from 'react';
import { graphql, compose } from 'react-apollo';
import { Redirect, Link } from 'react-router-dom';
import { getUsersQuery, updateUserMutation } from '../queries/queries';
class UpdateUserForm extends Component {
state = {
name: '',
age: '',
redirect: false
};
onChangeName = e => {
this.setState({ name: e.target.value });
};
onChangeAge = e => {
this.setState({ age: e.target.value });
};
onSubmitForm = e => {
e.preventDefault();
//console.log(this.state);
this.props.updateUserMutation({
variables: {
id: this.state.id,
name: this.state.name,
age: this.state.age
},
refetchQueries: [ { query: getUsersQuery } ]
});
this.setState({ redirect: true });
};
render() {
const user = this.props.getUsersQuery;
if (this.state.redirect) {
return <Redirect to="/" />;
}
return (
<div id="formContainer">
<form id="form" onSubmit={this.onSubmitForm}>
<div className="field">
<label>Name:</label>
<input
type="text"
onChange={this.onChangeName}
placeholder={user.name}
/>
</div>
<div className="field">
<label>Age:</label>
<input
type="text"
onChange={this.onChangeAge}
placeholder={user.age}
/>
</div>
<button>Update</button>
<Link to="/">Cancel</Link>
</form>
</div>
);
}
}
export default compose(
graphql(getUsersQuery, { name: 'getUsersQuery' }),
graphql(updateUserMutation, { name: 'updateUserMutation' })
)(UpdateUserForm);
Not sure about remove page -- Hoping just simply hit remove button, from list page will fetch specific ID and mutate (remove) user.
Here's the Apollo Client query code called queries.js.
// Fetch Users
const getUsersQuery = gql`
{
users {
name
age
id
}
}
`;
// Update User Mutation
const updateUserMutation = gql`
mutation($id: ID!, $name: String!, $age: Int!) {
updateUser(id: $id, name: $name, age: $age) {
id
name
age
}
}
`;
// Remove User Mutation
const removeUserMutation = gql`
mutation($id: ID!) {
deleteUser(id: $id) {
id
}
}
`;
Thanks in advance...