Permalink
Browse files

Wired up sign up and sign in to GraphQL with Relay.

  • Loading branch information...
dblock committed Jul 9, 2018
1 parent 63ed0e6 commit e3e6b9e672ce552be95b7221b1c05818018e8ae9
Showing with 487 additions and 11 deletions.
  1. +4 −1 .babelrc
  2. +2 −0 .gitignore
  3. +1 −0 App.js
  4. +23 −0 app/Environment.js
  5. +25 −0 app/mutations/CreateUserMutation.js
  6. +25 −0 app/mutations/LoginMutation.js
  7. +35 −2 app/screens/SignIn.js
  8. +37 −2 app/screens/SignUp.js
  9. +10 −3 package.json
  10. +156 −0 schema/schema.graphql
  11. +169 −3 yarn.lock
@@ -2,7 +2,10 @@
"presets": ["babel-preset-expo"],
"env": {
"development": {
"plugins": ["transform-react-jsx-source"]
"plugins": [
["relay", { "schema": "schema/schema.graphql" }],
"transform-react-jsx-source"
]
}
}
}
@@ -15,3 +15,5 @@
npm-debug.log*
yarn-debug.log*
yarn-error.log*

__generated__
1 App.js
@@ -1,5 +1,6 @@
import React, { Component } from 'react';
import { createRootNavigator } from './app/Main'
import { graphql, QueryRenderer } from 'react-relay';

export default class App extends Component {
state = {
@@ -0,0 +1,23 @@
import { Environment, Network, RecordSource, Store } from 'relay-runtime';

function fetchQuery(operation, variables) {
return fetch('http://localhost:3000/graphql', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
query: operation.text,
variables,
}),
}).then(response => {
return response.json();
});
}

const environment = new Environment({
network: Network.create(fetchQuery),
store: new Store(new RecordSource()),
});

export default environment;
@@ -0,0 +1,25 @@
import { graphql } from 'react-relay'
import commitMutation from 'relay-commit-mutation-promise'

const mutation = graphql`
mutation CreateUserMutation($input: createUserInput!) {
createUser(input: $input) {
user {
id
}
}
}
`

function commit({ environment, input }) {
const variables = { input }

return commitMutation(environment, {
mutation,
variables
})
}

export default {
commit
}
@@ -0,0 +1,25 @@
import { graphql } from 'react-relay'
import commitMutation from 'relay-commit-mutation-promise'

const mutation = graphql`
mutation LoginMutation($input: loginInput!) {
login(input: $input) {
user {
id
}
}
}
`

function commit({ environment, input }) {
const variables = { input }

return commitMutation(environment, {
mutation,
variables
})
}

export default {
commit
}
@@ -1,10 +1,35 @@
import React, { Component } from 'react';
import PropTypes from 'prop-types'
import { Text, View, StyleSheet, TextInput, SafeAreaView, TouchableOpacity, KeyboardAvoidingView } from 'react-native';
import Logo from '../components/Logo'

import { createFragmentContainer, graphql } from 'react-relay'
import LoginMutation from '../mutations/LoginMutation'
import environment from '../Environment'

