Регистрация пользователя с использованием React Native и GraphQL

20 мин

регистрация пользователя с relay введение первое, что сделает ваше приложение, вероятно, попросит пользователя зарегистрироваться back4app/parse уже предоставляет по умолчанию класс user, который уже имеет готовую к использованию graphql мутацию для регистрации новых пользователей, когда это необходимо для вашего приложения в этом руководстве вы создадите функцию регистрации для приложения react native, используя relay для сохранения наших данных на back4app процесс очень похож на создание query renderer после реализации компилятор relay проверит frontend (фрагменты) и backend (модель данных) и вернет, если все совпадает если да, то типы и приложение уже готовы к взаимодействию с бэкендом в любое время вы можете получить доступ к этому проекту через наши репозитории на github, чтобы ознакомиться со стилями и полным кодом репозиторий примера на javascript цель в конце этого руководства у вас будет приложение react native с реализованной функцией регистрации пользователя, как показано ниже предварительные условия приложение, созданное на back4app с использованием parse server version 3 10 , или выше вы должны завершить учебник по настройке relay environment для этого учебника мы будем использовать expo в качестве фреймворка react native; для этого учебника мы будем использовать javascript в качестве нашего языка реализации по умолчанию; для этого учебника мы будем использовать наш образец стилей css; 1 создание формы регистрации если приложение уже имеет компонент формы, переходите к шагу 2 в противном случае не стесняйтесь следовать нашему шаблону мы будем использовать приложение expo, в котором есть форма с именем пользователя и паролем чтобы облегчить себе жизнь, мы собираемся использовать несколько сторонних библиотек для помощи в создании функции регистрации наш компонент формы будет использовать библиотеку formik важно отметить, что она не подразумевает окончательный результат установите formik создайте новый компонент и назовите его formsignup js formsignup js вставьте следующий код внутрь 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; приложение должно работать нормально до этого момента форма должна выглядеть так давайте расположим наш компонент, объяснив некоторые моменты мы используем formik для управления значениями нашей формы вы также можете использовать форму с html, css и js styled components будут использоваться для простых css стилей для компонента существует состояние использования для контроля, зарегистрирован ли наш пользователь или нет пожалуйста, посмотрите на функцию onsubmit обратите внимание, что мутация relay будет внутри этой функции снова, это не проблема, если приложение не использует formik как только мы реализуем компонент формы, мутация relay должна быть вызвана только внутри функции отправки 2 создание мутации используя принцип колокации, давайте создадим новую папку как можно ближе к компоненту формы назовите её mutations mutations чтобы помнить о колокации, вы можете перейти к нашему документу начало работы , где мы кратко объясняем это пример того, как обрабатывается колокация, на изображении ниже компонент signup обернут в папку внутри этой папки мы создадим папку mutations mutations а внутри папки mutations mutations мы создадим мутацию relay это отлично работает в больших проектах всё, что связано с компонентом, будет размещено рядом с ним и будет легче работать, находить и т д используйте этот подход для каждой новой мутации приложения каждый раз размещайте её рядом с компонентом, который будет её использовать внутри этой папки вы создадите новый файл под названием signupmutation js signupmutation js согласно нашему последнему руководству, где мы объяснили мутации relay, вы создадите функцию внутри и назовёте её commit вы можете использовать код ниже 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 }; перед тем как вернуться к компоненту формы, давайте создадим нашу переменную, которая будет принимать фрагмент graphql, представляющий мутацию фрагмент graphql — это то, что компилятор relay будет читать и сопоставлять со схемой schema graphql перед commitmutation скопируйте и вставьте следующий код 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 `; финальный файл 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 }; поскольку фрагмент graphql представляет бэкенд, чтобы получить код мутации relay, вы можете перейти к back4app graphql cookbook и найти фрагмент запустите yarn relay yarn relay для генерации новой мутации и обновления файлов если все в порядке, типы мутации будут сгенерированы, и вы сможете продолжить 3 реализуйте функцию on submit шаг отправки является самым важным здесь происходит магия relay mutation этот шаг получает значения формы из formik если приложение не использует formik, значения должны быть доступны здесь независимо от способа их получения вернемся к компоненту формы, давайте начнем реализацию relay mutation импортируйте мутацию 1 import signupmutation from ' /mutations/signupmutation'; внутри функции onsubmit начните создавать входные переменные 1 const onsubmit = (values) => { 2 const {username, password} = values; 3 4 const input = { 5 userfields { 6 username, 7 password, 8 }, 9 }; 10 } значения вводятся с помощью formik здесь, если вы не используете formik, значения, вероятно, будут поступать через нативный osubmit формы или так, как вам удобно в конце вызовите mutation, передав все свойства (не забудьте их импортировать) 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 }); итоговый результат 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 }; запустите ваш проект, зарегистрируйте вашего пользователя и затем проверьте это на панели управления back4app мутация вернет значения с сервера как только токен сессии будет возвращен, приложение сможет начать управлять им обработка ошибок при выполнении мутации коммита приложение может обрабатывать ошибки в onerror всегда будет получен массив ошибок наиболее распространенный случай — этот массив содержит только один объект с сообщением об ошибке смотрите пример ниже основываясь на этом примере, не стесняйтесь создавать свою собственную обработку ошибок на данный момент, если возвращается какая либо ошибка, мы просто показываем ее с помощью alert 1 onerror (errors) => { 2 alert(errors\[0] message); 3 }, заключение теперь у вас есть приложение с полностью работающей функцией регистрации в следующем руководстве вы поймете, как аутентифицировать пользователя (войти) и выйти из него, используя тот же подход вы также будете использовать relay mutations для вызова нашего бэкенда