Implementierung der Benutzerregistrierung mit React Native & Relay

20 min

benutzerregistrierung mit relay einführung das erste, was ihre app tun wird, ist wahrscheinlich, den benutzer zur registrierung aufzufordern back4app/parse bietet standardmäßig bereits eine klasse user, die eine einsatzbereite graphql mutation zur registrierung neuer benutzer enthält, wenn dies für ihre app erforderlich ist in diesem leitfaden erstellen sie eine registrierungsfunktion für eine react native app, die relay verwendet, um unsere daten auf back4app zu speichern der ablauf ist sehr ähnlich wie bei der erstellung eines query renderers nach der implementierung wird der relay compiler das frontend (fragmente) und das backend (datenmodell) überprüfen und zurückgeben, ob alles übereinstimmt wenn ja, sind die typen und die anwendung bereits bereit, mit dem backend zu kommunizieren jederzeit können sie auf dieses projekt über unsere github repositories zugreifen, um die stile und den vollständigen code zu überprüfen javascript beispiel repository ziel am ende dieses leitfadens haben sie eine react native anwendung mit der implementierten benutzerregistrierungsfunktion, wie unten gezeigt voraussetzungen eine app, die bei back4app mit der parse server version 3 10 oder höher erstellt wurde sie müssen das tutorial zur einrichtung der relay umgebung für dieses tutorial verwenden wir expo als react native framework; für dieses tutorial verwenden wir javascript als unsere standardimplementierungssprache; für dieses tutorial verwenden wir unser style css beispiel; 1 erstellen des anmeldeformulars wenn die anwendung bereits eine formular komponente hat, gehen sie zu schritt 2 andernfalls können sie gerne unserem boilerplate folgen wir werden eine expo app verwenden, die ein formular mit benutzernamen und passwort hat um uns das leben zu erleichtern, werden wir einige drittanbieter bibliotheken verwenden, um die anmeldefunktion zu erstellen unsere formular komponente wird die formik bibliothek verwenden es ist wichtig zu beachten, dass sie das endergebnis nicht ableitet installieren sie formik erstellen sie eine neue komponente und benennen sie sie formsignup js formsignup js fügen sie den folgenden code ein 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	 7 const signup = () => { 8 const \[usercreated, setusercreated] = usestate(); 9	 10 const onsubmit = (values) => { 11 // @todo the mutation will be implemented here 12 }; 13	 14 const formikbag = useformik({ 15 initialvalues { 16 username '', 17 password '', 18 }, 19 onsubmit, 20 }); 21	 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	 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	 61 export default signup; die anwendung sollte bis hierhin gut laufen das formular sollte so aussehen lassen sie uns unsere komponente situieren, indem wir einige punkte erklären wir verwenden formik, um unsere formularwerte zu steuern sie können auch ein formular mit html, css und js verwenden styled components werden verwendet, um einfache css stile für die komponente bereitzustellen es gibt einen usestate, um zu steuern, ob unser benutzer registriert wurde oder nicht bitte schauen sie sich die onsubmit funktion an beachten sie, dass die relay mutation innerhalb dieser funktion sein wird es ist erneut kein problem, wenn die anwendung formik nicht verwendet sobald wir eine formular komponente implementieren, muss die relay mutation nur innerhalb der submit funktion aufgerufen werden 2 erstellung der mutation verwenden sie das prinzip der kolokation, um einen neuen ordner so nah wie möglich an der formular komponente zu erstellen nennen sie ihn mutations mutations um sich an die kolokation zu erinnern, können sie zu unserem dokument erste schritte , wo wir eine kurze erklärung dazu geben um zu veranschaulichen, wie die kolokation gehandhabt wird, ist im bild unten die komponente signup von einem ordner umgeben innerhalb dieses ordners werden wir den ordner mutations mutations und innerhalb des mutations mutations ordners werden wir die relay mutation erstellen dies funktioniert perfekt bei großen projekten alles, was mit der komponente zu tun hat, wird in ihrer nähe platziert und ist einfacher zu bearbeiten, zu finden usw verwenden sie diesen ansatz für jede neue mutation der anwendung jedes mal, wenn sie es in die nähe der komponente stellen, die es verwenden wird innerhalb dieses ordners erstellen sie eine neue datei mit dem namen signupmutation js signupmutation js entsprechend unserem letzten leitfaden, in dem wir die relay mutationen erklärt haben, werden sie eine funktion darin erstellen und sie commit nennen sie können den folgenden code verwenden 1 function commit({ environment, input, oncompleted, onerror }) { 2 const variables = { input }; 3	 4 commitmutation(environment, { 5 mutation, 6 variables, 7 oncompleted, 8 onerror, 9 }); 10 } 11	 12 export default { 13 commit, 14 }; bevor wir zum formular komponenten zurückkehren, lassen sie uns unsere variable erstellen, die das graphql fragment empfangen wird, das die mutation darstellt das graphql fragment ist das, was der relay compiler lesen und mit schema graphql abgleichen wird vor der commitmutation, kopieren sie den folgenden code und fügen sie ihn ein 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 `; endgültige datei 1 import {commitmutation, graphql} from 'react relay'; 2	 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	 18 function commit({environment, input, oncompleted, onerror}) { 19 const variables = {input}; 20	 21 commitmutation(environment, { 22 mutation, 23 variables, 24 oncompleted, 25 onerror, 26 }); 27 } 28	 29 export default { 30 commit, 31 }; da das graphql fragment das backend darstellt, um den code der relay mutation zu erhalten, können sie zum back4app graphql cookbook gehen und das fragment finden führen sie yarn relay yarn relay aus, um die neue mutation zu generieren und die dateien zu aktualisieren wenn alles in ordnung ist, werden die typen der mutation generiert und sie können fortfahren 3 implementieren sie die on submit funktion der schritt zur einreichung ist der wichtigste hier geschieht die relay mutationsmagie dieser schritt erhält die werte des formulars von formik wenn die anwendung formik nicht verwendet, müssen die werte hier unabhängig von der art und weise, wie sie erhalten werden, verfügbar sein zurück zur formular komponente, lassen sie uns mit der implementierung der relay mutation beginnen importieren sie die mutation 1 import signupmutation from ' /mutations/signupmutation'; innerhalb der onsubmit funktion beginnen sie mit der erstellung der eingabevariablen 1 const onsubmit = (values) => { 2 const {username, password} = values; 3 4 const input = { 5 userfields { 6 username, 7 password, 8 }, 9 }; 10 } die werte werden von formik injiziert hier, wenn sie formik nicht verwenden, werden die werte wahrscheinlich über das native osubmit des formulars oder nach ihren wünschen kommen rufen sie schließlich die mutation auf und übergeben sie alle props (denken sie daran, sie zu importieren) 1 signupmutation commit({ 2 environment, 3 input, 4 oncompleted ({signup}) => { 5 const { viewer } = signup; 6 const { sessiontoken, user } = viewer; 7	 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 }); endergebnis von onsubmit 1 const onsubmit = (values) => { 2 const { username, password } = values; 3 4 const input = { 5 userfields { 6 username, 7 password, 8 }, 9 }; 10	 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 }; führen sie ihr projekt aus, registrieren sie ihren benutzer und überprüfen sie ihn dann im back4app dashboard die mutation gibt die werte vom server zurück sobald das sitzungstoken zurückgegeben wird, kann die anwendung beginnen, es zu verwalten fehlerbehandlung bei der commit mutation kann die anwendung fehler in onerror behandeln es wird immer ein array von fehlern empfangen am häufigsten enthält dieses array nur ein objekt mit der fehlermeldung siehe das folgende beispiel basierend auf diesem beispiel können sie gerne ihre eigene fehlerbehandlung erstellen wenn jetzt ein fehler zurückgegeben wird, zeigen wir ihn einfach mit einem alert an 1 onerror (errors) => { 2 alert(errors\[0] message); 3 }, fazit sie haben jetzt eine anwendung mit einer vollständig funktionierenden anmeldefunktion im nächsten leitfaden werden sie verstehen, wie man einen benutzer authentifiziert (anmeldet) und ihn mit demselben ansatz abmeldet sie werden auch relay mutationen verwenden, um unser backend aufzurufen