RNアプリ(create-react-native-app
で作成)をセットアップしようとしています。リレー付き。Relay + React Native(create-react-native-app)を使用したときのエラー:GraphQL検証エラー `Unknown Type" Viewer "。
App.js
で次のセットアップを持っている
:私はGraphQLのAPIからロードされることを期待viewer.id
を印刷するための期待
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
は、これまで何もしません。
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"
}
}