フロントエンド開発のモックにMSWという選択肢

npm install msw@0.45.0 --save-dev

mkdir src/mocks && touch touch src/mocks/handlers.ts

// src/mocks/handlers.ts
import { graphql, GraphQLVariables } from 'msw';

export const handlers = [
  graphql.query('GetUserInfo', (req, res, ctx) => {
    const authenticatedUser = sessionStorage.getItem('is-authenticated');
    if (!authenticatedUser) {
      return res(
        ctx.status(400),
        ctx.errors([
          {
            message: 'Not authenticated',
            errorType: 'AuthenticationError',
          },
        ])
      );
    }
    return res(
      ctx.status(200),
      ctx.data({
        user: {
          auth: authenticatedUser,
          firstname: 'USER_FIRSTNAME',
          lastname: 'USER_LASTNAME',
        },
      })
    );
  }),

  graphql.mutation('Login', (req, res, ctx) => {
    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
    const username: string = req.variables.username;
    sessionStorage.setItem('is-authenticated', username);
    return res(
      ctx.status(201),
      ctx.data({
        login: {
          username,
        },
      })
    );
  }),
];

npm install @apollo/client graphql

npx msw init <PUBLIC_DIR> --save

npx msw init public/ --save

touch src/mocks/browser.ts

// src/mocks/browser.ts
import { setupWorker } from 'msw'
import { handlers } from './handlers'

export const worker = setupWorker(...handlers)

touch src/ApolloClient.ts

// src/ApolloClient.ts
import { ApolloClient, HttpLink, InMemoryCache } from '@apollo/client'

const cache = new InMemoryCache()

const link = new HttpLink({
    uri: 'http://localhost:3000/graphql',
    fetch: (...args) => fetch(...args),
})

// Isolate Apollo client so it could be reused
// in both application runtime and tests.
export const client = new ApolloClient({
    cache,
    link,
})

touch src/LoginForm.tsx

// src/LoginForm.tsx
import React, { useCallback, useState } from 'react';
import { gql, useMutation, useQuery } from '@apollo/client';

const LOG_IN = gql`
  mutation Login($username: String!) {
    login(username: $username) {
      username
    }
  }
`;

interface LoginSessionDetails {
  id: number;
  username: string;
}

// login form
export const LoginForm = () => {
  const [username, setUserName] = useState('');
  // mutation
  const [Login, { data, loading, error }] = useMutation<{ Login: LoginSessionDetails }, { username: string }>(LOG_IN, {
    variables: { username },
  });

  const handleUsernameChange = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
    setUserName(event.target.value);
  }, []);

  const handleFormSubmit = useCallback(
    (event: React.FormEvent<HTMLFormElement>) => {
      event.preventDefault();

      Login({
        variables: {
          username,
        },
      }).catch((err) => console.log(err));
    },
    [username, Login]
  );

  if (loading) {
    return <p>Loading...</p>;
  }

  if (error) {
    return <p>Error while fetching the user data ({error.message})</p>;
  }

  if (data) {
    return <UserInfo />;
  }

  return (
    <div>
      <h1>Login</h1>
      <form onSubmit={handleFormSubmit}>
        <div>
          <label htmlFor='username'>Username:</label>
          <input id='username' name='username' value={username} onChange={handleUsernameChange} />
          <button type='submit'>Submit</button>
        </div>
      </form>
    </div>
  );
};

interface UserInfo {
  firstname: string;
  lastname: string;
}

interface User {
  user: UserInfo;
}

const GET_USER_INFO = gql`
  query GetUserInfo {
    user {
      firstname
      lastname
    }
  }
`;

const UserInfo = () => {
  // queries
  const { loading, data, error } = useQuery<User>(GET_USER_INFO);

  if (loading) return <p>Loading ...</p>;

  return (
    <>
      {data && (
        <>
          <h3>FirstName:</h3>
          <div>{data.user.firstname}</div>
          <h3>LastName:</h3>
          <div>{data.user.lastname}</div>
        </>
      )}
      {error && (
        <>
          <div>{error.message}</div>
        </>
      )}
    </>
  );
};

// src/index.tsx
import React from 'react';
import { ApolloProvider } from '@apollo/client';
import { client } from './ApolloClient';
import { LoginForm } from './LoginForm';
import { createRoot } from 'react-dom/client';
import { worker } from './mocks/browser';

const container = document.getElementById('root');
const root = createRoot(container!); // createRoot(container!) if you use TypeScript

// Start the mocking conditionally.
if (process.env.NODE_ENV === 'development') {
  worker.start().catch((err) => console.log(err));
}

root.render(
  <React.StrictMode>
    <ApolloProvider client={client}>
      <LoginForm />
    </ApolloProvider>
  </React.StrictMode>
);