react-apollo is not connecting to my graphql local server

Question

I've been trying to connect to my local GraphQL server using Apollo. Below is my attempt using react-apollo2.0. But I have also tried with react-apollo1.4 with createNetworkInterface, but I am getting the same error.

import { graphql } from 'react-apollo';
import gql from 'graphql-tag';
import { AppRegistry } from 'react-native';
import { HttpLink } from 'apollo-link-http';
import { InMemoryCache } from 'apollo-cache-inmemory';
import { ApolloClient } from 'apollo-client';
import { ApolloProvider } from 'react-apollo';

const client = new ApolloClient({
  link: new HttpLink({ uri: 'http://localhost:8000/graphql' }),
  cache: new InMemoryCache()
});

function FooList({ data: { loading, posts } }) {
  if (loading) {
    return <Text>Loading</Text>;
  } else {
      return (
        <List>
          <ListItem>
            <Left>
                <Text>John Doe5</Text>
                <Text note>(buyer)</Text>
            </Left>
            <Right>
                <Text note>21 min ago</Text>
            </Right>
          </ListItem>
        </List>
      );
  }
}

export default graphql(gql`
  query allLeads {
    id
    name
  }
`)(FooList);

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

export default App;

Error I'm getting:

My dependencies.

  "dependencies": {
    "@expo/vector-icons": "^6.2.0",
    "apollo-client-preset": "^1.0.4",
    "expo": "^22.0.2",
    "graphql": "^0.11.7",
    "graphql-tag": "^2.6.0",
    "native-base": "^2.3.3",
    "react": "16.0.0-beta.5",
    "react-apollo": "^2.0.4",
    "react-link": "^1.0.3",
    "react-native": "^0.49.5",
    "react-navigation": "^1.0.0-beta.21"
  }

According to the docs this is how you are supposed to set it up. My server isn't being hit and I can access the graph browser at http://localhost:8000/graphql just fine.

What am I missing here?

Is your server at the same project that your mobile project? — Alessander França
Try using your local ip adress like 192.168.1.4 instead of 'localhost' — Dyo
@Dyo: Same error. Used my IP address which is 192.168.1.4. Docs say to use localhost as well. — dan-klasson
Do you see more info about the error in console ? Or try this : function FooList({ data: { error, loading, posts } }) { if (error) { return <Text>{error.message}</Text>; } — Dyo

Dyo Dyo · Accepted Answer · 2017-12-13T11:17:44

From Android docs :

Each instance of the emulator runs behind a virtual router/firewall service that isolates it from your development machine network interfaces and settings and from the internet. An emulated device can't see your development machine or other emulator instances on the network. Instead, it sees only that it is connected through Ethernet to a router/firewall.

The virtual router for each instance manages the 10.0.2/24 network address space — all addresses managed by the router are in the form of 10.0.2.xx, where xx is a number. Addresses within this space are pre-allocated by the emulator/router as follows:

10.0.2.1 Router/gateway address

10.0.2.2 Special alias to your host loopback interface (i.e., 127.0.0.1 on your development machine)

10.0.2.3 First DNS server

10.0.2.4 / 10.0.2.5 / 10.0.2.6 Optional second, third and fourth DNS server (if any)

10.0.2.15 The emulated device network/ethernet interface

127.0.0.1 The emulated device loopback interface

Note that this virtual router is used by AVD emulator only, it may be different for other emulators

react-apollo is not connecting to my graphql local server

2 Answers