使用Relay + React Native（create-react-native-app）时出错：GraphQL验证错误`Unknown Type“Viewer”。

问题描述：

我试图设置一个RN应用程序（使用create-react-native-app创建）并连接它与继电器。使用Relay + React Native（create-react-native-app）时出错：GraphQL验证错误`Unknown Type“Viewer”。

我有以下安装在我的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插件在构建时使我的模式可用于中继。

它需要使用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 validation error Unknown Type "Viewer". in file .../PokemonList.js . Try updating your GraphQL schema if an argument/field/type was recently added.

所以在我看来，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" 
    } 
}

答

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

使用Relay + React Native（create-react-native-app）时出错：GraphQL验证错误`Unknown Type“Viewer”。

相关推荐