React, Apollo - Обновление и удаление проблем с мутациями

Question

Я сейчас работаю и изучаю мутацию "CRUD" с GraphQL. Использование Apollo Client и React для управления мутацией на внешнем интерфейсе. Использование Express / mongoose в качестве сервера для запуска сервера и извлечения / хранения данных из локальной базы данных.

Работа / Тестирование с GraphQL (Middle / Back-end). Я могу получать и изменять (создавать, обновлять и удалять) данные с локального сервера (mongodb) с помощью инструмента localhost: 4000 / graphiql.

Вот схема мутации ...

    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;
            }
        }
    }
});

Теперь в части Front-End с использованием React и Apollo Client получение данных и рендеринг карты итераций были успешными!

Я также использую реагирующий маршрутизатор для перехода по страницам. При нажатии на кнопку «Добавить» из списка пользователей, это приведет меня к странице формы, чтобы заполнить имя пользователя и возраст. После завершения он отправит и перенаправит (метод перенаправления по реакции на маршрутизатор) обратно на страницу списка с вновь созданным пользователем в список (refetch). Этот процесс также был успешным для меня!

Что касается обновления (редактирования) или удаления (удаления), это было неудачно. У меня несколько проблем ... Невозможно обновить (отредактировать) пользователя

Я предполагаю ... Похоже, что это связано с невозможностью получить конкретный идентификатор после нажатия кнопки «Изменить», или это может быть какая-то противоречивая проблема между получением и реакцией-маршрутизатором? Столько, сколько я пытался найти решения, у меня закончились идеи. Так что я надеялся, что смогу воспользоваться вашей помощью, чтобы решить, с чем я столкнулся.

Если это поможет ... Вот синтаксис React-Apollo под названием List.js - здесь отображается список пользователей, включая кнопку «Редактировать и удалить» (неудачные попытки)

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);

UpdateForm.js - синтаксис, отображающий форму обновления. Но не удалось изменить его. возможность извлечения вопросов?

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);

Не уверен насчет удаления страницы. Надеясь, просто нажмите кнопку «Удалить», со страницы списка получите определенный идентификатор и измените (удалите) пользователя.

Вот код запроса клиента Apollo, который называется query.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
        }
    }
`;

Заранее спасибо ...