Error when using Relay + React Native (create-react-native-app): GraphQL validation error `Unknown Type "Viewer".` -
i'm trying set rn app (that created create-react-native-app
) , connect relay.
i've got following setup in app.js
already:
import { stylesheet, text, view } 'react-native' import relay, { route, rootcontainer, } 'react-relay' import pokemonlist './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> ) } }
the pokemonlist
doesn't far expect printing viewer.id
expect loaded graphql api:
import relay '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 } ` } })
i'm using this babel plugin make schema available relay @ build time.
it requires provide graphql endpoint using 1 of three methods. configured in .graphqlrc
file so:
{ "request": { "url": "https://api.graph.cool/relay/v1/ciyeih9590fhl0162e5zh1z4h", "headers": { "authorization": "xxxxx" } } }
and .babelrc
looks like:
{ "presets": ["babel-preset-expo"], "env": { "development": { "plugins": ["transform-react-jsx-source", "react-relay"] } } }
however, when i'm running app i'm getting error:
graphql validation error
unknown type "viewer".
in file.../pokemonlist.js
. try updating graphql schema if argument/field/type added.
so seems me relay doesn't access schema @ all. can tell i'm missing in setup or can further debug?
and reference if helps anyone, here package.json
looks like:
{ "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" } }
ok, answer rather simple, seems setup correct had delete crna cache, running rm -rf $tmpdir/react*
, restarting ios simulator did it.
Comments
Post a Comment