export default class SignIn extends Component {
constructor(props) {
super(props);

this.state = {
email: '',
password: '',
message: ''
};
}

onSignIn() {
return Promise.resolve();
LoginMutation.commit({
environment,
input: {
email: this.state.email,
password: this.state.password
}
}).then(response => {
this.props.navigation.navigate('SignedIn')
}).catch(error => {
this.setState({ message: error.message });
});
}

render() {
@@ -13,6 +38,7 @@ export default class SignIn extends Component {
<SafeAreaView style={styles.safeContainer}>
<Logo />
<View style={styles.formContainer}>
<Text style={styles.error}>{ this.state.message }</Text>
<TextInput style={styles.input}
placeholder='e-mail address'
placeholderTextColor='rgba(0, 0, 0, 0.2)'
@@ -21,16 +47,18 @@ export default class SignIn extends Component {
autoCorrect={false}
onSubmitEditing={() => this.passwordInput.focus()}
keyboardType='email-address'
onChangeText={(text) => this.setState({ email: text })}
/>
<TextInput style={styles.input}
placeholder='password'
placeholderTextColor='rgba(0, 0, 0, 0.2)'
returnKeyType='go'
secureTextEntry
onChangeText={(text) => this.setState({ password: text })}
ref={(input) => this.passwordInput = input}
/>
<TouchableOpacity style={styles.button}
onPress={() => this.onSignIn().then(() => this.props.navigation.navigate('SignedIn')) }>
onPress={() => this.onSignIn()}>
<Text style={styles.buttonText}>LOGIN</Text>
</TouchableOpacity>
<Text
@@ -62,6 +90,11 @@ const styles = StyleSheet.create({
justifyContent: 'center',
padding: 20
},
error: {
padding: 10,
fontWeight: '500',
color: 'red'
},
input: {
alignSelf: 'stretch',
borderColor: 'black',
@@ -2,9 +2,35 @@ import React, { Component } from 'react';
import { Text, View, StyleSheet, TextInput, SafeAreaView, TouchableOpacity, KeyboardAvoidingView } from 'react-native';
import Logo from '../components/Logo'

import { createFragmentContainer, graphql } from 'react-relay'
import CreateUserMutation from '../mutations/CreateUserMutation'
import environment from '../Environment'

export default class SignUp extends Component {
onSignUp() {
constructor(props) {
super(props);

this.state = {
name: '',
email: '',
password: '',
message: ''
};
}

onSignUp() {
CreateUserMutation.commit({
environment,
input: {
name: this.state.name,
email: this.state.email,
password: this.state.password
}
}).then(response => {
this.props.navigation.navigate('SignedIn')
}).catch(error => {
this.setState({ message: error.message });
});
}

render() {
@@ -13,12 +39,14 @@ export default class SignUp extends Component {
<SafeAreaView style={styles.safeContainer}>
<Logo />
<View style={styles.formContainer}>
<Text style={styles.error}>{ this.state.message }</Text>
<TextInput style={styles.input}
placeholder='your name'
placeholderTextColor='rgba(0, 0, 0, 0.2)'
returnKeyType='next'
autoCorrect={false}
onSubmitEditing={() => this.emailInput.focus()}
onChangeText={(text) => this.setState({ name: text })}
/>
<TextInput style={styles.input}
placeholder='e-mail address'
@@ -29,16 +57,18 @@ export default class SignUp extends Component {
onSubmitEditing={() => this.passwordInput.focus()}
keyboardType='email-address'
ref={(input) => this.emailInput = input}
onChangeText={(text) => this.setState({ email: text })}
/>
<TextInput style={styles.input}
placeholder='password'
placeholderTextColor='rgba(0, 0, 0, 0.2)'
returnKeyType='go'
secureTextEntry
ref={(input) => this.passwordInput = input}
onChangeText={(text) => this.setState({ password: text })}
/>
<TouchableOpacity style={styles.button}
onPress={() => onSignUp().then(() => this.props.navigation.navigate('SignedIn')) }>
onPress={() => this.onSignUp()}>
<Text style={styles.buttonText}>SIGN-UP</Text>
</TouchableOpacity>
<Text
@@ -70,6 +100,11 @@ const styles = StyleSheet.create({
justifyContent: 'center',
padding: 20
},
error: {
padding: 10,
fontWeight: '500',
color: 'red'
},
input: {
alignSelf: 'stretch',
borderColor: 'black',
@@ -3,18 +3,22 @@
"version": "0.1.0",
"private": true,
"devDependencies": {
"babel-plugin-relay": "^1.6.0",
"graphql": "^0.13.2",
"jest": "^23.0.0-charlie.4",
"jest-expo": "~27.0.0",
"react-native-scripts": "1.14.0",
"react-test-renderer": "16.4.1"
"react-test-renderer": "16.4.1",
"relay-compiler": "^1.6.0"
},
"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": "jest"
"test": "jest",
"relay": "relay-compiler --src ./ --schema ./schema/schema.graphql --extensions=js --extensions=jsx"
},
"jest": {
"preset": "jest-expo"
@@ -23,12 +27,15 @@
"expo": "^27.0.1",
"moment": "^2.22.2",
"moment-duration-format": "^2.2.2",
"react": "16.4.1",
"react": "^16.4.1",
"react-dom": "^16.4.1",
"react-native": "~0.55.2",
"react-native-elements": "^0.19.1",
"react-native-hideable-view": "github:osagie/react-native-hideable-view",
"react-navigation": "^2.5.5",
"react-relay": "^1.6.0",
"react-timer-machine": "^1.0.1",
"relay-commit-mutation-promise": "^1.0.1",
"twix": "^1.2.1",
"yarn": "^1.7.0"
}
Oops, something went wrong.

0 comments on commit e3e6b9e

Please sign in to comment.