前回は、フロントエンドでGraphQLのデータを削除・更新しました。

今回は、会員登録機能とログイン機能を実装します。

コードは、こちらです。

フロントエンド:

バックエンド:

会員登録を実装する

まずは、会員登録を実装します。

Apollo Studioを開いて、以前作成したSignupのGraphQLをコピーします。

mutation Signup($email: String!, $password: String!) {
  signup(email: $email, password: $password) {
    errors {
      message
    }user {
      email
      password
    }
  }
}

pagesフォルダのSignup.tsxを開きます。

あらかじめ、gqluseMutationをインポートしておきましょう。

import { gql, useMutation } from "@apollo/client";

gql内に、先程コピーしたGraphQLを貼り付けます。

const signupData = gql`
  mutation Signup($email: String!, $password: String!) {
    signup(email: $email, password: $password) {
      errors {
        message
      }
      user {
        email
        password
      }
    }
  }
`;

useMutation内にsignupDataを指定します。

const [ signup ] = useMutation(signupData);

handleSubmit内に、signupを設定します。

const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
  event.preventDefault();
  const data = new FormData(event.currentTarget);
  // eslint-disable-next-line no-console
  console.log({
    email: data.get("email"),
    password: data.get("password"),
  });
  signup();
};

signup内に、variablesを設定します。

variablesの内容は、console.log内のemailpasswordを使用します。

const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
  event.preventDefault();
  const data = new FormData(event.currentTarget);
  // eslint-disable-next-line no-console
  console.log({
    email: data.get("email"),
    password: data.get("password"),
  });
  signup({
    variables: {
      email: data.get("email"),
      password: data.get("password"),
    }
  });
};

console.logは、削除しておきます。

const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
  event.preventDefault();
  const data = new FormData(event.currentTarget);
  // eslint-disable-next-line no-console
  signup({
    variables: {
      email: data.get("email"),
      password: data.get("password"),
    }
  });
};

では、http://localhost:3000/signupにアクセスします。

メールアドレスとパスワードを入力し、『会員登録』ボタンをクリックすします。

image2

会員登録できているか、Prisma Studioで確認しましょう。

バックエンドでnpx prisma studioApollo Studioを実行します。

Userを開いてみると、

image3

先程登録した、メールアドレスとパスワードがデータに追加されていました。

ログイン機能を実装する

次は、ログイン機能を実装します。

会員登録機能と同様に、Apollo Studioを開いて、以前作成したSigninのGraphQLをコピーします。

mutation Signin($email: String!, $password: String!) {
  signin(email: $email, password: $password) {
    errors {
      message
    }
    user {
      email
      password
    }
  }
}

pagesフォルダのSignin.tsxを開きます。

gqluseMutationをインポートします。

import { gql, useMutation } from "@apollo/client";

gql内に、先程コピーしたGraphQLを貼り付けます。

const signupData = gql`
  mutation Signin($email: String!, $password: String!) {
    signin(email: $email, password: $password) {
      errors {
        message
      }
      user {
        email
        password
      }
    }
  }
`;

会員登録と同様に、useMutationで、signinの設定を行います。

const [signin ] = useMutation(signinData);

const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
  event.preventDefault();
  const data = new FormData(event.currentTarget);
  // eslint-disable-next-line no-console
  signin({
    variables: {
      email: data.get("email"),
      password: data.get("password"),
    },
  });
};;

ログイン完了後、bookページへ遷移するようします。

まずは、useHistoryをインポートします。

import { useHistory } from "react-router-dom";

historyを設定します。

const history = useHistory();

signindataを使いますので、useMutationからdataを設定します。

const [signin, { data }] = useMutation(signinData);

signindatahandleSubmit内のdataでわかりにくくなるので、userDataという名前にしておきます。

const userData = { data };

useEffectを使ってdataのエラーメッセージがない場合、画面遷移をするようにします。

useEffectをインポートします。

import { useEffect } from "react";

トリガーは、userDataで設定します。

useEffect(() => {
    // eslint-disable-next-line react-hooks/exhaustive-deps
}, [userData]);

一度、Apollo Studioを確認してみましょう。

ログインできている時は、signinのerrorsが空になっています。

image4

userDatadataが存在し、userDatadataで設定しているsigninerrorsが無い場合、/bookに遷移するよう設定します。

useEffect(() => {
  if (userData.data) {
    if (!userData.data.signin.errors.length) {
      history.push("/book");
    }
  }
  // eslint-disable-next-line react-hooks/exhaustive-deps
}, [userData]);

では、一通り完了したので、動作確認を行います。

http://localhost:3000/signinにアクセスします。

先程会員登録した、メールアドレスとパスワードを入力し、『ログイン』をクリックすると、

image5

image6

books画面へ遷移することができました。

全文は、以下の通りです。

次回は、バックエンドでPostgresSQLからMongoDBへ乗り換えます。

ブログ一覧