Реализация выхода пользователей в React Native через GraphQL

выход пользователя из react native введение на этом этапе вы создадите выход пользователя для react native с использованием relay, последней реализации для этого раздела пользователя этот шаг прост, и мы будем следовать нашему https //www back4app com/docs/parse graphql/graphql logout mutation из нашей кулинарной книги graphql вы реализуете мутацию выхода и вызовете её с помощью кнопки в приложении react native в любое время вы можете получить доступ к этому проекту через наши репозитории github, чтобы ознакомиться со стилями и полным кодом https //github com/templates back4app/react native graphql relay js users цель чтобы реализовать функцию выхода из системы в нашем приложении react native с использованием relay и graphql api back4app предварительные требования для этого учебника мы будем использовать сервер parse версии 4 4 если вы хотите использовать другие версии, вы можете проверить соответствующий код мутации на https //www back4app com/docs/parse graphql/graphql logout mutation в примере для вашей версии вы должны завершить https //www back4app com/docs/react native/graphql/relay setup вы должны завершить https //www back4app com/docs/react native/graphql/users/react native login sample вы должны завершить https //app archbee com/docs/ roxiyumxobue9i7uv49e/6qyoyumfldrtjjy7dcgnr для этого учебника мы будем использовать expo в качестве фреймворка react native; для этого учебника мы будем использовать javascript в качестве нашего языка реализации по умолчанию; 1 создание мутации выхода из системы вернемся в папку signin, в папке mutations создайте новый файл и назовите его logoutmutation js logoutmutation js скопируйте и вставьте следующий код внутрь 1 import { commitmutation, graphql } from 'react relay'; 2&#x9; 3 const mutation = graphql` 4 mutation logoutmutation($input logoutinput!) { 5 logout(input $input) { 6 clientmutationid 7 } 8 } 9 `; 10&#x9; 11 function commit({ environment, input, oncompleted, onerror }) { 12 const variables = { input }; 13&#x9; 14 commitmutation(environment, { 15 mutation, 16 variables, 17 oncompleted, 18 onerror, 19 }); 20 } 21&#x9; 22 export default { 23 commit, 24 }; запустите yarn relay yarn relay в вашем терминале, чтобы обновить типы реле 2 создание кнопки выхода теперь откройте компонент formsignin js formsignin js давайте добавим кнопку выхода и вызовем мутацию relay импортируйте новую мутацию relay в начале файла 1 import logoutmutation from " /mutations/logoutmutation"; затем создайте функцию, отвечающую за вызов мутации logout 1 const handlelogout = async () => { 2 logoutmutation commit({ 3 environment environment, 4 input {}, 5 oncompleted async () => { 6 await asyncstorage removeitem('sessiontoken'); 7 setsessiontoken(null); 8 alert('user successfully logged out'); 9 }, 10 onerror (errors) => { 11 alert(errors\[0] message); 12 }, 13 }); 14 }; что происходит в oncompleted oncompleted он удаляет токен сессии из async storage, потому что он больше не действителен очищает локальный usestate, который получает токен сессии по той же причине показывает предупреждение, что пользователь успешно вышел после этого, прямо под userloggedrenderer, давайте реализуем кнопку, отвечающую за вызов выхода из 1 if (sessiontoken) { 2 return \<userloggedrenderer />; 3 } чтобы 1 if (sessiontoken) { 2 return ( 3 <> 4 \<userloggedrenderer /> 5 \<button title={'logout'} onpress={() => handlelogout()} /> 6 \</> 7 ) 8 } импортируйте кнопку из библиотеки react native import { button, text, textinput, view, touchableopacity } from "react native" import { button, text, textinput, view, touchableopacity } from "react native" ; экран приложения должен выглядеть так 3 тестирование тестирование кнопки, при нажатии должно произойти выход из системы и появиться уведомление и затем должно вернуться на страницу входа заключение теперь вы реализовали основные функции аутентификации пользователей, необходимые для любого приложения ваши пользователи теперь могут зарегистрироваться, войти в систему, перемещаться по защищенной области и выйти из вашего приложения react native, используя relay и back4app graphql api