React NativeとRelayで現在ログイン中のユーザーを取得

relayを使用してreact nativeアプリの現在のユーザーを取得する はじめに relayを使用してreact nativeアプリにユーザー登録とログインを実装した後、さまざまなアクションやリクエストを実行するために、現在ログインしているユーザーデータを取得する必要があります。このガイドでは、 https //www back4app com/docs/parse graphql/graphql get current user と 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リポジトリを通じてこのプロジェクトにアクセスできます。 https //github com/templates back4app/react native graphql relay js users 目標 現在のユーザーに関する情報を取得するコンポーネントを作成します。 前提条件 parse serverバージョン3 10以上を使用してback4appで作成されたアプリ。 次のことを完了する必要があります 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 。 このチュートリアルでは、react nativeフレームワークとしてexpoを使用します。 このチュートリアルでは、デフォルトの実装言語としてjavascriptを使用します。 いつでも、スタイルと完全なコードを確認するために、私たちのgithubリポジトリを通じてこのプロジェクトにアクセスできます。 https //github com/templates back4app/react native graphql relay js users 1 ユーザーログインコンポーネントの作成 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は、ログインしたユーザーから情報を取得するためのクエリを実装する必要があります。この操作に使用されるクエリは、 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; 2つ目の@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 signinコンポーネントにuserloggedrendererをインポートする 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 は、もはや意味をなさないコードから削除できます。 loginミューテーションのoncompleted関数からそれを削除するのを忘れないでください。 結論 このステップの最終結果は、前回と同じであるべきです。それに関する情報は表示されますが、今度はユーザー名またはメールアドレスが続きます。 次のドキュメントでは、このユーザーのログアウトを行い、セッションをクリアするボタンを作成し、アプリをログインまたはサインアップフローに戻します。