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未捕获（承诺）错误：网络错误： 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

任何帮助将不胜感激：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（存在其他浏览器）的“网络”标签确定来自服务器的实际响应；这应该使错误更加清楚。

要这样做：

通过转到汉堡菜单，“更多工具”，“开发人员工具”来打开Chrome DevTools
重新加载页面
触发网络获取发生
转到开发人员工具的“网络”标签
选择相关的网络请求（应该在底部/附近；您可以按XHR进行过滤，以使其更明显）
转到“响应”选项卡查看服务器发送的内容（“预览”选项卡也很方便，因为它以更易读的方式设置响应的格式）

我猜测服务器已经向您发送了一些HTML，这不是Apollo期望的JSON。

如果仍不能清除错误，请发布响应结果，以向问题中添加更多信息，以帮助其他人回答。

祝你好运！

未捕获（承诺）错误：网络错误：JSON中位置3处的意外令牌<

2 个答案: