apollo graphql мутация - неожиданный конец ввода JSON - PullRequest
Новая
       9

apollo graphql мутация - неожиданный конец ввода JSON

3 голосов
/ 13 февраля 2020

Я делаю простой тест с @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 Ответ

0 голосов
/ 13 февраля 2020

В коде нет ничего плохого, это был бэкэнд, у которого не было конфигурации 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',
}
...