react-native - React Native [网络错误] : TypeError: Network request failed using Apollo Client

标签 react-native expo react-apollo apollo-client

我只想使用 React Native 和 Expo 连接到本地主机上的 Apollo 服务器。

如果我尝试使用以下API链接https://q815p14lp.lp.gql.zone/graphql它工作正常。但是,如果我尝试使用 http://127.0.0.1:8080/graphqlhttp://localhost:8080/graphql 我收到以下错误: [网络错误]:TypeError:网络请求失败

这是我尝试连接的代码。

const httpLink = new HttpLink({ uri: 'http://127.0.0.1:8080/graphql' });

const authLink = setContext(async (_, { headers }) => {
  const token = await getToken();

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

const errorLink = onError(({ networkError, graphQLErrors }) => {
  if (graphQLErrors)
    graphQLErrors.map(({ message, locations, path }) =>
      console.log(
        `[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`
      )
    );
  if (networkError) console.log(`[Network error]: ${networkError}`);
})

const client = new ApolloClient({
  link: ApolloLink.from([errorLink, authLink, httpLink]),
  cache: new InMemoryCache()
});

"apollo-boost": "^0.1.18",
"apollo-link-context": "^1.0.9",
"apollo-link-error": "^1.1.1",
"expo": "^30.0.1",
"react-apollo": "^2.2.4",

知道我做错了什么吗?

最佳答案

主机*.lp.gql.zone是一个Launchpad graphql服务器。因此,您的服务器运行在 Launchpad 上,而不是本地计算机上。

使用 Expo 连接到本地计算机也没有多大意义。在本例中,“localhost”是运行应用程序的电话设备。

我猜你真正想要的是设备上的 Expo 应用程序连接到你的 mac/pc 上的开发 graphql 服务器?在这种情况下,您应该使用在调试 View 中看到的 IP 地址:

enter image description here

在这种情况下,您的连接网址将变为:http://10.10.9.70:8080/graphql

关于react-native - React Native [网络错误] : TypeError: Network request failed using Apollo Client,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53053969/

相关文章:

react-native - 我可以在 React Native 中使用纯 CSS3 动画吗?

ios - Expo 应用因 WebView 和用户字体的无效二进制文件而被拒绝

javascript - 不使用 refetchQueries 更新 Apollo GraphQL 缓存?

javascript - React - 错误 : App(. ..) : Nothing was returned from render. 这通常意味着缺少 return 语句。或者,不渲染任何内容,返回 null

javascript - 如何将两个依赖的 GraphQL 查询与 'compose' 结合起来?

javascript - Linter 提示 React Native Hook 中的依赖项数组为空

javascript - 如何在 React Native 中调用父方法的子方法?

react-native - null 不是 Cameraroll 中的对象(评估 '_nativeInterface.default.getPhotos')

javascript - 在 react-native (expo) 上禁用原生抖动效果

react-native - 调用后无法清除 AbortController.abort()