React NativeとGraphQLでのユーザー管理: Relayでの実装法

6 分

ユーザーとの作業はじめに多くのアプリの中心には、ユーザーアカウントがあり、ユーザーが自分の情報に安全にアクセスできるようにする概念があります。back4app/parseでは、ユーザーアカウント管理に必要な機能の多くを自動的に処理するparse userという特化したユーザークラスを提供しています。このクラスがどのように機能するかを、ユーザーのサインアップ、ユーザーのログイン、ユーザーのログアウトを行う実践的なガイドを提供することでより詳しく説明します。次のチュートリアルでは、graphqlとrelayを使用して、react nativeアプリケーションでそれぞれを実装する方法を理解しましょう。目標 parse userクラスとrelayがこのクラスをどのように扱うかを説明します。 parseユーザークラス parse userはparse objectのサブクラスであり、柔軟なスキーマ、自動永続性、キーバリューインターフェースなど、すべての同じ機能を持っています。parse objectのすべてのメソッドはparse userにも存在します。違いは、parse userにはユーザーアカウントに特有の特別な追加機能があることです。 parse userのプロパティ parse userには、parse objectとは異なるいくつかの値があります username ユーザーのユーザー名（必須）。 password ユーザーのパスワード（サインアップ時に必須）。 email ユーザーのメールアドレス（任意）。これらの各項目について、ユーザーのさまざまなユースケースを通じて詳しく説明します。 relayミューテーション relayを使用してreact nativeのフロントエンドでuserクラスを扱う方法は、ミューテーションを使用することです。ミューテーションは、関数を作成し、それを実行し、データをバックエンドに送信し、戻り値を期待する役割を担っています。任意のミューテーション関数は、送信するデータを準備します。バックエンドから返されたとき、成功またはエラーのシナリオを処理します。どちらの場合でも、アプリケーションは次の状態を制御し、その後何が起こるかを決定できます。このガイドは、フロントエンドでgraphqlを消費するためにrelay modernを使用しています。ミューテーションを作成する流れは、クエリやフラグメントを作成するのと似ています。 relayミューテーションは、バックエンドの仕様と一致する必要があります。新しいミューテーションを作成する際、relayコンパイラはバックエンドの構造がアプリケーション/フロントエンドの真実のソースであるschema graphqlと同一であるかを確認します。すべてのrelayミューテーションには、commitmutationと呼ばれる主要な関数があります。この関数は、graphqlフラグメント、入力変数、完了コールバック、およびエラーコールバックを処理します。relayミューテーションには他の引数を持つことができますが、次のチュートリアルでは使用されません。 commitmutation commitmutationは、クライアント側でgraphqlのミューテーションを作成および実行するためのデフォルト関数です。queryrendererと同様に、commitmutationはプロップを受け取ります。これらのプロップは、自己の中で組み合わさり、フェッチを準備し、サーバーを呼び出し、戻り値を処理します。アプリケーションの各ケースを処理するために必要なプロップがたくさんあります。しかし、次のチュートリアルでは、次の1つだけを使用します環境環境はアプリケーションのストアとネットワークを担当しています。入力は、変異を解決するために必要な変数を含むオブジェクトです。 oncompletedとonerror 名前が示すように、変異が完了したときに呼び出される関数です。oncompletedは成功のため、onerrorはエラーのためです。 commitmutationの例 1 function commit({environment, input, oncompleted, onerror}) { 2 const variables = {input}; 3	 4 commitmutation(environment, { 5 mutation, 6 variables, 7 oncompleted, 8 onerror, 9 }); 10 } 11	 12 export default { 13 commit, relay mutationに関する詳細情報は、公式ドキュメントをご覧ください。結論さて、変異の概念は明確に説明されました。次のチュートリアルでは、back4appでのサインアップフローを扱います。そこで、新しいユーザーを登録し、セッショントークンを返すためのシンプルな変異を実装する方法が指定されます。