React NativeアプリでのRelayを使ったGraphQLユーザーログイン実装

relayを使用したreact nativeログインサンプル はじめに 前回のチュートリアルでは、back4appとrelayを使用してreact nativeアプリにユーザーサインアップを実装しました。このガイドでは、アプリの認証機能を補完するログインメカニズムを構築します。 ご存知のように、parseはデフォルトでユーザークラスuserを提供しており、アプリに必要なときにユーザーをログインさせるための使えるgraphqlミューテーションがすでに用意されています。 ここでの流れは、ユーザーサインアップのチュートリアルと非常に似ています。formikを使用してログイン画面を構築し、その後このフォームがrelayミューテーションを呼び出します。relayミューテーションは、認証プロセス全体を処理するback4appサーバーと通信します。 いつでも、スタイルや完全なコードを確認するために、私たちのgithubリポジトリを通じてこのプロジェクトにアクセスできます。 https //github com/templates back4app/react native graphql relay js users 目標 このガイドの最後には、以下に示すように、ユーザーログイン機能が実装されたreact nativeアプリケーションが完成します。 前提条件 parse serverバージョン3 10以上を使用してback4appで作成されたアプリ。 「 https //www back4app com/docs/react native/graphql/relay setup 」を完了する必要があります。 シンプルなサインインフォームを持つアプリを期待してください。ここでは、ユーザー名とパスワードを持つフォームを持つexpoアプリを使用しています。 このチュートリアルでは、react nativeフレームワークとしてexpoを使用します。 このチュートリアルでは、デフォルトの実装言語としてjavascriptを使用します。 このチュートリアルでは、私たちのstyle cssサンプルを使用します。 1 サインインフォームの作成 アプリケーションにすでにフォームコンポーネントがある場合は、ステップ2に進んでください。そうでない場合は、私たちのボイラープレートに従ってください。このフォームは、サインアップドキュメントで使用されるフォームに似ています。ログインの基礎としても使用できます。実装方法を学びたい場合は、ユーザー https //www back4app com/docs/react native/graphql/user sign up relay をご覧ください。ログインフォームのコードは次のようになります 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&#x9; 7 const signin = () => { 8 const \[userlogged, setuserlogged] = usestate(null); 9&#x9; 10 const onsubmit = async (values) => { 11 // @todo the mutation will be implemented here 12 }; 13&#x9; 14 const formikbag = useformik({ 15 initialvalues { 16 username '', 17 password '', 18 }, 19 onsubmit, 20 }); 21&#x9; 22 const {handlesubmit, setfieldvalue} = formikbag; 23&#x9; 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&#x9; 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&#x9; 62 export default signin; アプリケーションを実行すると、以下のような画面が表示されます。 onsubmit関数を見てください。relay mutationはこの関数の中にあることに注意してください。アプリケーションがformikを使用していなくても問題ありません。フォームコンポーネントを実装する際、relay mutationはsubmit関数の中で呼び出される必要があります。 2 ミューテーションの作成 コロケーションの原則を使用して、フォームコンポーネントに最も近い場所にmutationsという新しいフォルダーを作成しましょう。コロケーションについてもっと学びたい場合は、 https //www back4app com/docs/react native/graphql/get started relay graphql ガイドをご覧ください。 以下の画像では、コロケーションの原則が実践されているのを見ることができます。コンポーネントに関連するすべてのものが近くにあります。フォルダーがloginコンポーネントを包み、その中にmutationsという別のフォルダーを作成します。mutationsフォルダーの中にrelay mutationを作成します。 このパターンは大規模なプロジェクトで完璧に機能します。新しいミューテーションがあるたびに、それを使用するコンポーネントの近くに置いてください。 このフォルダー内に、次のような新しいファイルを作成します。 loginmutation js loginmutation js 。ユーザーとの作業ガイドに従って、relay mutationsを説明したところで、以下のようにコミット関数を作成します。 1 function commit({ environment, input, oncompleted, onerror }) { 2 const variables = { input }; 3&#x9; 4 commitmutation(environment, { 5 mutation, 6 variables, 7 oncompleted, 8 onerror, 9 }); 10 } 11&#x9; 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&#x9; 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&#x9; 19 function commit({ environment, input, oncompleted, onerror }) { 20 const variables = { input }; 21&#x9; 22 commitmutation(environment, { 23 mutation, 24 variables, 25 oncompleted, 26 onerror, 27 }); 28 } 29&#x9; 30 export default { 31 commit, 32 }; graphqlフラグメントはバックエンドを表しているため、relayミューテーションのコードを取得するには、 https //www back4app com/docs/react native/graphql/users/back4app com/docs/parse graphql/graphql sign in に行き、フラグメントを見つけてください。 次のコマンドを実行します yarn relay yarn relay して新しいミューテーションを生成し、ファイルを更新します。すべてが正常であれば、ミューテーションの型が生成され、先に進むことができます。 3 送信時の関数を実装する 送信ステップは最も重要です。ここでrelayミューテーションの魔法が起こります。 このステップでは、formikからフォームの値を取得します。アプリケーションがformikを使用していない場合、値は取得方法に関係なくここで利用可能である必要があります。 フォームコンポーネントに戻り、リレー・ミューテーションの実装を始めましょう。 ミューテーションをインポートする 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&#x9; 10 const { viewer } = response? login; 11 const { sessiontoken, user } = viewer; 12&#x9; 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&#x9; 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&#x9; 18 const { viewer } = response? login; 19 const { sessiontoken, user } = viewer; 20&#x9; 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でエラーを処理できます。常にエラーの配列を受け取ります。最も一般的なのは、この配列にエラーメッセージを含むオブジェクトが1つだけ存在することです。以下の例を参照してください 1 { 2 "errors" \[ 3 { 4 "message" "無効なユーザー名/パスワードです。", 5 "locations" \[ 6 { 7 "line" 2, 8 "column" 3 9 } 10 ], 11 "path" \[ 12 "login" 13 ], 14 "extensions" { 15 "code" 202 16 } 17 } 18 ], 19 "data" { 20 "login" null 21 } 22 } この例に基づいて、自由にエラーハンドルを作成してください。今のところ、エラーが返された場合は、アラートで表示するだけです 1 onerror (errors) => { 2 alert(errors\[0] message); 3 }, 結論 これで、サインイン機能が完全に動作するアプリケーションができました。次のガイドでは、同じアプローチを使用してログアウトする方法を理解します。また、relay mutationsを使用してバックエンドを呼び出します。