User Sign Up

user sign up with relay introduction the first thing your app will do is probably ask the user to sign up back4app/parse already provides by default a class user, which already has a ready to use graphql mutation to sign up new users when it is necessary for your app in this guide, you will create a sign up feature for a react native app using relay to persist our data on back4app the flow is very similar to create a query renderer after implementation, the relay compiler will check frontend(fragments) and backend(data model) and return if everything matches if so, the types and the application is already to communicate with the backend at any time, you can access this project via our github repositories to checkout the styles and complete code https //github com/templates back4app/react native graphql relay js users goal at the end of this guide, you will have a react native application with the user sign up feature implemented as show below prerequisites an app created at back4app using the https //www back4app com/docs/platform/parse server version or above you have to conclude the https //www back4app com/docs/react native/graphql/relay setup for this tutorial we are going to use the expo as a react native framework; for this tutorial we are going to use javascript as our default implementation language; for this tutorial we are going to use our style css sample; 1 creating sign up form if the application already has a form component, go to step 2 otherwise, feel free to follow our boilerplate we will use an expo app having with which has a form with the username and password to make our life easier, we are going to use some third party libraries to help build the signup feature our form component will use the formik library it is important to note that it doesn’t infer the final result install formik yarn add formik create a new component and name it formsignup js formsignup js paste the following code inside it 1 import react, { usestate } from 'react'; 2 import { button, text, textinput, view, touchableopacity } from "react native"; 3 import { useformik, formikprovider } from 'formik'; 4 import styles from " / /style" 5 import environment from ' / /relay/environment'; 6&#x9; 7 const signup = () => { 8 const \[usercreated, setusercreated] = usestate(); 9&#x9; 10 const onsubmit = (values) => { 11 // @todo the mutation will be implemented here 12 }; 13&#x9; 14 const formikbag = useformik({ 15 initialvalues { 16 username '', 17 password '', 18 }, 19 onsubmit, 20 }); 21&#x9; 22 const { handlesubmit, setfieldvalue } = formikbag; 23 if (usercreated? id) { 24 return ( 25 \<view style={ {margintop 15, alignitems 'center'} }> 26 \<text>user {usercreated name} created\</text> 27 \</view> 28 ); 29 } 30&#x9; 31 return ( 32 \<formikprovider value={formikbag}> 33 \<view style={styles login wrapper}> 34 \<view style={styles form}> 35 \<text>username\</text> 36 \<textinput 37 name={"username"} 38 style={styles form input} 39 autocapitalize="none" 40 onchangetext={(text) => setfieldvalue("username", text)} 41 /> 42 \<text>password\</text> 43 \<textinput 44 style={styles form input} 45 name={"password"} 46 autocapitalize="none" 47 securetextentry 48 onchangetext={(text) => setfieldvalue("password", text)} 49 /> 50 \<touchableopacity onpress={() => handlesubmit()}> 51 \<view style={styles button}> 52 \<text style={styles button label}>{"sign in"}\</text> 53 \</view> 54 \</touchableopacity> 55 \</view> 56 \</view> 57 \</formikprovider> 58 ); 59 }; 60&#x9; 61 export default signup; the application should run ok until here the form should look like this let’s situate our component explaining some points we are using formik to control our form values you can also use a form with html, css, and js styled components will be used to give simple css styles for the component there is a use state to control if our user was registered or not please, look at the onsubmit function note that the relay mutation will be inside of this function again, it is not a problem if the application is not using formik once we are implementing a form component, the relay mutation only needs to be called inside the submit function 2 creating the mutation using the colocation principle, let’s create a new folder the most closely to the form component name it as mutations mutations to remember about colocation you can go to our doc https //www back4app com/docs/react native/graphql/get started relay graphql , where we give a brief about it exemplifying how handles the colocation, in the image below the component signup is wrapped by a folder inside of this folder is where we will create the folder mutations mutations and, inside of mutations mutations folder, we will create the relay mutation this works perfectly on big projects everything related to the component will be placed close to it and will be more easily work, find, etc use this approach for every new mutation of the application every time put it close to the component that will use it inside this folder, you will create a new file called signupmutation js signupmutation js according to our last guide where we explained the relay mutations, you will create a function inside and call it commit you can use the code below 1 function commit({ environment, input, oncompleted, onerror }) { 2 const variables = { input }; 3&#x9; 4 commitmutation(environment, { 5 mutation, 6 variables, 7 oncompleted, 8 onerror, 9 }); 10 } 11&#x9; 12 export default { 13 commit, 14 }; before going back to the form component, let’s create our variable that will receive the graphql fragment, representing the mutation the graphql fragment is what the relay compiler will read and match with schema graphql before the commitmutation, copy and paste the following code 1 const mutation = graphql` 2 mutation signupmutation($input signupinput!) { 3 signup(input $input) { 4 viewer { 5 user { 6 id 7 username 8 createdat 9 } 10 sessiontoken 11 } 12 } 13 } 14 `; final file 1 import {commitmutation, graphql} from 'react relay'; 2&#x9; 3 const mutation = graphql` 4 mutation signupmutation($input signupinput!) { 5 signup(input $input) { 6 viewer { 7 user { 8 id 9 username 10 createdat 11 } 12 sessiontoken 13 } 14 } 15 } 16 `; 17&#x9; 18 function commit({environment, input, oncompleted, onerror}) { 19 const variables = {input}; 20&#x9; 21 commitmutation(environment, { 22 mutation, 23 variables, 24 oncompleted, 25 onerror, 26 }); 27 } 28&#x9; 29 export default { 30 commit, 31 }; since the graphql fragment represents the backend, to get the code of relay mutation, you can go to the https //www back4app com/docs/react native/graphql/users/back4app com/docs/parse graphql/graphql sign up and find the fragment run yarn relay yarn relay to generate the new mutation and update the files if everything is okay the types of mutation it will be generated and you can go forward 3 implement on submit function the submit step is the most important here is where the relay mutation magic happens this step gets the values of the form from the formik if the application is not using formik, the values need to be available here independent of the way they get it back to form component, let’s start the implementation of the relay mutation import the mutation 1 import signupmutation from ' /mutations/signupmutation'; inside of onsubmit function, stars creating the input variables 1 const onsubmit = (values) => { 2 const {username, password} = values; 3 4 const input = { 5 userfields { 6 username, 7 password, 8 }, 9 }; 10 } the values are injected by formik here, if you are not using formik, the values will likely come via the form’s native osubmit or as you prefer at last, call the mutation passing all props (remember to import them) 1 signupmutation commit({ 2 environment, 3 input, 4 oncompleted ({signup}) => { 5 const { viewer } = signup; 6 const { sessiontoken, user } = viewer; 7&#x9; 8 if (sessiontoken !== null) { 9 alert(`user ${user username} successfully created`); 10 setusercreated(user); 11 return; 12 } 13 }, 14 onerror (errors) => { 15 alert(errors\[0] message); 16 }, 17 }); final result of onsubmit 1 const onsubmit = (values) => { 2 const { username, password } = values; 3 4 const input = { 5 userfields { 6 username, 7 password, 8 }, 9 }; 10&#x9; 11 signupmutation commit({ 12 environment, 13 input, 14 oncompleted ({signup}) => { 15 const { viewer } = signup; 16 const { sessiontoken, user } = viewer; 17 18 if (sessiontoken !== null) { 19 alert(`user ${user username} successfully created`); 20 setusercreated(user); 21 return; 22 } 23 }, 24 onerror (errors) => { 25 alert(errors\[0] message); 26 }, 27 }); 28 }; run your project, register your user and then check it on back4app dashboard the mutation will return the values from the server once the session token is returned, the application can start to manage it handling errors on commit mutation, the application can handle errors on onerror always will receive an array of errors the most common is this array has only one object containing the error message see the example below 1 { 2 "errors" \[ 3 { 4 "message" "account already exists for this username ", 5 "locations" \[ 6 { 7 "line" 2, 8 "column" 3 9 } 10 ], 11 "path" \[ 12 "signup" 13 ], 14 "extensions" { 15 "code" 202 16 } 17 } 18 ], 19 "data" { 20 "signup" null 21 } 22 } based on this example feel free to create your our error handle by now, if some error is returned we just show it by an alert 1 onerror (errors) => { 2 alert(errors\[0] message); 3 }, conclusion you now have an application with a sign up feature fully working in the next guide, you will understand how to authenticate a user(login) and log out him using the same approach you will also use relay mutations to call our backend