Реализация входа в React Native с графом Relay Modern

16 мин

пример входа в систему react native с использованием relay введение в последнем уроке вы реализовали регистрацию пользователя в своем приложении react native с использованием back4app и relay в этом руководстве вы создадите механизм входа, дополняющий функцию аутентификации вашего приложения как вы, возможно, знаете, parse по умолчанию уже предоставляет класс пользователя user, который уже имеет готовую к использованию мутацию graphql для входа пользователей, когда это необходимо для вашего приложения процесс здесь будет очень похож на урок по регистрации пользователя вы создадите экран входа с использованием formik, затем эта форма вызовет мутацию relay мутация relay будет взаимодействовать с сервером back4app, обрабатывая весь процесс аутентификации в любое время вы можете получить доступ к этому проекту через наши репозитории github, чтобы ознакомиться со стилями и полным кодом репозиторий примера на javascript цель в конце этого руководства у вас будет приложение react native с реализованной функцией входа пользователя, как показано ниже предварительные требования приложение, созданное на back4app с использованием parse server версии 3 10 или выше вы должны завершить учебник по настройке relay environment ожидайте приложение с простой формой входа здесь мы используем приложение expo с формой, содержащей имя пользователя и пароль для этого учебника мы будем использовать expo в качестве фреймворка react native; для этого учебника мы будем использовать javascript в качестве нашего языка реализации по умолчанию; для этого учебника мы будем использовать наш образец стилей css; 1 создание формы входа если в приложении уже есть компонент формы, переходите к шагу 2 в противном случае не стесняйтесь следовать нашему шаблону форма похожа на форму, используемую в документе регистрации вы также можете использовать ее в качестве основы для входа пожалуйста, перейдите к пользователю регистрация пользователя если хотите узнать, как это реализовать код формы входа должен выглядеть так 1 import react, {usestate} from 'react'; 2 import environment from ' / /relay/environment'; 3 import {formikprovider, useformik} from 'formik'; 4 import { button, text, textinput, view, touchableopacity } from 'react native'; 5 import styles from " / /style" 6	 7 const signin = () => { 8 const \[userlogged, setuserlogged] = usestate(null); 9	 10 const onsubmit = async (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	 24 if (userlogged? id) { 25 return ( 26 \<view style={ {margintop 15, alignitems 'center'} }> 27 \<text>user {userlogged name} logged\</text> 28 \</view> 29 ); 30 } 31	 32 return ( 33 \<formikprovider value={formikbag}> 34 \<view style={styles login wrapper}> 35 \<view style={styles form}> 36 \<text>username\</text> 37 \<textinput 38 name={"username"} 39 style={styles form input} 40 autocapitalize="none" 41 onchangetext={(text) => setfieldvalue("username", text)} 42 /> 43 \<text>password\</text> 44 \<textinput 45 style={styles form input} 46 name={"password"} 47 autocapitalize="none" 48 securetextentry 49 onchangetext={(text) => setfieldvalue("password", text)} 50 /> 51 \<touchableopacity onpress={() => handlesubmit()}> 52 \<view style={styles button}> 53 \<text style={styles button label}>{"sign in"}\</text> 54 \</view> 55 \</touchableopacity> 56 \</view> 57 \</view> 58 \</formikprovider> 59 ); 60 }; 61	 62 export default signin; запустите ваше приложение, и вы увидите экран, как показано ниже пожалуйста, посмотрите на функцию onsubmit обратите внимание, что relay mutation будет внутри этой функции снова, это не проблема, если приложение не использует formik как только вы реализуете компонент формы, relay mutation нужно вызывать только внутри функции отправки 2 создание мутации используя принцип колокации, давайте создадим новую папку под названием mutations, максимально близко к компоненту формы если вы хотите узнать больше о колокации, пожалуйста, перейдите к начало работы руководству на изображении ниже вы можете увидеть принцип колокации на практике все, что связано с компонентом, находится рядом с ним папка оборачивает компонент login, и внутри нее вы создадите другую папку под названием mutations в папке mutations вы создадите relay mutation этот шаблон идеально работает на больших проектах каждый раз, когда у вас есть новая мутация, размещайте её рядом с компонентом, который будет её использовать внутри этой папки вы создадите новый файл под названием loginmutation js loginmutation 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 loginmutation($input logininput!) { 3 login(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 loginmutation($input logininput!) { 5 login(input $input) { 6 viewer { 7 user { 8 id 9 createdat 10 updatedat 11 username 12 } 13 sessiontoken 14 } 15 } 16 } 17 `; 18	 19 function commit({ environment, input, oncompleted, onerror }) { 20 const variables = { input }; 21	 22 commitmutation(environment, { 23 mutation, 24 variables, 25 oncompleted, 26 onerror, 27 }); 28 } 29	 30 export default { 31 commit, 32 }; поскольку фрагмент graphql представляет собой бэкенд, чтобы получить код мутации relay, вы можете перейти к back4app graphql cookbook и найти фрагмент запустите yarn relay yarn relay для генерации новой мутации и обновления файлов если все в порядке, типы мутации будут сгенерированы, и вы сможете продолжить 3 реализуйте функцию on submit шаг отправки является самым важным здесь происходит магия мутации relay этот шаг получает значения формы из formik если приложение не использует formik, значения должны быть доступны здесь независимо от способа их получения вернемся к компоненту формы, давайте начнем реализацию мутации relay импортируйте мутацию 1 import loginmutation from ' /mutations/loginmutation'; внутри функции onsubmit начните создавать входные переменные 1 const onsubmit = (values) => { 2 const {username, password} = values; 3 const input = { 4 username, 5 password, 6 }; 7 } значения вводятся с помощью formik здесь, если вы не используете formik, значения, вероятно, будут поступать через нативный osubmit формы или так, как вам удобно наконец, вызовите мутацию, передав все свойства (не забудьте их импортировать) 1 loginmutation commit({ 2 environment, 3 input, 4 oncompleted (response) => { 5 if(!response? login || response? login === null) { 6 alert('error while logging'); 7 return; 8 } 9	 10 const { viewer } = response? login; 11 const { sessiontoken, user } = viewer; 12	 13 if (sessiontoken !== null) { 14 setuserlogged(user); 15 alert(`user ${user username} successfully logged`); 16 return; 17 } 18 }, 19 onerror (errors) => { 20 alert(errors\[0] message); 21 }, 22 }); итоговый результат onsubmit 1 const onsubmit = (values) => { 2 const { username, password } = values; 3 4 const input = { 5 username, 6 password, 7 }; 8	 9 loginmutation commit({ 10 environment, 11 input, 12 oncompleted (response) => { 13 if(!response? login || response? login === null) { 14 alert('error while logging'); 15 return; 16 } 17	 18 const { viewer } = response? login; 19 const { sessiontoken, user } = viewer; 20	 21 if (sessiontoken !== null) { 22 setuserlogged(user); 23 alert(`user ${user username} successfully logged`); 24 return; 25 } 26 }, 27 onerror (errors) => { 28 alert(errors\[0] message); 29 }, 30 }); 31 }; запустите ваш проект, зарегистрируйте вашего пользователя и затем проверьте это на панели управления back4app мутация вернет значения с сервера как только токен сессии будет возвращен, приложение сможет начать управлять им тестирование с использованием пользователя, созданного в последнем уроке если все работает нормально, появится предупреждение, как показано ниже обработка ошибок при выполнении мутации коммита приложение может обрабатывать ошибки в onerror всегда будет получен массив ошибок наиболее распространено, что этот массив содержит только один объект с сообщением об ошибке см пример ниже основываясь на этом примере, не стесняйтесь создавать свою собственную обработку ошибок на данный момент, если возвращается какая либо ошибка, мы просто показываем ее с помощью alert 1 onerror (errors) => { 2 alert(errors\[0] message); 3 }, заключение теперь у вас есть приложение с полностью работающей функцией входа в следующем руководстве вы поймете, как выйти из него, используя тот же подход вы также будете использовать мутации relay для вызова нашего бэкенда