+GraphQL-Type-script-2の起動

ライブラリをインストールしてCSS操作を避ける

材料UI取付

npm install @mui/material @emotion/react @emotion/styled

会員登録ページ

src/gql/signup.gql.tsファイル

の作成

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

export const POST_USER = gql`
    mutation PostUser(
        $email: String!
        $password: String!
        $name: String!
    ) {
    postUser(
        email: $email
        password: $password
        name: $name
    ) {
        email
    }
  }
`;

GraphQLクエリー構文については、公式ホームページを参照してください.
https://graphql.org/learn/

src/pages/SignUp.tsxの作成

import React, { useState } from "react";
import Box from '@mui/material/Box';
import TextField from '@mui/material/TextField';
import Button from '@mui/material/Button';
import { POST_USER } from "../gql/signup.gql";
import { useMutation } from "@apollo/client";
import { useNavigate } from "react-router-dom";

function SignUp() {
  const navigate = useNavigate();
  
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [name, setName] = useState('');
  
  const [postUserMutation] = useMutation(POST_USER);
    
  const onSignUp = async (e: any) => {
    e.preventDefault();
    try {
      const {
        data: { postUser },
      } = await postUserMutation({
        variables: {
          email,
          password,
          name,
        },
      });
      if (postUser) {
        alert("회원가입 성공!");
        navigate("/");
      }
    } catch (error: any) {
      console.error(`onSignUp Error = ${error}`);
    }
  }
  return (
    <div>
      <Box
        onSubmit={onSignUp}
        component="form"
        sx={{
          '& > :not(style)': { m: 1, width: '25ch' },
        }}
        noValidate
        autoComplete="off"
      >
        <TextField id="standard-email-input" label="Email" variant="standard" value={email} onInput={(e:any) => setEmail(e.target.value)} />
        <TextField id="standard-password-input" type="password" label="Password" variant="standard" value={password} onInput={(e:any) => setPassword(e.target.value)}  />
        <TextField id="standard-name-input" label="Name" variant="standard" value={name} onInput={(e:any) => setName(e.target.value)}  />
        <Button variant="text" type="submit">Sign Up</Button>
      </Box>
    </div>
  );
}

export default SignUp;

Hookを使用するため、email、password、nameをusStateに初期化できます.

Box、TextFieldはMaterial UIのコンポーネントでCSSを使わなくてもきれいです.

useMutation、usQueryなどは@apollo/clientが提供するコンポーネントで、grqphqlをhookのように使用するのに役立ちます.

ログイン機能

Home.tsx修正

import React, { useState } from "react";
import Box from '@mui/material/Box';
import TextField from '@mui/material/TextField';
import Button from '@mui/material/Button';
import { Link } from "react-router-dom";
import { GET_USER } from "../gql/home.gql";
import { useLazyQuery } from "@apollo/client";

function Home() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [onSignIn, {loading, error}] = useLazyQuery(GET_USER, {
    fetchPolicy: "cache-and-network",
    onError: error => {
      console.error(error);
      alert(error.message);
    },
    onCompleted: ({getUser}) => {
      console.log(getUser);
    }
  });

  return (
    <div>
      <Box
        component="form"
        sx={{
          '& > :not(style)': { m: 1, width: '25ch' },
        }}
        noValidate
        autoComplete="off"
      >
        <TextField id="standard-email-input" label="Email" variant="standard"  value={email} onInput={(e:any) => setEmail(e.target.value)} />
        <TextField id="standard-password-input" type="password" label="Password" variant="standard"  value={password} onInput={(e:any) => setPassword(e.target.value)} />
        <Button variant="text" onClick={() => onSignIn({variables: {email, password}})}>Sign In</Button>
        <Button variant="text">
          <Link to="/signup" style={{ textDecoration: 'none', color: '#1976d2' }}>Sign Up</Link>
        </Button>
        
      </Box>
    </div>
  );
}

export default Home;

の電子メールとパスワードを入力できる場所とボタンを作成します.

ログイン画面に入力されたパラメータをサーバに送信し、その値をサーバがデータベースに保存しているemailとパスワードと比較してログイン処理を行う.

新しく書かれたuseLazyQueryは、useQueryの役割と似ています.

userQueryは、構成部品のマウントおよびレンダリング時に

を自動的に実行します.

userLazyQuery特定動作実行時に

を実行
fetchPolicyオプションとは?
Apollo Clientはサーバからデータを受信し、これらのデータをキャッシュに入れて同じクエリーを要求すると、キャッシュに格納されているデータを再利用したり、新しい利用可能なキャッシュで指定したりすることができます.
詳細については、下のリンクを参照してください.
https://www.apollographql.com/docs/react/data/queries/#setting-a-fetch-policy
CRUDの作成に必要なサーバー側コード