将 api 连接到 react-native 时出现问题

Question

i was doing a new app with react native i'm using rails/graphql but the problem is when i try to call the api url in my app with the configuration that i've made. it doesnt work at all (lauching expo cli), the error that o get is:

[Error: Network error: Network request failed]

i've already set the ip address of my pc instead of 'localhost' but i dont get any results my code is:

// React
import React from 'react';

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

// Components
import Test from './app/components/Test/index';

import { ApolloProvider } from 'react-apollo'
import { ApolloClient } from 'apollo-client'
import { createHttpLink } from 'apollo-link-http'
import { InMemoryCache } from 'apollo-cache-inmemory'
import { setContext } from 'apollo-link-context';

// 2
const httpLink = createHttpLink({
  uri: 'http://my-ip-address:3000/graphql'
})

// 3
const client = new ApolloClient({
  link: httpLink,
  cache: new InMemoryCache()
})

export default class App extends React.Component {
  render() {
    console.log('client ', client)
    return (
      <ApolloProvider client={client}>
        <Test />
      </ApolloProvider> 
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

the component that is calling the query is:

// React
import React, { Fragment } from 'react';

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

// React Apollo
import { graphql } from 'react-apollo';
import {flowRight as compose} from 'lodash';

 // Queries
 import queries from './queries';

 class Test extends React.Component {
   constructor() {
     super();
   }

   render() {
     console.log('props ', this.props);
     return(
       <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
         <Text>
           Se conecto! 🎉
         </Text>
       </View>
     );
   }
 }


 export default compose(
   graphql(queries.getSpots, { name: 'getSpots' }),
 )(Test);

Answer 1

everything with the configuration was fine, the only thing that was happening was the way to start the rails server with my current version of rails. so instead of start off rails server with "rails s" i had to use "rails -b 0.0.0.0". after that i could connect my app from android emulator to my localhost:3000/graphiql

Answer 2

I didn't read your code but I know problem: go to infor.plist

add (or change key) to react native - ios allow your api url

<key>NSAppTransportSecurity</key>
          <dict>
              <key>NSExceptionDomains</key>
              <dict>
                  <key>Your-API-URL-ROOT-HERE</key>
                  <dict>
                      <!--Include to allow subdomains-->
                      <key>NSIncludesSubdomains</key>
                      <true />
                      <!--Include to allow HTTP requests-->
                      <key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key>
                      <true />
                      <!--Include to specify minimum TLS version-->
                      <key>NSTemporaryExceptionMinimumTLSVersion</key>
                      <string>TLSv1.1</string>
                  </dict>
              </dict>
          </dict>