Unable to resolve module `./__generated__/AppQuery.graphq - react-native

Question

I am trying to connect my existing react-native project to GrapghQl using relay. __generated__ folder not creating AppQuery.graphql.js
Reference link.
error-
package.json
{
"name": "farmcom",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"relay": "relay-compiler --src ./src --schema ./schema.graphql",
"relayw": "relay-compiler --src ./src --schema ./schema.graphql --watch",
"test": "jest"
},
"dependencies": {
"graphql": "^14.0.2",
"prop-types": "^15.6.2",
"react": "16.5.0",
"react-native": "^0.57.2",
"react-native-collapsible": "^1.2.0",
"react-native-splash-screen": "^3.0.6",
"react-native-vector-icons": "^6.0.2",
"react-navigation": "^2.17.0",
"react-relay": "^1.7.0",
"relay": "^0.8.0-1"
},
"devDependencies": {
"babel-jest": "23.6.0",
"babel-plugin-relay": "^1.7.0",
"jest": "23.6.0",
"metro-react-native-babel-preset": "0.48.0",
"react-test-renderer": "16.5.0",
"relay-compiler": "^1.7.0",
"schedule": "^0.4.0"
},
"jest": {
"preset": "react-native"
}
}
.babelrc
{
"presets": ["module:metro-react-native-babel-preset"],
"plugins": ["relay"]
}
relay-environment.js
const { Environment, Network, RecordSource, Store } = require("relay-runtime");
const source = new RecordSource();
const store = new Store(source);
var myHeaders = new Headers();
// myHeaders.append('Access-Control-Allow-Headers', 'Content-Type');
// myHeaders.append("Content-Type", "multipart/form-data");
myHeaders.append("Content-Type", "application/json");
//'https://us-west-2.api.scaphold.io/graphql/narrow-pigs'
//'https://api.graph.cool/relay/v1/cj9z8yz7ig1zb0121dl0uwk2n
// Define a function that fetches the results of an operation (query/mutation/etc)
// and returns its results as a Promise:
function fetchQuery(operation, variables, cacheConfig, uploadables) {
return fetch("https://api.graph.cool/relay/v1/cjd4f6t7c35vn0159xw0lfij1", {
method: "POST",
headers: myHeaders,
mode: "cors",
body: JSON.stringify({
query: operation.text, // GraphQL text from input
variables
})
}).then(response => {
return response.json();
});
}
// Create a network layer from the fetch function
const network = Network.create(fetchQuery);
const environment = new Environment({
network,
store
});
export default environment;
App.js
import React, { Component } from "react";
import { StyleSheet, Text } from "react-native";
import SplashScreen from "react-native-splash-screen";
import { graphql, QueryRenderer } from "react-relay";
import ListAccount from "./src/listAccount";
import environment from "./src/relay.environment";
const AppQuery = graphql`
query AppQuery($count: Int!, $after: String) {
viewer {
...listAccount_viewer
}
}
`;
export default class App extends Component {
constructor(props) {
super(props);
this.state = {
authentic: false
};
}
isAuthentic = authentic => {
this.setState({ authentic });
};
componentDidMount() {
SplashScreen.hide();
}
renderCard(item) {
return <Text>{item.text}</Text>;
}
render() {
return (
<QueryRenderer
environment={environment}
query={AppQuery}
variables={{
count: 1
}}
render={({ error, props }) => {
if (error) {
return <Text>{error.message}</Text>;
} else if (props) {
return (
<View>
<ListAccount viewer={props.viewer} />
</View>
);
}
return <Text>App Loading</Text>;
}}
/>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: "center"
}
});
listAccount.js
import React, { Component } from "react";
import {
Text,
View,
Button,
Checkbox,
TextInput,
TouchableOpacity
} from "react-native";
import { graphql, createPaginationContainer } from "react-relay";
import Account from "./account";
class ListAccount extends Component {
_loadMore() {
if (!this.props.relay.hasMore()) {
console.log(`Nothing more to load`);
return;
} else if (this.props.relay.isLoading()) {
console.log(`Request is already pending`);
return;
}
this.props.relay.loadMore(1);
}
render() {
return (
<View>
<Text>
{this.props.viewer.allAccounts.edges.map(({ node }, i) => (
<Account key={i} account={node} />
))}
</Text>
<Button onPress={() => this._loadMore()} title="more..." />
</View>
);
}
}
export default createPaginationContainer(
ListAccount,
{
viewer: graphql`
fragment listAccount_viewer on Viewer {
allAccounts(first: $count, after: $after, orderBy: createdAt_DESC)
#connection(key: "ListAccount_allAccounts") {
edges {
node {
...account_account
}
}
pageInfo {
hasNextPage
endCursor
}
}
}
`
},
{
direction: "forward",
query: graphql`
query listAccountForwardQuery($count: Int!, $after: String) {
viewer {
...listAccount_viewer
}
}
`,
getConnectionFromProps(props) {
return props.viewer && props.viewer.allAccounts;
},
getFragmentVariables(previousVariables, totalCount) {
return {
...previousVariables,
count: totalCount
};
},
getVariables(props, paginationInfo, fragmentVariables) {
return {
count: paginationInfo.count,
after: paginationInfo.cursor
};
}
}
);
account.js
import React, { Component } from "react";
import { Text } from "react-native";
import { graphql, createFragmentContainer } from "react-relay";
class Account extends Component {
render() {
return <Text>{this.props.account.acno}</Text>;
}
}
export default createFragmentContainer(
Account,
graphql`
fragment account_account on Account {
acno
}
`
);