Search code examples
reactjsreact-nativereact-native-ios

How solve react native tls/ssl network error?

I use graphql server(in graphql-yoga library).

and I apply the certificate created by the openssl command to the 'https' option.

then I connect graphql-playground through pc chrome browser with using 'https' protocol.

It worked fine.

but It not worked in apps made with react-native.

It use apollo client in apollo-boost library.

and I apply testServer address 'https://192.168.0.4:4001' in ApolloClient constructor option uri field.

Once again app give me Network Error!

 WARN  Possible Unhandled Promise Rejection (id: 1):
Error: Network error: Network request failed
ApolloError@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:102209:32
http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:103704:51
http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:104124:25
forEach@[native code]
http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:104122:35
forEach@[native code]
broadcastQueries@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:104120:29
http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:103599:47
tryCallOne@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:27024:16
http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:27125:27
_callTimer@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:30579:17
_callImmediatesPass@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:30615:19
callImmediates@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:30834:33
callImmediates@[native code]
__callImmediates@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:2591:35
http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:2368:34
__guard@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:2574:15
flushedQueue@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:2367:21
flushedQueue@[native code]
callFunctionReturnFlushedQueue@[native code]

Please let me know solution about this problem.

Solution

  • yeah, I solved my problem myself.

    In my case, it must check two thing.

    First, You must use a authorized certification not a self sign certification.

    (I think React Native force to use a authorized certification.)

    (so I used a certification made by 'Let`s encrypt')

    Second, You must record 'ca' option(field) in 'httpsOption' object(in any graphQLServer).

    In my case, I not record 'ca' option.

    so I record 'ca' option, 'ca'file path and it works fine.

    (It must record key, cert and ca option in 'httpsOption')

    I find causation using axios.

    I wrote the graphQL query and sent it using axios.

    axios kindly reports the error. Unlike apolloClient.

    ...from Republic of Korea.