我正在使用 @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
模式:'no-cors'
:
fetchOptions: {
mode: 'no-cors',
}
关于javascript - apollo graphql 突变 - JSON 输入意外结束,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60211779/