React-apollo: SyntaxError: Unexpected end of JSON input with React Native

[lyquocnam]

here my code

import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  View
} from 'react-native';

import { 
    createNetworkInterface,
    ApolloClient,
    ApolloProvider,
    gql,
    graphql
} from 'react-apollo';

//import { createNetworkInterface } from 'apollo-client';
const networkInterface = createNetworkInterface({
  uri: 'http://localhost:3000/graphql'
});

var client = new ApolloClient({ networkInterface });


class Main extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native! 3
        </Text>
        <Text style={styles.instructions}>
          To get started, edit index.android.js
        </Text>
        <Text style={styles.instructions}>
          Double tap R on your keyboard to reload,{'\n'}
          Shake or press menu button for dev menu
        </Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

const query = gql`query {
    danhSachDichVu {
        Name
    }
}`;

const Container = graphql(query)(Main);

const App = () => (
  <ApolloProvider client={client}>
    <Container />
  </ApolloProvider>
)

export default App;

and error Stack

SyntaxError: Unexpected end of JSON input
    at parse (native)
    at process._tickCallback (internal/process/next_tick.js:109:7)
{ Error: write EPIPE
    at exports._errnoException (util.js:1018:11)
    at Socket._writeGeneric (net.js:715:26)
    at Socket._write (net.js:734:8)
    at doWrite (_stream_writable.js:334:12)
    at writeOrBuffer (_stream_writable.js:320:5)
    at Socket.Writable.write (_stream_writable.js:247:11)
    at Socket.write (net.js:661:40)
    at Socket.Writable.end (_stream_writable.js:480:10)
    at Socket.end (net.js:431:31)
    at Promise.resolve.then.then.then.catch.then.message (D:\dev\react-native\myApp\node_modules\react-native\packager\src\Server\symbolicate\worker.js:35:33) code: 'EPIPE', errno: 'EPIPE', syscall: 'write' }

More info

this only happen on android, ios this not happen

MY PROJECT
https://github.com/lyquocnam/react-native-demo

[timkendall]

Happening on iOS too for me :/ Note: this error seems to disappear when running the app's JavaScript remotely in a browser. Going to investigate further.

[helfer]

Thanks for reporting the issue @lyquocnam. Could you provide more information on when it happens, or maybe even provide a reproduction?

[lyquocnam]

@helfer it happen when try to load data from graphql server
my project: https://github.com/lyquocnam/react-native-demo/blob/master/src/App.js

[tudor2it]

It happened to me too. I had to recheck my code and to pay much attention to the components names used in my application. Instead of writing the correct name StackNavigator in import { StackNavigator } from 'react-navigation'; I wrote StackNavigation. After this fix it worked fine.

[jbaxleyiii]

This is most likely a network error or as @tudor2it noted, a bundler issue. Closing for now as we don't parse JSON in react-apollo at all

[stantoncbradley]

I get this error as well. I am able to dismiss it (locally) and everything has loaded correctly

[reactionic127]

@stantoncbradley
did you fixed this error at all?

[stantoncbradley]

@reactionic127 I forget why this was happening. I do know we get this error when we receive html back, which we get from our server when we aren't authenticated

[HamidReazaNikoonia]

### is it any News about This ISSUE ??

i have same Error , to

|| ReactNative => 0.55.4 ||
|| Platform => Android ||

