未处理的网络错误401当使用Apollo in react native＆amp;空的graphql响应

Question

我正在使用create-react-native-app cli构建一个react-native应用 这是我正在使用的包。所有最新的稳定除了纤维 "dependencies": { "apollo-cache-inmemory": "^1.0.0", "apollo-client": "^2.0.1", "apollo-link": "^1.0.0", "apollo-link-error": "^1.0.0", "apollo-link-http": "^1.0.0", "expo": "^21.0.0", "graphql": "^0.11.7", "graphql-tag": "^2.5.0", "react": "16.0.0-alpha.12", "react-apollo": "^2.0.0", "react-native": "^0.48.4", "react-navigation": "^1.0.0-beta.15" }

应用程序运行和路由导航工作正常。我有两条路线，App和FeedList。

应用程序与github图形api进行对话（我不知道github访问令牌是否必需，如果是这样，我已经添加了它但我不知道这是不是正确的方式）

Feedlist包含在graphql HoC组件中，其道具的data已填充graphql request的结果（即使请求失败）

您可以参考The structure of the data prop

应用程序组件

＆＃13;

＆＃13;

import React, { Component } from 'react'
import ApolloClient from 'apollo-client'
import { ApolloLink } from 'apollo-link'
import { createHttpLink } from 'apollo-link-http'
import { InMemoryCache } from 'apollo-cache-inmemory'
import { ApolloProvider } from 'react-apollo';
import { onError } from 'apollo-link-error';
import Router from './router'

class App extends Component {
  createClient() {
    const httpLink = createHttpLink({ uri: 'https://api.github.com/graphql'})

    // handle network error
    const errorLink = onError(({ networkError }) => {
        if (networkError.statusCode === 401) {
          console.log(networkError)
        }
      // let errorMessage = networkError.statusCode === 401 ? 'Network error 104, handled' : 'link sucess'
      // console.log(errorMessage, networkError)
    })

    // apply widdleware to add access token to request
    let middlewareLink =  new ApolloLink((operation, forward) => {
      operation.setContext({
        headers: {
          authorization: 'GITHUB_ACCESS_TOKEN'
        }
      })
      return forward(operation)
    })
    const link = middlewareLink.concat(httpLink)
    

    // Initialize Apollo Client with URL to our server
    return new ApolloClient({
    link: link,
    cache: new InMemoryCache(),
    })
  }
  render () {
    return (
      <ApolloProvider client={this.createClient()}>
        <Router />
      </ApolloProvider>
    )
  }
}

export default App

＆＃13;

＆＃13;

＆＃13;

FeedList组件

＆＃13;

＆＃13;

import React, { Component } from 'react';
import { Text } from 'react-native';
import { graphql } from 'react-apollo';
import gql from 'graphql-tag';

// The data prop, which is provided by the wrapper below contains,
// a `loading` key while the query is in flight and posts when ready
const FeedList = ({ data }) => {
  console.log(data) // returns default from HoC injected props
  console.log('FeedList Eroor!!',data.error) // returns undefined
  return data.error ? <Text> Error Fetching posts</Text>:<Text>fetching posts... </Text>
}

// The `graphql` wrapper executes a GraphQL query and makes the results
// available on the `data` prop of the wrapped component (PostList here)
export default graphql(gql`{
  search(type: REPOSITORY, query: "react", first: 20) {
    edges {
      node {
        ... on Repository {
          nameWithOwner
          owner {
            login
          }
        }
      }
    }
  }
}`, { options: { notifyOnNetworkStatusChange: true } })(FetchPost);

＆＃13;

＆＃13;

＆＃13;

重要的部分是Wrapped FeedList组件，它记录来自props的数据和App组件中的createClient()方法。 我跟着this尝试捕获数据请求期间可能发生的错误。

HoC包装器组件完成其工作，FeedList的数据道具有除api响应之外的所有内容。

请注意，该错误不会导致应用程序崩溃

上图显示了与expo simulator on android

相同的错误消息

所以我猜我的问题是

1. 如何捕获错误？ Here is a similar issue
2. 如果我按照我的方式构建我的查询问题。如何正确获取github api以返回正确的数据？

Here is the repo you can run and reproduce the error

请注意，该回购邮件中的Issue#1与此SO问题类似，I have already fixed it by handling data.error as per the documentation

另请注意，大多数文档适用于旧版apollo-client＆gt; v2.x.x

Issue #2正是我在这里问的问题。谢谢你的帮助

Answer 1

401状态表示无效的身份验证。正如您所猜测的，您需要一个有效的OAuth令牌来发送您的请求。出于开发目的，您可以generate one。确保按照here列出的范围大纲：

user
public_repo
repo
repo_deployment
repo:status
read:repo_hook
read:org
read:public_key
read:gpg_key

您不希望用户通过您的凭据访问API，因此您最终需要在应用中实施OAuth2身份验证流程，以便为每个最终用户生成令牌。