apollo graphql 突变 - JSON 输入意外结束

Posted 2023-03-08

【中文标题】apollo graphql 突变 - JSON 输入意外结束

【英文标题】：apollo graphql mutation - Unexpected end of JSON input

【发布时间】：2020-05-29 09:28:01

【问题描述】：

我正在使用 @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;

我不知道为什么会出现此错误。

【参考方案1】：

代码没有问题，是后端没有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;

删除了fetchOptionsmode: 'no-cors'：

fetchOptions: 
   mode: 'no-cors',