Relay в React Native: Запрос текущего пользователя

получение текущего пользователя с помощью relay для приложения react native введение после реализации регистрации и входа пользователя в ваше приложение react native с использованием relay, вам необходимо получить данные о текущем вошедшем пользователе, чтобы выполнять различные действия и запросы в этом руководстве мы будем следовать руководству по получению вошедшего пользователя в graphql cookbook https //www back4app com/docs/parse graphql/graphql get current user и query renderer https //www back4app com/docs/react native/graphql/relay query renderer для получения информации о текущем пользователе запрос в graphql представлен как 1 query me { 2 viewer { 3 user{ 4 id 5 createdat 6 updatedat 7 username 8 } 9 sessiontoken 10 } 11 } в любое время вы можете получить доступ к этому проекту через наши репозитории github, чтобы ознакомиться со стилями и полным кодом репозиторий примера на javascript цель создать компонент для получения информации о текущем пользователе предварительные условия приложение, созданное на back4app с использованием parse server версии 3 10 или выше вы должны завершить учебник по настройке relay environment вы должны завершить пример входа в react native с использованием relay вы должны завершить вход пользователя в react native для этого учебника мы будем использовать expo в качестве фреймворка react native; для этого учебника мы будем использовать javascript в качестве нашего языка реализации по умолчанию; в любое время вы можете получить доступ к этому проекту через наши репозитории github, чтобы ознакомиться со стилями и полным кодом репозиторий примера на javascript 1 создание компонента user logged в папке компонента signin создайте новый файл и назовите его userloggedrenderer js userloggedrenderer js внутри userloggedrenderer js userloggedrenderer js , давайте создадим компонент, очень похожий на учебник по query renderer, но в этом случае нужен только рендерер запроса с действительным токеном сессии в приложении компонент будет вызван и получит информацию о текущем пользователе компонент query renderer будет выглядеть следующим образом 1 return ( 2 \<queryrenderer 3 environment={environment} 4 query={// @todo implement the query necessary} 5 variables={null} 6 render={({error, props}) => { 7 if (error) { 8 return ( 9 \<view> 10 \<text>{error message}\</text> 11 \</view> 12 ); 13 } else if (props) { 14 // @todo implement a funcion to render the viewer 15 } 16 return ( 17 \<view> 18 \<text>loading\</text> 19 \</view> 20 ); 21 }} 22 /> 23 ); первый @todo должен быть реализован с запросом для получения информации о вошедшем пользователе запрос, используемый для этой операции, описан в руководстве по graphql cookbook для получения вошедшего пользователя https //www back4app com/docs/parse graphql/graphql get current user 1 graphql` 2 query userloggedrendererquery { 3 viewer { 4 user { 5 id 6 createdat 7 updatedat 8 username 9 } 10 sessiontoken 11 } 12 } 13&#x9; второй @todo должен быть реализован с помощью функции, которая будет отображать информацию о пользователе только в том случае, если она существует если ошибки нет, мы собираемся вернуть rendercontent rendercontent функцию, описанную ниже функция будет безопасно отображать информацию о текущем пользователе (электронная почта и имя пользователя) 1 const rendercontent = (viewer) => { 2 if (!viewer? user) { 3 return null; 4 } 5&#x9; 6 const {user} = viewer; 7&#x9; 8 return ( 9 \<view style={ {margintop 15, alignitems 'center'} }> 10 \<text>user {user? username || user? email} logged\</text> 11 \</view> 12 ); 13 }; вы должны реализовать функцию перед компонентом queryrenderer конечный результат компонента должен выглядеть так 1 import react from 'react'; 2 import {graphql, queryrenderer} from 'react relay'; 3 import environment from ' / /relay/environment'; 4 import {text, view} from 'react native'; 5&#x9; 6 const userloggedrenderer = () => { 7 const rendercontent = (viewer) => { 8 if (!viewer? user) { 9 return null; 10 } 11&#x9; 12 const {user} = viewer; 13&#x9; 14 return ( 15 \<view style={ {margintop 15, alignitems 'center'} }> 16 \<text>user {user? username || user? email} logged\</text> 17 \</view> 18 ); 19 }; 20&#x9; 21 return ( 22 \<queryrenderer 23 environment={environment} 24 query={graphql` 25 query userloggedrendererquery { 26 viewer { 27 user { 28 id 29 createdat 30 updatedat 31 username 32 } 33 sessiontoken 34 } 35 } 36 `} 37 variables={null} 38 render={({error, props}) => { 39 if (error) { 40 return ( 41 \<view> 42 \<text>{error message}\</text> 43 \</view> 44 ); 45 } else if (props) { 46 return rendercontent(props viewer); 47 } 48 return ( 49 \<view> 50 \<text>loading\</text> 51 \</view> 52 ); 53 }} 54 /> 55 ); 56 }; 57&#x9; 58 export default userloggedrenderer; 2 импортирование userloggedrenderer в компонент signin вернитесь в компонент formsignin, замените код, который возвращает информацию о текущем пользователе, на новый компонент user logged от 1 if (sessiontoken) { 2 console warn(sessiontoken); 3 return ( 4 \<view style={ { margintop 15, alignitems 'center' } }> 5 \<text>user logged\</text> 6 \</view> 7 ); 8 } к 1 if (sessiontoken) { 2 return \<userloggedrenderer />; 3 } не забудьте импортировать userloggedrenderer userloggedrenderer 1 import userloggedrenderer from ' /userloggedrenderer'; теперь выполните команду yarn relay yarn relay для обновления с новым запросом yarn relay yarn relay теперь будет отображаться имя пользователя или электронная почта с действительным токеном сессии в противном случае компонент не должен рендериться, и будет выполнен вход также, usestate userlogged userlogged можно удалить из кода, который больше не имеет смысла не забудьте удалить его из функции oncompleted в мутации login заключение конечный результат этого шага должен быть таким же, как и в последнем информация об этом будет отображаться, но теперь с именем пользователя или электронной почтой в следующем документе давайте создадим кнопку для выхода этого пользователя и очистки сессии, возвращая приложение к процессу входа или регистрации