使用 Relay + React Native (create-react-native-app) 时出错：GraphQL 验证错误`未知类型“查看器”。`答案

【问题标题】：Error when using Relay + React Native (create-react-native-app): GraphQL validation error `Unknown Type "Viewer".`使用 Relay + React Native (create-react-native-app) 时出错：GraphQL 验证错误`未知类型“查看器”。`
【发布时间】：2017-08-21 18:49:19
【问题描述】：

我正在尝试设置一个 RN 应用程序（使用 create-react-native-app 创建）并将其与 Relay 连接。

我的App.js 中已经有以下设置：

import { StyleSheet, Text, View } from 'react-native'
import Relay, {
  Route,
  RootContainer,
} from 'react-relay'
import PokemonList from './components/PokemonList'

Relay.injectNetworkLayer(
  new Relay.DefaultNetworkLayer('https://api.graph.cool/relay/v1/ciyeih9590fhl0162e5zh1z4h', {
    headers: {
    },
  })
)

class IndexRoute extends Route {
  static queries = {
    viewer: () => Relay.QL`query { viewer }`
  }
  static routeName = 'IndexRoute'
}

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <RootContainer
          Component={PokemonList}
          route={new IndexRoute()}
          renderFetched={(data) => <PokemonList {...this.props} {...data} />}
        />
      </View>
    )
  }
}

到目前为止，PokemonList 没有做任何事情来打印我希望从 GraphQL API 加载的viewer.id：

import Relay from 'react-relay'

class PokemonList extends React.Component {

  render() {
    console.log(this.props.viewer.id)
    return (
      <View>
        <Text>Hi</Text>
      </View>
    )
  }

}

export default Relay.createContainer(PokemonList, {
  fragments: {
    viewer: () => Relay.QL`
      fragment on Viewer {
        id
      }
    `
  }
})

我正在使用this babel 插件使我的架构在构建时可用于 Relay。

它需要使用three methods 之一提供 GraphQL 端点。我在.graphqlrc 文件中配置它，如下所示：

{
  "request": {
    "url": "https://api.graph.cool/relay/v1/ciyeih9590fhl0162e5zh1z4h",
    "headers": {
      "Authorization": "xxxxx"
    }
  }
}

这就是我的.babelrc 的样子：

{
  "presets": ["babel-preset-expo"],
  "env": {
    "development": {
      "plugins": ["transform-react-jsx-source", "react-relay"]
    }
  }
}

但是，当我运行应用程序时，我收到了这个错误：

GraphQL 验证错误 Unknown Type "Viewer". 在文件 .../PokemonList.js 中。如果最近添加了参数/字段/类型，请尝试更新您的 GraphQL 架构。

所以在我看来，Relay 根本无法访问我的架构。谁能告诉我在我的设置中缺少什么或者我可以做些什么来进一步调试？

如果这对任何人有帮助，仅供参考，这就是我的package.json 的样子：

{
  "name": "test",
  "version": "0.1.0",
  "private": true,
  "devDependencies": {
    "babel-plugin-react-relay": "^0.10.0",
    "jest-expo": "^0.3.0",
    "react-native-scripts": "0.0.25",
    "react-test-renderer": "~15.4.1"
  },
  "main": "./node_modules/react-native-scripts/build/bin/crna-entry.js",
  "scripts": {
    "start": "react-native-scripts start",
    "eject": "react-native-scripts eject",
    "android": "react-native-scripts android",
    "ios": "react-native-scripts ios",
    "test": "node node_modules/jest/bin/jest.js --watch"
  },
  "jest": {
    "preset": "jest-expo"
  },
  "dependencies": {
    "expo": "^15.1.0",
    "react": "~15.4.0",
    "react-native": "0.42.3",
    "react-relay": "^0.10.0"
  }
}

【问题讨论】：

标签： react-native graphql babeljs relay create-react-native-app

【解决方案1】：

好的，所以答案很简单，看来我的设置已经正确但我还必须删除 crna 缓存，所以运行 rm -rf $TMPDIR/react* 并重新启动 iOS 模拟器实际上已经做到了。

【讨论】：