Javascript 反应本机Apollo错误：网络请求失败

我已经在GraphQL游乐场上测试了我的查询，它运行良好。但是当我试图从客户端获取数据时，我得到了一个“网络请求失败”错误。 请帮忙

以下是我在React Native上的代码：

import React from "react";
import { Button, View, Text, TextInput } from "react-native";
import { ApolloProvider } from "@apollo/client";
import { ApolloClient, HttpLink, InMemoryCache } from "@apollo/client";
import gql from "graphql-tag";
import { useQuery } from "@apollo/client";

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

function App() {
    return (
        <ApolloProvider client={client}>
            <TestComp />
        </ApolloProvider>
    );
}

const testQuery = gql`
    {
        getPosts {
            username
        }
    }
`;

const TestComp = () => {
    const { loading, error, data } = useQuery(testQuery);
    if (loading) {
        return (
            <View style={{ flex: 1, justifyContent: "center",  alignItems: "center", }} >
                <Text>Loading</Text>
            </View>
        );
    } else if (error) {
        return (
            <View>
                {console.log(error)}
                <Text>Error</Text>
            </View>
        );
    } else {
        console.log(data);
    }
};

export default App;

从“React”导入React；
从“react native”导入{按钮、视图、文本、文本输入}；
从“@apollo/client”导入{apollo provider}”；
从“@apollo/client”导入{apollo客户端，HttpLink，InMemoryCache}；
从“graphql标签”导入gql；
从“@apollo/client”导入{useQuery}；
const客户端=新客户端({
链接：新的HttpLink({
uri:“http://localhost:5000/graphql",
}),
缓存：新的InMemoryCache（），
});
函数App（）{
返回(
);
}
const testQuery=gql`
{
getPosts{
用户名
}
}
`;
常量TestComp=（）=>{
const{loading，error，data}=useQuery（testQuery）；
如果（装载）{
返回(
加载
);
}else if（错误）{
返回(
{console.log（错误）}
错误
);
}否则{
控制台日志（数据）；
}
};
导出默认应用程序；

这就是我得到的错误：

Network request failed
* http://172.20.10.2:19001/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false&minify=false:172013:29 in ApolloError
- node_modules/@apollo/client/core/core.cjs.js:1461:35 in utilities.asyncMap$argument_2
- node_modules/@apollo/client/utilities/utilities.cjs.js:957:42 in Promise$argument_0
- node_modules/react-native/node_modules/promise/setimmediate/core.js:45:6 in tryCallTwo
- node_modules/react-native/node_modules/promise/setimmediate/core.js:200:22 in doResolve
- node_modules/react-native/node_modules/promise/setimmediate/core.js:66:11 in Promise
- node_modules/@apollo/client/utilities/utilities.cjs.js:956:22 in <anonymous>
- node_modules/zen-observable/lib/Observable.js:139:8 in notifySubscription
* http://172.20.10.2:19001/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false&minify=false:151811:22 in onNotify
- node_modules/zen-observable/lib/Observable.js:239:11 in error
* [native code]:null in forEach
- node_modules/@apollo/client/utilities/utilities.cjs.js:944:4 in iterateObserversSafely
* http://172.20.10.2:19001/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false&minify=false:171414:34 in error
- node_modules/zen-observable/lib/Observable.js:139:8 in notifySubscription
* http://172.20.10.2:19001/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false&minify=false:151811:22 in onNotify
- node_modules/zen-observable/lib/Observable.js:239:11 in error
* http://172.20.10.2:19001/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false&minify=false:171934:24 in <unknown>
- node_modules/react-native/node_modules/promise/setimmediate/core.js:37:13 in tryCallOne
- node_modules/react-native/node_modules/promise/setimmediate/core.js:123:24 in setImmediate$argument_0
- node_modules/react-native/Libraries/Core/Timers/JSTimers.js:130:14 in _callTimer
- node_modules/react-native/Libraries/Core/Timers/JSTimers.js:181:14 in _callImmediatesPass
- node_modules/react-native/Libraries/Core/Timers/JSTimers.js:441:30 in callImmediates
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:387:6 in __callImmediates
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:135:6 in __guard$argument_0
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:364:10 in __guard
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:134:4 in flushedQueue
* [native code]:null in flushedQueue
* [native code]:null in callFunctionReturnFlushedQueue

网络请求失败
* http://172.20.10.2:19001/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false&minify=false:172013:29 错误地
-utilities.asyncMap$argument_2中的node_modules/@apollo/client/core/core.cjs:1461:35
-Promise$argument\u 0中的node_modules/@apollo/client/utilities/utilities.cjs:957:42
-tryCallTwo中的node_modules/react native/node_modules/promise/setimmediate/core.js:45:6
-doResolve中的node_modules/react native/node_modules/promise/setimmediate/core.js:200:22
-node_modules/react native/node_modules/promise/setimmediate/core.js:66:11 in promise
-node_modules/@apollo/client/utilities/utilities.cjs:956:22 in
-notifySubscription中的node_modules/zen observable/lib/observable.js:139:8
* http://172.20.10.2:19001/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false&minify=false:151811:22 立即通知
-node_modules/zen observable/lib/observable.js:239:11出错
*[本机代码]：forEach中为null
-iterateObserversSafely中的node_modules/@apollo/client/utilities/utilities.cjs:944:4
* http://172.20.10.2:19001/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false&minify=false:171414:34 错误地
-notifySubscription中的node_modules/zen observable/lib/observable.js:139:8
* http://172.20.10.2:19001/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false&minify=false:151811:22 立即通知
-node_modules/zen observable/lib/observable.js:239:11出错
* http://172.20.10.2:19001/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false&minify=false:171934:24 在里面
-tryCallOne中的node_modules/react native/node_modules/promise/setimmediate/core.js:37:13
-setimmediate$argument\0中的node_modules/react native/node_modules/promise/setimmediate/core.js:123:24
-node_modules/react native/Libraries/Core/Timers/JSTimers.js:130:14 in_callTimer
-CallimmediatePass中的node_modules/react native/Libraries/Core/Timers/JSTimers.js:181:14
-callImmediates中的node_modules/react native/Libraries/Core/Timers/JSTimers.js:441:30
-callImmediates中的node_modules/react native/Libraries/BatchedBridge/MessageQueue.js:387:6
-node_modules/react native/Libraries/BatchedBridge/MessageQueue.js:135:6 in_uuu-guard$argument_0
-保护中的node_modules/react native/Libraries/BatchedBridge/MessageQueue.js:364:10
-flushedQueue中的node_modules/react native/Libraries/BatchedBridge/MessageQueue.js:134:4
*[本机代码]：flushedQueue中为null
*[本机代码]：callFunctionReturnFlushedQueue中为null

这就是我在终端上遇到的错误。

---

堆栈溢出说我必须添加更多的文本来发布这个问题，所以我现在添加更多的文本，这是毫无意义的。很抱歉。

除非您在运行此代码的移动设备上运行web服务器，否则不应使用

localhost

作为服务器地址。除非您在运行此代码的移动设备上运行web服务器，否则不应使用

localhost

作为服务器地址。