Uncaught (в обещании) Ошибка: ошибка сети: неожиданный токен <в JSON в позиции 3

Question

Я только учусь реагировать Аполлон. Я нашел эту ошибку трудно отладить. Конечно, у меня есть поиск по нескольким постам блога, сайтам вопросов и ответов и пробую несколько из них. Никто не работает. На самом деле, я хочу передать значение параметру в GraphQL метод Mutation (его значение является объектом). Вот мой исходный код

const client = new ApolloClient({
  uri: "www.example.com"
});

const ADD_PARTNER = gql`
    mutation LE($input: inputPartner!) { 
        le_addpartner(input: $input) {
            result {
                code
                message
                success
            }
            partnerID
        }
    }
`;

class AddTodo extends React.Component {
    state = {
        name: '',
        nameSlug: '',
        bankLogo: null,
        phoneNumber: '',
        companyProfile: '',
        metaDescription: '',
        metaTitle: '',
        formSchema: ''
    }

    handleValueChange = (e) => {
        this.setState({
            [e.target.id]: e.target.value
        })
    }

    render () {
        return (
            <Mutation mutation={ADD_PARTNER}>
                {(le_addpartner, { data }) => (
                    <form
                        onSubmit={e => {
                            e.preventDefault();
                            le_addpartner({ 
                                variables: { 
                                        input: {...this.state}
                                } 
                            })
                        }}
                    >
                        <div className="form-group">
                            <label htmlFor="name">Name</label>
                            <input type="text" className="form-control" id="name" onChange={(e) => this.handleValueChange(e)} />
                        </div>
                        <div className="form-group">
                            <label htmlFor="nameSlug">Name Slug</label>
                            <input type="text" className="form-control" id="nameSlug" onChange={(e) => this.handleValueChange(e)} />
                        </div>
                        <div className="form-group">
                            <label htmlFor="bankLogo">Bank Logo</label>
                            <input type="text" className="form-control" id="bankLogo" onChange={(e) => this.handleValueChange(e)} />
                        </div>
                        <div className="form-group">
                            <label htmlFor="phoneNumber">Phone Number</label>
                            <input type="text" className="form-control" id="phoneNumber" onChange={(e) => this.handleValueChange(e)} />
                        </div>
                        <div className="form-group">
                            <label htmlFor="companyProfile">Company Profile</label>
                            <textarea className="form-control" id="companyProfile" rows="3" onChange={(e) => this.handleValueChange(e)}></textarea>
                        </div>
                        <div className="form-group">
                            <label htmlFor="metaDescription">Meta Description</label>
                            <textarea className="form-control" id="metaDescription" rows="3" onChange={(e) => this.handleValueChange(e)}></textarea>
                        </div>
                        <div className="form-group">
                            <label htmlFor="metaTitle">Meta Title</label>
                            <textarea className="form-control" id="metaTitle" rows="3" onChange={(e) => this.handleValueChange(e)}></textarea>
                        </div>
                        <div className="form-group">
                            <label htmlFor="formSchema">Form Schema</label>
                            <textarea className="form-control" id="formSchema" rows="4" onChange={(e) => this.handleValueChange(e)}></textarea>
                        </div>
                        <button type="submit" className="btn btn-primary">Add Partner</button>
                    </form>
                )}
            </Mutation>
        )
    }
}

const App = () => (
  <ApolloProvider client={client}>
    <div style={{ marginTop: '50px' }}>
      <h2>
          GraphQL Mutation Partner{' '}
          <span aria-labelledby='jsx-a11y/accessible-emoji' role='img'>?</span>
      </h2>
      <AddTodo />
    </div>
  </ApolloProvider>
);

Ошибка, которую я получил при отправке формы:

[Сетевая ошибка]: SyntaxError: неожиданный токен <в JSON в позиции 3 ApolloError.js: 37 Uncaught (в обещании) Ошибка: ошибка сети: Неожиданный токен <в JSON в позиции 3 на новом ApolloError (ApolloError.js: 37) в Object.error (QueryManager.js: 212) на notifySubscription (Observable.js: 130) в onNotify (Observable.js: 161) в SubscriptionObserver.error (Observable.js: 220) в Object.error (index.js: 55) на notifySubscription (Observable.js: 130) в onNotify (Observable.js: 161) в SubscriptionObserver.error (Observable.js: 220) на httpLink.js: 134 </p>

Буду признателен за любую помощь: D

Answer 1

Вам нужно отловить ошибки для вашей обещанной мутации. Итак, в вашем случае:

le_addpartner({ 
    variables: { 
        input: {...this.state}
    } 
}).catch((res) => {
    const errors = res.graphQLErrors.map((error) => {
        return error.message;
    });
    this.setState({ errors });
});

Answer 2

Используйте вкладку Сеть Chrome DevTools (существуют другие браузеры), чтобы определить, какой фактический ответ был от сервера; это должно сделать ошибку намного яснее.

Для этого:

1. Откройте Chrome DevTools, перейдя в меню гамбургеров, «Дополнительные инструменты», «Инструменты разработчика»
2. Перезагрузить страницу
3. Запустить выборку сети
4. Перейти на вкладку «Сеть» инструментов разработчика
5. Выберите соответствующий сетевой запрос (он должен быть внизу или ниже; вы можете фильтровать по XHR, чтобы сделать его более понятным, если хотите)
6. Перейдите на вкладку «Ответ», чтобы увидеть, что отправил сервер (вкладка «Предварительный просмотр» также может быть удобна, поскольку форматирует ответ более читабельным образом)

Я предполагаю, что сервер отправил вам обратно какой-то HTML-код, а не тот JSON, которого ожидал Аполлон.

Если из-за этого ошибка не исчезнет, ​​опубликуйте результаты ответа, чтобы добавить больше информации к вашему вопросу, чтобы помочь другим ответить.

Удачи!