![](/img/trans.png)
[英]Object as input variable in mutation: GraphQL - Apollo - React
[英]apollo graphql mutation - Unexpected end of JSON input
我正在用@apollo/react-hooks
做一个简单的测试,我收到了这个错误:
ApolloError.ts:46 Uncaught (in promise) Error: Network error: Unexpected end of JSON input
at new ApolloError (ApolloError.ts:46)
at Object.error (QueryManager.ts:255)
at notifySubscription (Observable.js:140)
at onNotify (Observable.js:179)
at SubscriptionObserver.error (Observable.js:240)
at observables.ts:15
at Set.forEach (<anonymous>)
at Object.error (observables.ts:15)
at notifySubscription (Observable.js:140)
at onNotify (Observable.js:179)
at SubscriptionObserver.error (Observable.js:240)
at Object.error (index.ts:81)
at notifySubscription (Observable.js:140)
at onNotify (Observable.js:179)
at SubscriptionObserver.error (Observable.js:240)
at httpLink.ts:184
当我尝试使用这样的突变时:
import React from 'react';
import { Button } from 'antd';
import { gql } from 'apollo-boost';
import { useMutation } from '@apollo/react-hooks';
const LOGIN = gql`
mutation authentication($accessToken: String!) {
login(accessToken: $accessToken) {
id
name
email
groups
}
}
`;
function Authenticating() {
const [login] = useMutation(LOGIN);
function handleClick() {
const variables = { variables: { accessToken: 'access_token_here' } };
azureLogin(variables).then(data => {
console.log(data);
}).catch(err => {
console.log(err)
});
}
return (
<Button onClick={handleClick}>Test</Button>
);
}
export default Authenticating;
我的 Apollo 客户端如下所示:
import ApolloClient from 'apollo-boost';
const client = new ApolloClient({
uri: <graphql_server>,
fetchOptions: {
mode: 'no-cors',
},
headers: {
'Content-Type': 'application/json',
'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Credentials': true,
},
fetch,
});
export default client;
Authenticating
组件由ApolloProvider
包装。
import React from 'react';
import { ApolloProvider } from '@apollo/react-hooks';
import Authenticating from './Authenticating';
import apolloClient from './apolloClient';
const App = () => {
<ApolloProvider client={apolloClient}>
<Authenticating/>
</ApolloProvider>
}
export default App;
我不知道为什么会收到此错误。
代码没有问题,是后端没有配置CORS。
这是一个 ruby 服务器,并且没有配置rack-cors。
在后端修复后,我也将 apollo 客户端更改为:
import ApolloClient from 'apollo-boost';
const client = new ApolloClient({
uri: <graphql_server>,
headers: {
'Content-Type': 'application/json',
'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Credentials': true,
},
fetch,
});
export default client;
删除了fetchOptions
mode: 'no-cors'
:
fetchOptions: {
mode: 'no-cors',
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.