RelayとGraphQLでのReact Nativeユーザーログアウト方法

react native ユーザーログアウト はじめに このステップでは、relayを使用してreact nativeのユーザーログアウトを作成します。これはこのユーザーセクションの最後の実装です。このステップは簡単で、私たちの https //www back4app com/docs/parse graphql/graphql logout mutation をgraphql cookbookから参照します。ログアウトミューテーションを実装し、react nativeアプリケーション内のボタンを使用して呼び出します。 いつでも、スタイルや完全なコードを確認するために、私たちのgithubリポジトリを通じてこのプロジェクトにアクセスできます。 https //github com/templates back4app/react native graphql relay js users 目標 relayとback4app graphql apiを使用して、react nativeアプリにログアウト機能を実装します。 前提条件 このチュートリアルでは、バージョン4 4のparse serverを使用します。他のバージョンを使用したい場合は、対応するミューテーションコードを確認できます。 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 。 このチュートリアルでは、react nativeフレームワークとしてexpoを使用します； このチュートリアルでは、デフォルトの実装言語として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 コンポーネントを開きます。ログアウトボタンを追加し、リレーのミューテーションを呼び出しましょう。 ファイルの先頭に新しいリレーのミューテーションをインポートします 1 import logoutmutation from " /mutations/logoutmutation"; 次に、ログアウトミューテーションを呼び出す責任を持つ関数を作成します 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ライブラリからbuttonをインポートします 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を使用してログアウトできるようになりました。