Блог

Распознаватель отлично работает, когда я использую его с игровой площадки. Но когда я отправляю значения от клиента в распознаватель, значения каким-то образом отображаются «неопределенными» в распознавателе.

Клиент:

 import React, { useState } from 'react';
import { useQuery, useMutation } from '@apollo/react-hooks';
import { Form, Grid } from 'semantic-ui-react';
import gql from 'graphql-tag';

function TestPage() {
    const userId = "5fa2c177382ce83660b3911b";

    const { loading, data: { getUser } = {} } = useQuery( FETCH_USER_QUERY, {
        variables: {
          userId
        }
    });

    const [values, setValues] = useState({
        countryInput: '',
        descriptionInput: ''
    })

    const onChange = (event) => {
        setValues({ ...values, [event.target.name]: event.target.value});
    }

    const [updateCountry] = useMutation(UPDATE_COUNTRY_MUTATION, {
        variables: {
        userId, 
        values 
        }
    })
    
    const submit = (event) => {
        event.preventDefault();
        updateCountry()
    }

    console.log(values)

      let TestPage;
      if(loading){
        TestPage = (<p>Page Loading...</p>)
      } else {
        const {
            username,
            country,
            description
        } = getUser;

        TestPage = (
            <Grid columns={1}>
            <Grid.Row className="profile-name">
                <h1>Test Page</h1>
                <h4>This page is for testing code</h4>
                <h4>User: {username}</h4>
            </Grid.Row>
            <Grid.Row className="profile-name">
                <h1>Country: {country}</h1>
                <h1>Desc: {description}</h1>
            </Grid.Row>
            <Grid.Row>
                <Form>
                    <input
                    style={{ marginBottom: 10 }}
                    placeholder="Country"
                    type="text"
                    name="countryInput"
                    value={values.countryInput}
                    onChange={onChange}
                    />

                    <input
                    style={{ marginBottom: 10 }}
                    placeholder="Description"
                    type="text"
                    name="descriptionInput"
                    value={values.descriptionInput}
                    onChange={onChange}
                    />

                    <button 
                    onClick={submit}
                    className="ui button red"
                    color="red"
                    >
                        Save
                    </button>
                </Form>

            </Grid.Row>
        </Grid>
        )
      }

    return TestPage;
}
 

Мутация (в том же файле, что и клиент):

 const UPDATE_COUNTRY_MUTATION = gql `
    mutation UpdateCountry( 
        $userId: ID!, 
        $countryInput: String, 
        $descriptionInput: String ){
        updateCountry(
            userId: $userId, 
            countryInput: $countryInput
            descriptionInput: $descriptionInput
        ){
            username
            country
            description
        }
    }
`;
 

Раньше я получал «Необработанное отклонение (ошибка): ошибка сети: ответ не удался: получен код состояния 400», но теперь он просто возвращает нули в БД.

Я предполагаю, что проблема заключалась в мутации, я изменил ее с использования «ввода» на просто ввод переменных, но не работает.

Я поискал в Google и попробовал разные способы выполнения обратных вызовов и перехватов, но я получаю необработанную ошибку отклонения, и когда она работает, значения отображаются неопределенными.

Как значение может быть определено при отправке в клиенте, но отображаться неопределенным в распознавателе? Что я делаю не так?

«… значения» вместо «значений» в useMutation:

 const [updateCountry] = useMutation(UPDATE_COUNTRY_MUTATION, {
    variables: {
       userId, 
       ...values 
       }
    })