我正在使用@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 服务器,没有配置机架式芯。
在修复了后端之后,我还将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',
}