this error happen when i want get Query
my error details is =>

   Error: Network error: Unexpected end of JSON input
    at  new ApolloError (blob:file:///66ddafa5-4bf7-4771-ba1a-78873fb07bc5:78643)
    at ObservableQuery.currentResult (blob:file:///66ddafa5-4bf7-4771-ba1a-78873fb07bc5:78779)
    at Query._this.getQueryResult (blob:file:///66ddafa5-4bf7-4771-ba1a-78873fb07bc5:89669)
    at Query.render (blob:file:///66ddafa5-4bf7-4771-ba1a-78873fb07bc5:89810)
    at finishClassComponent (blob:file:///66ddafa5-4bf7-4771-ba1a-78873fb07bc5:9687)
    at updateClassComponent (blob:file:///66ddafa5-4bf7-4771-ba1a-78873fb07bc5:9663)
    at beginWork (blob:file:///66ddafa5-4bf7-4771-ba1a-78873fb07bc5:10169)
    at performUnitOfWork (blob:file:///66ddafa5-4bf7-4771-ba1a-78873fb07bc5:12839)
    at workLoop (blob:file:///66ddafa5-4bf7-4771-ba1a-78873fb07bc5:12863)
    at renderRoot (blob:file:///66ddafa5-4bf7-4771-ba1a-78873fb07bc5:12889)

can any body help me !? plz

i think Maybe , when i am sign out from my application , this happening

i use Apollo for Authentication with Apollo Like this

const httpLink = new HttpLink({ uri: 'http://2.179.166.193:8000/basalam_api/api/user' });
const authLink = setContext(async (req, { headers }) => {

// get Token
// const token_ = '';

  try {
       const token_ = await AsyncStorage.getItem('@Auth::Token');
       if (token_ !== null) {
          console.log(token_);
   }
    } catch (error) {
         console.log(error);
         const token_ = '';
    }


    return {
      ...headers,
        headers: {
           authorization: token_ ? `Bearer ${token_}` : null,
       },
    };
   });

    const link = authLink.concat(httpLink);



   const client = new ApolloClient({
     link,
    cache: new InMemoryCache(),
    defaultOptions
 });

[HamidReazaNikoonia]

i also have this ISSUE in Mutation

Error: Network error: Unexpected end of JSON input
 at new ApolloError (blob:file:///0ecdb516-c61a-41fa-bc73-8755d17552df:78643)
 at Object.error (blob:file:///0ecdb516-c61a-41fa-bc73-8755d17552df:79565)
 at notifySubscription (blob:file:///0ecdb516-c61a-41fa-bc73-8755d17552df:82269)
 at onNotify (blob:file:///0ecdb516-c61a-41fa-bc73-8755d17552df:82308)
 at SubscriptionObserver.error (blob:file:///0ecdb516-c61a-41fa-bc73-8755d17552df:82363)
 at notifySubscription (blob:file:///0ecdb516-c61a-41fa-bc73-8755d17552df:82269)
 at onNotify (blob:file:///0ecdb516-c61a-41fa-bc73-8755d17552df:82308)
 at SubscriptionObserver.error (blob:file:///0ecdb516-c61a-41fa-bc73-8755d17552df:82363)
 at blob:file:///0ecdb516-c61a-41fa-bc73-8755d17552df:86168
 at tryCallOne (blob:file:///0ecdb516-c61a-41fa-bc73-8755d17552df:16058)

and

error.graphQLErrors == [ ] ( return empty Array )

[HamidReazaNikoonia]

@helfer hi my friend , i am follow you in Medium and i know you are Perfect 👍 👍 🥇 , please HELP ME , tomorrow i must release my APP , and i am relay and trust APOLLO

[stantoncbradley]

running to this issue again on android (haven't tried ios yet) after upgrading to react-native 0.56. Everything was working fine before, and no other related changes were made:

"apollo-cache-inmemory": "1.1.10",
"apollo-client": "2.2.6",
"apollo-link-error": "1.0.7",
"apollo-link-http": "1.5.3",
"react-native": "0.56.0",
"react": "16.4.1",

still digging...

[peterschriever]

I had this issue. I was using apollo-link-http to create a HttpLink, and because I also had a CORS issue, I set fetchOptions: { mode: 'no-cors' }. However, no-cors causes javascript to be inable to read the response data. See: https://stackoverflow.com/a/43319482. Eventually I fixed it by configuring my backend to include a Access-Control-Allow-Origin: * header.

So check your fetchOptions and fetch library maybe

[konradZawodnik]

I try to implement apollo client by using graphql

client.query({
query: gql { articles(t: Gallery) { id url title } } ,
})
.then(data => console.log(data))
.catch(error => console.error(error));

What is wrong in this query. I' ve got error Unexpected end of JSON input.