Implementazione Registrazione Utente con GraphQL e Relay

20 min

registrazione utente con relay introduzione la prima cosa che la tua app farà è probabilmente chiedere all'utente di registrarsi back4app/parse fornisce già di default una classe user, che ha già una mutazione graphql pronta all'uso per registrare nuovi utenti quando è necessario per la tua app in questa guida, creerai una funzionalità di registrazione per un'app react native utilizzando relay per persistere i nostri dati su back4app il flusso è molto simile a quello per creare un query renderer dopo l'implementazione, il relay compiler controllerà il frontend (frammenti) e il backend (modello di dati) e restituirà se tutto corrisponde se sì, i tipi e l'applicazione sono già pronti per comunicare con il backend in qualsiasi momento, puoi accedere a questo progetto tramite i nostri repository github per controllare gli stili e il codice completo https //github com/templates back4app/react native graphql relay js users obiettivo alla fine di questa guida, avrai un'applicazione react native con la funzionalità di registrazione utente implementata come mostrato di seguito requisiti un'app creata su back4app utilizzando il https //www back4app com/docs/platform/parse server version o superiore devi completare il https //www back4app com/docs/react native/graphql/relay setup per questo tutorial utilizzeremo expo come framework react native; per questo tutorial utilizzeremo javascript come nostro linguaggio di implementazione predefinito; per questo tutorial utilizzeremo il nostro campione di style css; 1 creazione del modulo di registrazione se l'applicazione ha già un componente form, vai al passaggio 2 altrimenti, sentiti libero di seguire il nostro boilerplate utilizzeremo un'app expo che ha un modulo con nome utente e password per semplificarci la vita, utilizzeremo alcune librerie di terze parti per aiutare a costruire la funzionalità di registrazione il nostro componente modulo utilizzerà la libreria formik è importante notare che non inferisce il risultato finale installa formik yarn add formik crea un nuovo componente e chiamalo formsignup js formsignup js incolla il seguente codice al suo interno 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; l'applicazione dovrebbe funzionare correttamente fino a qui il modulo dovrebbe apparire così situamo il nostro componente spiegando alcuni punti stiamo usando formik per controllare i valori del nostro modulo puoi anche usare un modulo con html, css e js styled components sarà usato per dare semplici stili css al componente c'è uno stato d'uso per controllare se il nostro utente è stato registrato o meno per favore, guarda la funzione onsubmit nota che la relay mutation sarà all'interno di questa funzione ancora una volta, non è un problema se l'applicazione non sta usando formik una volta che stiamo implementando un componente form, la relay mutation deve solo essere chiamata all'interno della funzione di invio 2 creare la mutazione utilizzando il principio di collocazione, creiamo una nuova cartella il più vicino possibile al componente form chiamala mutations mutations per ricordarti della collocazione puoi andare al nostro documento https //www back4app com/docs/react native/graphql/get started relay graphql , dove forniamo una breve spiegazione esemplicando come gestire la collocazione, nell'immagine qui sotto il componente signup è racchiuso da una cartella all'interno di questa cartella è dove creeremo la cartella mutations mutations e, all'interno della mutations mutations cartella, creeremo la mutazione relay questo funziona perfettamente nei grandi progetti tutto ciò che è correlato al componente sarà posizionato vicino ad esso e sarà più facile lavorare, trovare, ecc usa questo approccio per ogni nuova mutazione dell'applicazione ogni volta mettila vicino al componente che la utilizzerà all'interno di questa cartella, creerai un nuovo file chiamato signupmutation js signupmutation js secondo la nostra ultima guida in cui abbiamo spiegato le mutazioni relay, creerai una funzione all'interno e la chiamerai commit puoi usare il codice qui sotto 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 }; prima di tornare al componente del modulo, creiamo la nostra variabile che riceverà il frammento graphql, rappresentante la mutazione il frammento graphql è ciò che il relay compiler leggerà e abbinerà con schema graphql prima del commitmutation, copia e incolla il seguente codice 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 `; file finale 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 }; poiché il frammento graphql rappresenta il backend, per ottenere il codice della mutazione relay, puoi andare al https //www back4app com/docs/react native/graphql/users/back4app com/docs/parse graphql/graphql sign up e trovare il frammento esegui yarn relay yarn relay per generare la nuova mutazione e aggiornare i file se tutto va bene, i tipi di mutazione verranno generati e potrai procedere 3 implementa la funzione on submit il passaggio di invio è il più importante qui è dove avviene la magia della relay mutation questo passaggio ottiene i valori del modulo da formik se l'applicazione non utilizza formik, i valori devono essere disponibili qui indipendentemente dal modo in cui vengono ottenuti tornando al componente del modulo, iniziamo l'implementazione della relay mutation importa la mutazione 1 import signupmutation from ' /mutations/signupmutation'; all'interno della funzione onsubmit, inizia a creare le variabili di input 1 const onsubmit = (values) => { 2 const {username, password} = values; 3 4 const input = { 5 userfields { 6 username, 7 password, 8 }, 9 }; 10 } i valori sono iniettati da formik qui, se non stai usando formik, i valori probabilmente arriveranno tramite il submit nativo del modulo o come preferisci alla fine, chiama la mutazione passando tutte le props (ricorda di importarle) 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 }); risultato finale di 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 }; esegui il tuo progetto, registra il tuo utente e poi controllalo nel dashboard di back4app la mutazione restituirà i valori dal server una volta restituito il token di sessione, l'applicazione può iniziare a gestirlo gestione degli errori durante la mutazione di commit, l'applicazione può gestire gli errori in onerror riceverà sempre un array di errori il più comune è che questo array contenga solo un oggetto con il messaggio di errore vedi l'esempio qui sotto 1 { 2 "errors" \[ 3 { 4 "message" "l'account esiste già per questo nome utente ", 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 } basandoti su questo esempio, sentiti libero di creare la tua gestione degli errori per ora, se viene restituito un errore, lo mostriamo semplicemente tramite un avviso 1 onerror (errors) => { 2 alert(errors\[0] message); 3 }, conclusione ora hai un'applicazione con una funzionalità di registrazione completamente funzionante nella prossima guida, comprenderai come autenticare un utente (accesso) e disconnetterlo utilizzando lo stesso approccio utilizzerai anche le mutazioni relay per chiamare il nostro backend