React NativeでのGraphQLとRelayを用いたユーザーサインアップ実装

relayを使用したユーザーサインアップ はじめに あなたのアプリが最初に行うことは、おそらくユーザーにサインアップを求めることです。back4app/parseはデフォルトでuserクラスを提供しており、アプリに必要なときに新しいユーザーをサインアップさせるための使えるgraphqlミューテーションがすでに用意されています。 このガイドでは、relayを使用してback4appにデータを永続化するreact nativeアプリのサインアップ機能を作成します。 フローは、クエリレンダラーを作成するのと非常に似ています。実装後、relayコンパイラーはフロントエンド（フラグメント）とバックエンド（データモデル）をチェックし、すべてが一致するかどうかを返します。一致する場合、タイプとアプリケーションはすでにバックエンドと通信する準備が整っています。 いつでも、スタイルや完全なコードを確認するために、私たちのgithubリポジトリを通じてこのプロジェクトにアクセスできます。 javascriptの例リポジトリ 目標 このガイドの終わりには、以下に示すようにユーザーサインアップ機能が実装されたreact nativeアプリケーションを持つことになります。 前提条件 back4appで作成されたアプリ、 parse server バージョン 3 10 以上。 次のことを完了する必要があります： relay 環境設定チュートリアル このチュートリアルでは、expoをreact nativeフレームワークとして使用します； このチュートリアルでは、javascriptをデフォルトの実装言語として使用します； このチュートリアルでは、style cssサンプルを使用します； 1 サインアップフォームの作成 アプリケーションにすでにフォームコンポーネントがある場合は、ステップ2に進んでください。そうでない場合は、ボイラープレートに従ってください。 ユーザー名とパスワードを持つフォームを持つexpoアプリを使用します。私たちの生活を楽にするために、サインアップ機能を構築するためにいくつかのサードパーティライブラリを使用します。私たちのフォームコンポーネントはformikライブラリを使用します。最終結果を推測しないことに注意することが重要です。 formikをインストールします 新しいコンポーネントを作成し、名前を付けます formsignup js formsignup js 次のコードをその中に貼り付けます 1 import react, { usestate } from 'react'; 2 import { button, text, textinput, view, touchableopacity } from "react native"; 3 import { useformik, formikprovider } from 'formik'; 4 import styles from " / /style" 5 import environment from ' / /relay/environment'; 6&#x9; 7 const signup = () => { 8 const \[usercreated, setusercreated] = usestate(); 9&#x9; 10 const onsubmit = (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 if (usercreated? id) { 24 return ( 25 \<view style={ {margintop 15, alignitems 'center'} }> 26 \<text>user {usercreated name} created\</text> 27 \</view> 28 ); 29 } 30&#x9; 31 return ( 32 \<formikprovider value={formikbag}> 33 \<view style={styles login wrapper}> 34 \<view style={styles form}> 35 \<text>username\</text> 36 \<textinput 37 name={"username"} 38 style={styles form input} 39 autocapitalize="none" 40 onchangetext={(text) => setfieldvalue("username", text)} 41 /> 42 \<text>password\</text> 43 \<textinput 44 style={styles form input} 45 name={"password"} 46 autocapitalize="none" 47 securetextentry 48 onchangetext={(text) => setfieldvalue("password", text)} 49 /> 50 \<touchableopacity onpress={() => handlesubmit()}> 51 \<view style={styles button}> 52 \<text style={styles button label}>{"sign in"}\</text> 53 \</view> 54 \</touchableopacity> 55 \</view> 56 \</view> 57 \</formikprovider> 58 ); 59 }; 60&#x9; 61 export default signup; アプリケーションはここまで正常に動作するはずです。フォームは次のように見えるはずです コンポーネントを説明するいくつかのポイントを整理しましょう フォームの値を制御するためにformikを使用しています。html、css、jsを使用したフォームも利用できます。 styled componentsを使用してコンポーネントにシンプルなcssスタイルを適用します。 ユーザーが登録されているかどうかを制御するためのuse stateがあります。 onsubmit関数を見てください。relay mutationはこの関数の中にあります。アプリケーションがformikを使用していなくても問題ありません。フォームコンポーネントを実装している限り、relay mutationはsubmit関数の中で呼び出される必要があります。 2 ミューテーションの作成 コロケーションの原則を使用して、フォームコンポーネントに最も近い新しいフォルダーを作成しましょう。それを mutations mutations コロケーションについて思い出すために、私たちのドキュメント getting started , で簡単に説明しています。 コロケーションがどのように機能するかを例示すると、以下の画像では、signupコンポーネントがフォルダーでラップされています。このフォルダーの中に mutations mutations フォルダーを作成します。そして、 mutations mutations フォルダーの中に、relayミューテーションを作成します。これは大規模なプロジェクトで完璧に機能します。コンポーネントに関連するすべてのものが近くに配置され、作業や検索が容易になります。 アプリケーションの新しいミューテーションごとにこのアプローチを使用してください。使用するコンポーネントの近くに配置してください。 このフォルダーの中に signupmutation js signupmutation js という新しいファイルを作成します。前回のガイドに従って、relayミューテーションについて説明したところで、内部に関数を作成し、それをcommitと呼びます。以下のコードを使用できます 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 }; フォームコンポーネントに戻る前に、mutationを表すgraphqlフラグメントを受け取る変数を作成しましょう。graphqlフラグメントは、relayコンパイラが読み取り、schema graphqlと一致させるものです。 commitmutationの前に、以下のコードをコピーして貼り付けてください 1 const mutation = graphql` 2 mutation signupmutation($input signupinput!) { 3 signup(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 signupmutation($input signupinput!) { 5 signup(input $input) { 6 viewer { 7 user { 8 id 9 username 10 createdat 11 } 12 sessiontoken 13 } 14 } 15 } 16 `; 17&#x9; 18 function commit({environment, input, oncompleted, onerror}) { 19 const variables = {input}; 20&#x9; 21 commitmutation(environment, { 22 mutation, 23 variables, 24 oncompleted, 25 onerror, 26 }); 27 } 28&#x9; 29 export default { 30 commit, 31 }; graphqlフラグメントはバックエンドを表すため、relay mutationのコードを取得するには、 back4app graphql cookbook に行き、フラグメントを見つけることができます。 新しいミューテーションを生成し、ファイルを更新するには、 yarn relay yarn relay を実行してください。すべてが正常であれば、ミューテーションの型が生成され、先に進むことができます。 3 送信時の関数を実装する 送信ステップが最も重要です。ここでrelay mutationの魔法が起こります。 このステップでは、formikからフォームの値を取得します。アプリケーションがformikを使用していない場合、値は取得方法に関係なくここで利用可能である必要があります。 フォームコンポーネントに戻り、relay mutationの実装を始めましょう。 ミューテーションをインポートする 1 import signupmutation from ' /mutations/signupmutation'; onsubmit関数の内部で、入力変数を作成し始めます： 1 const onsubmit = (values) => { 2 const {username, password} = values; 3 4 const input = { 5 userfields { 6 username, 7 password, 8 }, 9 }; 10 } 値はformikによって注入されます。ここで、formikを使用していない場合、値はフォームのネイティブosubmitを介して、またはお好みに応じて来る可能性があります。 最後に、すべてのプロパティを渡してmutationを呼び出します（インポートすることを忘れないでください）。 1 signupmutation commit({ 2 environment, 3 input, 4 oncompleted ({signup}) => { 5 const { viewer } = signup; 6 const { sessiontoken, user } = viewer; 7&#x9; 8 if (sessiontoken !== null) { 9 alert(`user ${user username} successfully created`); 10 setusercreated(user); 11 return; 12 } 13 }, 14 onerror (errors) => { 15 alert(errors\[0] message); 16 }, 17 }); onsubmitの最終結果 1 const onsubmit = (values) => { 2 const { username, password } = values; 3 4 const input = { 5 userfields { 6 username, 7 password, 8 }, 9 }; 10&#x9; 11 signupmutation commit({ 12 environment, 13 input, 14 oncompleted ({signup}) => { 15 const { viewer } = signup; 16 const { sessiontoken, user } = viewer; 17 18 if (sessiontoken !== null) { 19 alert(`user ${user username} successfully created`); 20 setusercreated(user); 21 return; 22 } 23 }, 24 onerror (errors) => { 25 alert(errors\[0] message); 26 }, 27 }); 28 }; プロジェクトを実行し、ユーザーを登録してから、back4appダッシュボードで確認してください。mutationはサーバーから値を返します。セッショントークンが返されると、アプリケーションはそれを管理し始めることができます。 エラー処理 コミットミューテーション時に、アプリケーションはonerrorでエラーを処理できます。常にエラーの配列を受け取ります。最も一般的なのは、この配列にエラーメッセージを含むオブジェクトが1つだけ存在することです。以下の例を参照してください この例に基づいて、自由に独自のエラーハンドルを作成してください。今のところ、エラーが返された場合は、アラートで表示するだけです 1 onerror (errors) => { 2 alert(errors\[0] message); 3 }, 結論 これで、サインアップ機能が完全に動作するアプリケーションができました。次のガイドでは、同じアプローチを使用してユーザーを認証（ログイン）し、ログアウトする方法を理解します。また、relay mutationsを使用してバックエンドを呼び出します。